Home » Blogger Tutorials, Tricks and Hacks » How To Install Facebook Recommendations Bar Widget For Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Install Facebook Recommendations Bar Widget For Blogger

How To Install Facebook Recommendations Bar Widget For Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,607 views

Facebook has already introduced a brand new social plugin called the ‘Facebook Recommendations Bar’. It’s a plugin that basically allows users to receive recommended content or material that they ‘Like’ and share them with their Facebook friends.

This is a great and helpful way to drive traffic from Facebook. Good thing is, Harish Dasari has already created a nice tutorial on how you can install in your Blogger site.

For this plugin to work, you must first have Facebook’s Open Graphs meta tags. Pathawks’ meta, according to Harish, is the simplest one out there, so that’s what we’ll be using here.

Just copy/paste the code below right after the <head> tag of of your template:

<!-- 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 -->

Once you have that, follow the instructions below:

  1. Go to Facebook Recommendations Bar Official Page
  2. Click on the ‘Get Code’ button
  3. Click on ‘Create a new app’ link
  4. Key in your Blog Title in ‘App Name’ and your Blog’s URL in ‘App URL’, then click ‘Continue
  5. Enter the appropriate Captcha code then click ‘Submit
  6. Click on the ‘Get Code’ button once again
  7. Copy the JavaScript SDK code inside the box under “This script uses the app ID of your app:
  8. Then have it ‘encoded’ using Harish’s tool
  9. Login to you Blogger dashboard then go over to the ‘Template’ section of your blog
  10. Click on ‘Edit HTML’ then ‘Proceed
  11. Put a check inside the ‘Expand Template Widgets’ box
  12. Look for the <body> tag using ‘Ctrl+F’ then COPY the code which you ‘Encoded’ from the encode/decode tool and PASTE it after the <body> tag.

Feel free to customize the Facebook Recommendations Bar settings as you like.

13. Using ‘Ctrl+F’ again, search for <data:post.body/> tag and paste the following code below AFTER it:

<b:if cond='data:blog.pageType == &quot;item&quot;'><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

14. Save your template and that’s practically it! Enjoy your blog’s new plugin.

For further assistance with the installation, you can get in touch with Harish by clicking here.

Liked It ? Please Share

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here