Facebook plugins available in HTML5 [Update]

facebook social plugin

Posted by Prashant on September 10, 2011 in Facebook,How To,Social Networking

Facebook has many social plugins which allows website or blog owners to connect their audience with them on Facebook e.g. Like button, Facebook share button, Recommendations & Facebook Page like. Anyone who wants to have Facebook social plugins on his/her website need to go to Facebook developers area and by providing few details like website URL, Facebook Page URL, one can easily get a custom code for the Social plugin which can be later added to the website. Earlier code used to be only in XFBML and Iframe but recently has release HTML5 code for its social plugins.

How to get HTML5 code for Facebook social plugins?

Most of the websites are preferring to have HTML5 code on their website which has lot of great features. Now if you want to get a HTML5 code for a like box for you website, follow these steps

Step 1: Go to Facebook Developer Social Plugin Page

On Facebook’s Social Plugin Page , you can get code for 10 social plugins which include Like button, Like box, comments, recommendations, send button, activity feed, login buttons, facepile, registration and live stream.

Step2: Choose the Social Plugin and then generate the code

Once you have decided that which plugin suits best to your requirements,¬† click on that plugin. On the next screen you would have to provide few details depending on the plugin type chosen. In the below example we are going to generate a ‘Like Box’ plugin for Facebook Page.

For ‘Like Box’ you need to provide following information

  1. Facebook Page URL : This is the URL for your Facebook Page. We have top tips for your Facebook Page.
  2. Width : This parameter decides the width of Like box plugin. Choose it to match your website design.
  3. Color Scheme: 2 color schemes i.e light and dark are available. ‘Light’ is bluish while ‘Dark’ is black.
  4. Show Faces: You can choose to show the faces of your Facebook  Page fans.
  5. Border Color: By default this field is blank, but you can enter a border color to match your website theme.
  6. Show Stream: Check this to show the updates from your Facebook Page.
  7. Show Header: Uncheck this option to remove ‘Find us on Facebook’ on top of your social plugin.

Once you have set all these values click on “Get Code” button. By default now Facebook provides ‘HTML5’ version of the code and if you want to get a XFBML or iframe code for the social plugin, click on the drop down button next to ‘Implementation’ field on the plugin code box and choose the required code type.

html5 for facebook plugins

Now this code can be put on your website where ever you want this social plugin to appear. Majority of websites use this on their sidebars but you can also include in your posts, header or footer also. Here is tutorial to add like box to WordPress thesis theme.

Related Posts Plugin for WordPress, Blogger...