How to Add a Facebook Recommendation Bar to Blogger:Digital Tech Inspiration

Facebook has lot of other plugins to offer for bloggers and website owners. Recently Facebook released a new plugin named Recommendations Bar which basically increases the page views of your blog by showing recommended posts to

your readers. This plugin will give recommendations of only the posts that were previously liked or shared on Facebook by anyone.

The number of likes is displayed below the recommended post title with a small thumbnail. It also won't annoy your readers because it can be expanded and collapsed and it also has a Like button which can increase the likes of your articles.

Facebook Recommendations Bar plugin have the potential to increase the page views and impressions which leads to increase in traffic.

Watch the demo in action right on this blog at the bottom right corner and don't forget to hit the like button :)

How to Install on Blogger?

Step 1: Create a Facebook Application

For this plugin to work you will need to create a Facebook App in seconds. The below method is the standard and correct method for creating any FB App you like.

Log into Facebook Apps
Click on Create New App button towards Top-right
In the box that pops up, type your application name inside the App Name field and leave other options as default. Click Continue.

4. Enter the captcha security code. Click Submit

5. You are app is almost complete. Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes.

6. You will see two strings of alpha-numerical characters. One is App ID and the other is App secret. Just copy the App ID code and keep it save in a notepad. We will need it later.

Congrats App finally created! Let’s proceed to step 2.

Step 2: Add "Recommendations Bar" To Your Blog

Follow these steps to add the bar to Blogger:

Go to Blogger > Template

Backup your template

Click Edit HTML > Proceed

Search For this :

<html

Replace it with this code:

<html xmlns:fb='http://ogp.me/ns/fb#'

This will make the plugin compatible in older versions of internet explorer also. Since blogger templates are coded in XML therefore inserting this XML namespace will enhance the plugin performance and compatibility.

5. Next search for <body> and just below this tag paste the following code:

<div id='fb-root'/>
<script>
//Facebook Recommendation bar by www.mybloggertricks.com
//<![CDATA[

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=***************";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0'num_recommendations='3' read_time='10' side='right'site='http://wikitechnol.blogspot.com' trigger='40%'/></div>
</b:if></b:if>

You are almost done. Make these changes:

ü Replace *************** with your 15 digit App Id that you saved in step 1.

ü Replace http://wikitechnol.blogspot.com with your blog link

6. Save your template and you are all done!

Visit your blog and scroll down about 40% of your page and wait for 10

second for the plugin to expand.

Enjoy…!!

Troubleshooting :

If your template don't support this widget or after some time an error message appear within the recommendation bar then add the following code just below the <head> tag inside your template.