Facebook recommendation bar is very nice widget for blogger and Facebook introduced about their beta social plugin called Facebook Recommendations bar. In this tutorial we will show you how to install Facebook recommendation bar in your blogger/BlogSpot blog.
This widget is very helpful to drive traffic from Facebook and get instant likes and related post on bottom right side like below screenshot.
Steps to install Facebook Recommendation bar on Blogger/ BlogSpot
First of all we need Facebook open graph meta tags, it is important for Facebook recommendation bar. You can get open graph from GitHub gist Go here.
Now Add the following code below <head> tags
<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content=’"en_US"’ property=’og:locale’/>
<meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/>
<!– End Open Graph metadata –>
Now Follow the Below steps :
1) First go to Facebook Recommendation Bar Official Page
2) Just Click on the Get Code Button only.
3) Now create a new App, if you have already then just select your app.
4) Copy the first JavaScript SDK code only first box code and encode the code using this tool.
5) Now login your BlogSpot account and go to Template >> click on EDIT HTML >> Proceed Next.
6) Expend Template widget by click on tick.
7) Now search for <body> tag and paste the copied Facebook code after <body> tag.
8) Now Search for <data:post.body/> tag and place the following code after the<data:post.body/> tag
<code><b:if cond=’data:blog.pageType == "item"’><div class=”fb-recommendations-bar”data-trigger=”onvisible”expr:data-href=”data:post.url”data-read-time=”30″data-action=”like”data-side=”right”expr:data-site=”data:blog.homepageUrl”data-num-recommendations=”2″></div></b:if>
</code>
Now save the template and enjoy
