Add Facebook Plugins to your Website

Written by Amit Agarwal on Feb 18, 2014

facebookIf you have tried adding Facebook plugins to your website before but then skipped thinking the implementation was getting too geeky for you, I suggest that you explore the option again.

That’s because Facebook has now made it extremely easy for anyone to integrate Facebook social elements into their website or blog – just copy-paste a single line of HTML code and your site will instantly become Facebook-ready.

It all starts with a Like button that you need to add at the bottom of every post (or any other location) on your blog. Here’s the code:

If you are using WordPress software, open the single.php file and add the following code. You may change the height and width of the IFRAME as per your blog design.

<iframe src="<?php echo urlencode(get_permalink()); ?>&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px"></iframe>

If you are using the classic template of Blogger, the code is:

<iframe src="<$BlogItemPermalinkUrl$>&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px"></iframe>

And for the modern version of Blogger, the code is courtesy DevFuel.

<iframe expr:src='"" + data:post.url + "&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px' allowTransparency='true'></iframe>

You need to edit the HTML of your Blogger template and insert the above line somewhere after the post template – search for "<b:includable id=’post’ var=’post’>".

A reader on your site, who is logged into her Facebook account, can now give your story a “Thumbs up” by simply clicking this Like button. She will also have to option to publish a snippet of your blog story on to her Facebook profile.

Then you have the Activity widget that shows in near real-time how people are interacting with your stories. If the user is logged into Facebook, the activity widget will show the activity of her friends on your web site else it’ll show everyone’s activity.

However, the most exciting social plugin for Facebook in the new recommendations engine. It shows a list of most popular stories on your blog as determined by the count of Facebook users who have “liked” that story.

You can see both the Activity and Recommendations widget in action below.

Subscribe to our Email Newsletter