Official Facebook Recommendations Bar plugin for Blogger

Facebook Recommendations Bar plugin is a plugin that displays recommended posts of your blog with a like button.

Facebook Recommendations Bar Plugin

Facebook Recommendations Bar Plugin

Today i will tell you how to install Facebook Recommendations Bar plugin to your blogger blog.

How To Add Facebook Recommendations Bar plugin to Blogger

STEP 1 : Adding Open Graph Tags:

Facebook Recommendations Bar Plugin

1. Firstly you need to add Facebook open graph tags for this widget to work or else this widget will show bug. For this go to Blogger Dashboard > Template > Edit HTML.

Facebook Recommendations Bar Plugin

2. Using Ctrl + F or F3 find

 HTML | 
 copy code |
?
 
</head>

3. Paste the below code above the given code.

Facebook Recommendations Bar Plugin

 HTML | 
 copy code |
?
 
<!-- 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 -->

STEP 2 : Creating Facebook App:

4. If you have already created Facebook App then proceed to point 11 else visit Facebook Apps Page.

5. Choose Create An App button.

6. Enter your blog title in app name field and click on Continue.

Facebook Recommendations Bar Plugin

7. Submit Word Verification , if it asks.

8. You will be redirected to app page when you click continue.

Facebook Recommendations Bar Plugin

9. Copy your App ID and also note down it.

10. In App Domains and Website with Facebook Login field write your Blog URL.

Your App is now set , and we are now on halfway.

Facebook Recommendations Bar Plugin

STEP 3 : Adding Javascript SDK:

11. Again Go to Blogger Dashboard > Template > Edit HTML and find the below code

 HTML | 
 copy code |
?
 
</body>

12. Now Paste the below code above the given code.

Facebook Recommendations Bar Plugin

 Java | 
 copy code |
?
 
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//http://www.YOURDOMAIN.com', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    // Additional initialization code here
  };
  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

NOTE : 

• In Line 5 Replace YOUR_APP_ID with your newly created App ID that you noted in point 9.
• In Line 6 Replace http://www.YOURDOMAIN.com with your blog Url.

Step 4 : Adding Widget Code:

13. Find for the below code in your blog template

 HTML | 
 copy code |
?
 
<data:post.body/>

14. Paste the below code above the given code.

 HTML | 
 copy code |
?
 
<b:if cond='data:blog.pageType == "item"'>
  <div class="fb-recommendations-bar" expr:data-href="data:post.url" data-read-time="25"
  data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2">
  </div>
</b:if>

CUSTOMIZATIONS :

• data-read-time=”25″ –> Number of seconds the plugin will wait before it expands.
• data-action=”Like” –> type of action (Like or Recommend).
• data-num-recommendations=”2″ –> Number of recommendations to be displayed.
• data-side=”right” –> The position of plugin.

15. Save your Template.

Facebook Recommendations Bar Plugin

16. Reload your page and see your official Facebook recommendations bar plugin working without any problem!!