Get the New HTML5 Code for Facebook Like Box And Other Social Plugins

It seems that facebook is on a spree to add more and more features. Recently facebook have rolled out a feature to enable subscribers for a personal profile. Those who are not friends can subscribe to profile and receive the update in their News Feed.

Facebook like box enables user’s to like any fan page and then receive updates from that page. It’s a great way to stay in touch with your favorite celebrity, brand, website or Blog. Bloggers are already using this plugin to increase their “likes”. For some, the “like box” has also become a showoff. There are many more such useful plugins developed by facebook.

Those who want to have these social plugins on the website, can go to facebook developers area and can get the code easily by providing a few details. The code can then be added to the website. Earlier “facebook social plugins” were available in Iframe and XFBML only, but now you can get the new HTML5 code.

HTML5 Code for facebook social plugins

Why get the new HTML5 code? What’s so special? Well, if you’re thinking about this then the answer is that the new HTML5 code is faster then compared to old XFBML code. As per my testing, I have found that HTML 5 code loads faster. Also some websites may prefer to follow the new standard, and remove the old code. Facebook has also made this HTML5 code the default one, so you don’t need to click on drop down and select one.

To get the new code, head over to facebook developer social plugins page and click on the desired option. Let’s say you want to add the “Like box” to your website. Click on the “Like Box” link.

facebook HTML5 social code

On the next screen, provide a few details about your site:

  1. facebook page URL: Enter your fan page URL here
  2. Width: Set the width here
  3. Color scheme: Select the color scheme from here
  4. Show faces: Select whether you want to show faces of your friends or not
  5. Border color: The border color of the plugin. By default this would be blank, but you can set the border color to match your site
  6. Stream: Check this to display profile stream
  7. Header: Check this to display header

Once all these options are set, click on Get Code button. By default you will be able to get the new HTML5 code. I would recommend you get this new code. To get iframe or xfbml code, click on drop down button next to “implementation” field and select that option. Finally, copy the code from here and paste this code on your site, wherever you want this social plugin to appear. It’s really this easy to implement the new HTML5 code for facebook social plugins.

WordPress tip: Those are using WordPress, can just paste this code in a “Text” widget and place that widget on the desired widget area e.g. sidebar.

Related: Enable subscribers for personal profile in facebook