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:

facebook old comments box

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.

Update:

The Comments Box has been updated, and the old one are not available any more.

This entry was posted in Other Free Nuts and tagged , . Bookmark the permalink. Both comments and trackbacks are currently closed.

7 Comments

  1. J
    Posted September 21, 2010 at 12:04 am | Permalink

    Cool!! :)

  2. Jack Cohen
    Posted October 11, 2010 at 2:32 am | Permalink

    This is interesting. You can post a comment without login to facebook too?

  3. Young
    Posted October 11, 2010 at 9:05 am | Permalink

    @Jack Cohen No, you need login to Facebook to comment with the social plugin.

  4. Vladica
    Posted January 17, 2011 at 7:04 pm | Permalink

    You have here the same issues like I, anonymous post is available but it does not work. It works only if you are logged in on facebook.

  5. Posted May 3, 2011 at 2:51 pm | Permalink

    this is amazing. its my first time to see that facebook developers, and how they sign up there. i really want to try that plug in sooner. thank you a lot for sharing it!

  6. AngeWayne
    Posted May 19, 2011 at 3:22 pm | Permalink

    Facebook social plug in to my site? what a brilliant idea. WE all know that facebook is one of the biggest social media site. So it will surely a great chance to have that plug in. Thanks for the steps and instructions, much appreciated.

  7. Posted December 6, 2012 at 11:48 pm | Permalink

    Have written article on how to integrate Facebook comment plugin on your blog or website http://adf.ly/FeY8m