Tuesday, October 2, 2007

FBML tags in my Facebook application

After I'd finish creating my app with FBJS and got a few friends to add it, I went back and added some extra stuff to it. I added a logo using the default img tag, which was really trivial, though the dev wiki entry on how Facebook's image caching works was helpfully informative.

Then, using the fb:if-user-has-added-app FBML tag, I put in some conditional content on the canvas page.

By design, and in the spirit of spreading the Grace@Work eCommentaries as widely as possible, my app does not require users to add the app to start using it. So, the new (conditional) content is basically a link to add the application from the canvas page, for users who have not already done so. The FBML looks like this:


<fb:if-user-has-added-app>
<fb:else>

<a href="/apps/application.php?id=myappid">
Add this application to your account
</a>

</fb:else>
</fb:if-user-has-added-app>

Pretty straight forward, isn't it? In the updated version, I added some descriptions for the app in the above else condition.

I also added a Share button on the profile box (look up fb:share-button):


<fb:share-button class="url" href="http://www.facebook.com/apps/application.php?id=myappid" />

The fb:share-button creates a link button for you. Clicking on the button will pop up a window which lets you send the application About page to multiple Facebook friends.

You can set the Share button to send media (music, audio etc) and even blog posts. Right now, I'm trying to get the Share button to work with each Grace@Work post on the canvas page. This will be a little challenging, since it'll mean using the setInnerFBML on the FBJS-created DOM. I'll need to either pipe the fb:share-button tags right into result of my AJAX calls, or add a window.open call in the onclick event of link node. I'm thinking I might go with the former.

2 comments:

Anonymous said...

Hi,
is there a way to make the "share message" for an application look just like the one generated by the share button on the about page?

When I just copy the share button example from the developers wiki, the message looks pretty dull, with "www.facebook.com" as default subject.

Thanks in advance!
/Jakob Waller

Collin Chung said...

Jakob, how about using the meta tags?