Add Facebook Recommendations Bar To Blogger

Here I am going to tell you about one of the best facebook widget which is "Recommendation Bar".
In order to engage readers more and allow your visitors spend more time on your website Facebook has one of the best feature which is the "Recommendations Bar" in beta version. It's designed to display additional recommended articles right after readers have finished reading an article or spent some time on your blog. It will collapse on page load and expand once a reader has reached a specific location on your blog or finished reading the post. 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 and previously contained an Add to Timeline button that has been removed now. Unlike Facebook Recommendations crate which offered related stories but with lack of user friendly interface and engagement, Facebook bar will force readers to stay longer on your site leading to increased pageviews, page impressions and thus traffic. It's a smart alternative to Recommended Post Slides widgets.

Can it increase your traffic?

Oh certain yes without any doubts! We often share widgets but we don't implement all plugin upon our blog unless it provides some value to traffic or revenue. As you can see we have added the recommendations bar upon all our posts and this will surely put a sure effect upon pageviews because now visitors can see what their friends previously liked upon your blog and due to a human curiosity they would surely check these extra posts along the way that appears under the Label "You Might Also Like". Google Plus button shows friends recommendations in search results and Facebook Bar will display the likes upon your blog. Thus consumer of every such plugins is always in benefit.

Install it upon Blogger

It can be installed easily upon both Blogspot blogs and Wordpress but with a tiny patience. We have kept the installation extremely easy and ignored unnecessary steps like installation of Open Graph Meta Tags. We would install valuable codes to save the structure tidy and make the widget work just good. The code we are sharing is optimized and will display your blog titles and featured images correctly and with a lot of control attributes.

Follow these simple steps:

Step1: Create a Facebook Application

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

Log into Facebook Apps
Click upon Create New App button towards Top-rightcreate new app
In the box that pops up, type "My Recommendation Bar" inside the App name field and depart other options as default. Click continue.

Enter the captcha security code. Click Submit
You are app is almost complete. Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot under. Do not touch remaining options and click Save Changes.

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

Step2: 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.

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

Note: If you are using the new blogger templates like Simple, Awesome Inc., Travel, Watermark or Picture window then please search for <body instead. Make definite to glue the code below the entire body tag.

<div id='fb-root'/>
<script>
//Facebook Recommendation bar by www.everythingadda.blogspot.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:perfect;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.everythingadda.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 step1.
Replace http://www.everythingadda.com with your blog link

Save your template and you are all done

Visit your blog and scroll down about 50% of your page and wait for 10 seconds for the plugin to expand. Enjoy the new way of free page views, cheers :)

Friday, 4 October 2013