Enabling Facebook XFBML on your Pages

Posted by Tom McCaffery on October 28, 2010 Leave a comment (0) Go to comments

In the process of configuring a “Like” button to use across EMA’s sites, I decided to use the more-enhanced XFBML version over the <iframe> version. One notable feature is the ability for users to add a comment after liking something. This causes the recommendation to show up on the user’s Facebook as a bigger, more informational wall post—not just a simple line item.

It turns out that it’s a little hard to find up-to-date info about Facebook’s Javascript SDK, which you need to add to your site to use XFBML. I spent a few hours going in circles before I finally figured out how to use it. Here are some instructions to include XFBML in your site.

(optional) If you want your page to validate, add these to your <html> tag:

<html xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">

(optional) If you want to specify an image to show in the wall post, add something like this to your page’s <head> tag:
```
<meta property="og:image" content="http://www.example.com/image.jpg"/>
```

Add the Facebook Javascript SDK to your page’s <head> tag:

<script type="text/javascript" src="http://static.ak.fbcdn.net/connect/en_US/core.js"></script>

Add to the bottom of your page, before the </body> tag:
```
<script>
FB.init();
FB.XFBML.parse();
</script>
```

Now, you’re free to use XFBML markup to add stuff! For instance, adding a Like button is as simple as:

<fb:like></fb:like>

To use more advanced Facebook features like pulling data and displaying friend activity, you’ll probably have to configure this code with your application ID and API Key, which you can get from adding your own app in the developer application.

DevelopmentFacebook, Like Button, XFBML

Enabling Facebook XFBML on your Pages

0 Comments.

Leave a Reply

Categories

Tags

Archives