Implementing Facebook Connect (Part 3) - Accessing Data from Facebook

About a month ago I posted a continuation of my Implementing Facebook Connect series on how to establish a connection to Facebook. In this post I am going to look at using that connection we established to access user data and render it on a page.

XFBML

Once you’ve established your connection to Facebook you now have access to a wide array of information, but to display this information you need to get familiar with Facebook Markup Language (FBML), an extension to HTML. The cool thing with FBML is that you can access a lot of information without a lot of code. All you need is the FBML tag in your HTML document and that’s that.

Rendering XFBML

In order to render XFBML tags on your page you first need to add the appropriate doctype and HTML attribute to your document.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>

The above mark-up is a standard doctype declaration. The only thing to note here is the XML namespace attributes added to the HTML tag. These are necessary in order to IE to render things appropriately so you don’t want to leave them out.

After you have the appropriate doctype declared you need to initialize the JavaScript Client Library from the Facebook site. This script basically contacts Facebook servers and tells them that you want to display FBML on the page in question and it’s up to Facebook to provide all the necessary tools to do so.

Finllay you need to send them your API key using the following script (which should be placed right after the above JavaScript include).

The Tags

OK, so now that we have the environment setup to recognize and render FBML we can review some of the tags and what they do.

<fb:login-button></fb:login-button>

The login-button tag should be familar from my last post. This tag renders a Facebook Connect log-in button on your site. When a user clicks the button they are presented with the Facebook log-in form in a pop-up window. When they log-in your application is added to their list of approved applications.

<fb:name uid=”user_id”>

The name tag does just what it’s mark-up would suggest, it displays the users name. This tag has one required attribute called uid where you need to provide a user id. You can also use this tag with Facebook Pages as well by passing the page id instead of the user id in the uid attribute. For more information about the name tag, visit the Developers Wiki.

<fb:pronoun uid=”user_id”>

The pronoun tag displays a pronoun for a specified user. Again, this tag has one required attribute uid for the user id. For more information about the pronoun tag, visit the Developers Wiki.

<fb:profile-pic uid=”user_id”>

The profile-pic tag can display a users Facebook profile picture in a number of different ways. After providing a user id for the uid attribute you can also specify a size (like thumb, small, pic_square, etc.). For more information about the profile-pic tag, visit the Developers Wiki.

<fb:grouplink gid=”group_id”>

The grouplink tag gives you the ability to display group page links using FBML.  Simply provide the group id for the gid attribute and your all set. For more information about the grouplink tag, visit the Developers Wiki.

<fb:eventlink eid=”event_id”>

The eventlink tag is similar to the grouplink tag except for events. Fed an event id for the eid attribute it will render a link to the specified events page within Facebook. For more information about the grouplink tag, visit the Developers Wiki.

<fb:serverfbml>

The serverfbml tag is a very powerful tag that allows you to render FBML on Facebooks servers within an iFrame on your page. Using this tag you can interact with Facebook data through forms and such and it all takes place on Facebooks servers for security reasons. For more information about the grouplink tag, visit the Developers Wiki.

Try it yourself!

For additional information about the tags mentioned here and others I would recommend checking out the Facebook Developers Wiki. You can try things out on your own, or Facebook provides a number of demo files available for download which use the tags mentioned above and others to help you get a better idea of what’s possible.

There is one post left in this series and I promise it won’t take me a month to post it. In this post we looked at accessing information from Facebook; in the final post we will look at sending information back to Facebook so stay tuned!