Related posts widgets and plugins are useful for increasing page views and reducing bounce rates on your blog.There are various related posts widgets available for free - however among them, Facebook's Recommendations Bar is one of the best only because of the fact that it is a free plugin from and integrated with the largest social networking site Facebook.Facebook Recommendations Bar for WordPress blogs are pretty easy to install and customize but for blogger ( blogspot ) blogs, you need to handle some codes to have this plugin working on your blog.In this post, I will help you with getting Facebook Recommendations Bar work on your blogspot blog.
check out : Free Blogger templates and other tricks
Please note that unlike related posts plugin, Facebook Recommendations Bar shows posts taking accout of individual likes on posts.
Give an App Name, let us call it Related Posts Plugin though this plugin actually recommends posts based on number of likes of your blog posts.
You may skip App Namespace and Web Hosting field since it is not important for the Recommendations Bar plugin.Click Continue button to create the App.
On the next step, you will see the following window.Take note of App ID and enter your site URL and Save Changes.
Now, go to Template section on Blogger dashboard and click Edit HTML.
Add the following code before head section
<html xmlns:fb="http://ogp.me/ns/fb#">
Now paste the following code at the bottom just before </body> tag
<div id="fb-root"></div>
<script>(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_IN/all.js#xfbml=1&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Place the following code anywhere inside </body> tag, recommended place is after the end of article section.
<fb:recommendations-bar read_time="10"></fb:recommendations-bar>
Replace App_ID with the value from above step and https://www.scratchtheweb.com with your domain name.
You can also change various properties of Recommendations Bar by adding the following parameters on <fb:recommendations-bar> tag
check out : Free Blogger templates and other tricks
Please note that unlike related posts plugin, Facebook Recommendations Bar shows posts taking accout of individual likes on posts.
Installing Facebook Recommendations Bar In Blogger Blogs
First, go to Facebook Developer website and click on Create New App button on the top right corner. You will see the following window. |
| Let's call it Related Posts Plugin, eh? |
You may skip App Namespace and Web Hosting field since it is not important for the Recommendations Bar plugin.Click Continue button to create the App.
On the next step, you will see the following window.Take note of App ID and enter your site URL and Save Changes.
 |
| Note the App ID and provide your site URL |
Add the following code before head section
<html xmlns:fb="http://ogp.me/ns/fb#">
Now paste the following code at the bottom just before </body> tag
<div id="fb-root"></div>
<script>(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_IN/all.js#xfbml=1&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Place the following code anywhere inside </body> tag, recommended place is after the end of article section.
<fb:recommendations-bar read_time="10"></fb:recommendations-bar>
Replace App_ID with the value from above step and https://www.scratchtheweb.com with your domain name.
You can also change various properties of Recommendations Bar by adding the following parameters on <fb:recommendations-bar> tag
Optional Parameters:
- href - It is the URL of the page.Default value is current page.
- trigger - Determines when the recommendations bar plugin expands. Default is when a user scrolls past the <fb:recommendations-bar/> tag. There are three options: onvisible - read is published when a user scrolls past the exact point where the XFBML tag is placed on the page.X% - where X is any positive integer less than or equal to 100. Indicates % of page scrolled past before read is triggered.
- read_time - The number of seconds before the plugin will expand. Default is 30 seconds. Minimum is 10 seconds.
- action - The verb to display on the button. Options: 'like', 'recommend'
- side - the side of the screen where the plugin will be displayed. This will automatically adjust based on the language, or can be set explicitly. Options: 'left', 'right'
- site - a comma separated list of domains to show recommendations for. The default is the domain of the href parameter.
- num_recommendations - the number of recommendations to display. By default, this value is 2 and the maximum value is 5.
- max_age - a limit on recommendation and creation time of articles that are surfaced in the plugins, the default is 0. Otherwise the valid values are 1-180, which specifies the number of days.
