How to Add Facebook Social Plugins to Your Blog

As per TechCrunch, there are 50,000 websites which have already integrated Facebook’s new social plugins, is your blog one of them?

Up till now, Facebook has offered 8 social plugins, just as below:

1. Activity Feed
2. Comments
3. Facepile
4. Like Box
5. Like Button
6. Live Stream
7. Login with Faces
8. Recommendations

In order to add any of the above 8 Facebook social plugins to your blog, you can use the iframe code or XFBML code. There are both iframe code and XFBML code for Activity Feed, Like Box, Like Button, Live Stream as well as Recommendations, but there is only XFBML code for Comments, Facepile and Login with Faces.

For the social plugin with iframe code, you can just copy and paste the code in any post/page or sidebar of your blog, then the social plugin will be active. And for the social plugin with XFBML, you need the JavaScript SDK to active it.

Below are the steps for you to add an XFBML social plugin to your blog:

1. Create an Application

Opening Facebook Create an Application webpage，you will see a screen like below:

Enter your blog name, blog URL and select your blog language, click on the “Create application” button, then you will see your app name, URL, ID, secret and sample code, just as below:

In the sample code, we just need below section for WordPress blog:

The above code is called JavaScript SDK, which you can use as many times as you want anywhere, just remember to replace “112991812071064” with your app ID.

2. Add XFBML Code

In order to make the social plugin with XFBML code active, you just need to put the XFBML code together with JavaScript SDK. For example, the XFBML code for the social plugin Comments is as below:

If you want to add this Comments plugin to your blog, just copy and paste the above code as well as the JavaScript SDK in any post or page of your blog, and then you are done.

The effect of the Comments social plugin will look like this:

And if you want to add the Comments social plugin to the sidebar of your blog, just put the XFBML code together with JavaScript SDK in the sidebar, that’s it.

Posted in: API,Facebook,Social Plugins,Widget