Add Official Facebook Recommendations Bar Widget To Blogger

Recently, Facebook released their brand new social plugin named Facebook Recommendations Bar. 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.

Creating Facebook Recommendations Bar Widget

• Go to official Facebook Recommendations Bar page.
• Now, click on Get Code Button.

• Now Click on create a new app

• Enter App Name as your Blog Title and App URL with your Blog URL then Click on Continue button.

• Enter Captcha Code Code and Click on Submit button
• Now Click on Get Code Button once again.

• Next copy the JavaScript SDK code shown below.

• Now Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</body>

• Now Paste the JavaScript SDK copied code just above/before it
• Now search for </head> code and add the following lines of code above it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <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='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

• Next, search for <data:post.body/> code and add the following lines of code After it.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class="fb-recommendations-bar" 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>

• Now save your template

Like it? Share it.