Ravi Saive: A Technology Blog For Newbies

Recently, Facebook released their brand new social plugin named Facebook Recommendations Bar. This plugin allows any users to share and like content, and get recommendations with their friends. This Recommendations Bar is always stays at right or left bottom corner of your screen and allows users to "like" your page. As the user scrolls down the page the plugin will expand and display your latest articles to read on your site. The brand new social plugin widget is more useful in driving traffic to your site.



In this article I will guide you'll how to install latest Facebook Recommendations Bar widget to your blogger blogs. As usual installation steps kept simple, just follow my steps.

Step 1: How to Install Facebook Recommendations Bar Widget

First, you must include open graph markup tags on your site to display Facebook Recommendations. If you don't include it, the recommendations will won't work and show an error message. So, I work around the problem and finally found a simplest way to add open graph markup tags on blogger blogs. All thanks goes to GitHub gist owner pathawks.

For Old Dashboard

1. Go to your Design ---> Edit HTML.
2. Mark on "Expand Widget Templates".

For New Dashboard

1. Go to your Templates ---> Edit HTML ---> Proceed.
2. Mark on "Expand Widget Templates".

Then, add the following Open Graph Markup tags code Before </head> tag.

<!-- Begin Open Graph metadata -->
<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'/>
<!-- End Open Graph metadata -->

Step 2: Creating Facebook Recommendations Bar Widget

1. Go to official Facebook Recommendations Bar page.

2. Next, click on Get Code Button.


3. On next screen, Click on create a new app.


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


5. Correctly enter Captcha Code and click on Submit button.


6. Once again click on the Get Code button.


7. Next copy JavaScript SDK code shown in the First Box.

Step 3: Adding JavaScript SDK Code

For Old Dashboard

1. Go to your Design ---> Edit HTML.
2. Mark on "Expand Widget Templates".

For New Dashboard

1. Go to your Templates ---> Edit HTML ---> Proceed.
2. Mark on "Expand Widget Templates".

1. Now place the JavaScript SDK copied code Before the </body> tag. Refer screen below.


2. 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>

3. Save Template.