Wednesday, July 4, 2012

Add Official Facebook Recommendations Bar Widget To Blogger

Author: Gagan Masoun
How to Add Official Facebook Recommendations Bar Widget To Blogger Blog
Facebook has many useful social plugins for increasing traffic to your website or blog. Now, Facebook released their latest social plugin named Facebook Recommendations Bar. This tutorial will guide you "How to Add Official Facebook Recommendations Bar Widget To Blogger Blog". 

This plugin allows any users to share and like content. Only those articles are displayed that are previously liked or shared on Facebook. The number of likes are displayed under each article along with page title and a thumbnail. It also contains a like button. Now this tutorial will show you how to install latest Facebook Recommendations Bar widget to blogger.

New Update: Add Facebook "Subscribe" Button To Blogger Blog

Creating Facebook Recommendations Bar Widget

Step1: Create a Facebook Application
  • Log into Facebook Apps
  • Click on Create New App button towards Top-right
  • In the box that pops up, type "Recommendations Bar" inside the App name field and leave other options as default. Click continue.
Recommendations Bar

  • Enter The Captcha Security Code and Click Submit
  • You are app is almost complete. Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes.
Website with Facebook Login
  • Now, you will see 2 line codes on the top of application. One is App ID and the other is App secret. Just copy the App ID code and keep it save in a notepad. We will need it later.
alpha-numerical characters

Now Follow Step 2

Follow these steps to add the bar to Blogger:
  • Go To Blogger Dashboard --> Template --> Backup Your Template 
  • Click Edit HTML > Proceed
  • Click (Ctrl + F) Search <html
Replace it with this code:
<html xmlns:fb=''
This will make the plugin compatible in older versions of internet explorer also. Since blogger templates are coded in XML therefore inserting this XML namespace will enhance the plugin performance and compatibility.
  • Next search for <body> and just below this tag paste the following code:
Note: If you are using the new blogger templates like Simple, Awesome Inc., Travel, Watermark or Picture window then please search for <body instead. Make sure to paste the code below the entire body tag.

<div id='fb-root'/> 
//Facebook Recommendation bar by 
(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return; 
  js = d.createElement(s); = id; 
  js.src = "//***************"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'> 
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='' trigger='40%'/></div> 
You are almost done. Make these changes:
  • Replace *************** with your 15 digit App Id that you saved in step1.
  • Replace with your blog link
  • Save your template and you are all done!
Visit your blog and scroll down about 50% of your page and wait for 10 seconds for the plugin to expand. Enjoy the new way of free pageviews juice! :)

Optional Steps For Make Changes

Below are optional customization and control options. You can skip them if you want
  • max_age: will decide the age limit of articles. Sometimes you don't want to display too old articles so you can set it to display up to 1-180 days old posts. But if you don't want to take age into account then let it be 0 as default.
  • num_recommendations: You can set how many articles to display. By increasing or decreasing the value 3
  • read_time: As soon as the user reaches a specified location, the plugin would expand and before expanding it will take some time. I have kept it equal to 10 seconds, you can increase it to 30 or more as you wish.
  • side: You can decide the location of plugin. By default it shows up towards the bottom right corner of your page. You set it to float to left
  • trigger: On page load the plugin collapses and as soon as it reaches a specified location it expands. You can choose that location in three ways i.e. onvisible, X% or manual. I prefer locating the trigger point by percentage for better pageviews. The widget will expand as soon as the user scroll downs 40% of your page. You can increase or decrease this value. If you wish that the plugin must expand as soon as the reader reaches the end of your article then instead of pasting the code between the purple lines paste it just below data:post.body tag and use the value onvisible instead of 40%.
  • The widget will display only on post pages and not on homepage or static pages. To display it on all pages, then simply delete the purple bolded lines.

Troubleshooting :

Since Most templates are not well structured and require installation of meta tags to tell Facebook to fetch correct page titles, thumbnails and blog title. To do this simply paste the following code just below <head> tag inside your template 
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
Save your template and now see the plugin if it correctly shows page titles both on your blog and Facebook. 

See Also: How To Install IntenseDebate Comment System In Blogger


Whole credits goes to This is awesome widget for blogger users, So I'm sharing on blogdaddy blog. If you have any problem regarding this widget please ask via comment.


Post a Comment