Add Facebook Recommendation Bar To Blogger Blog

The recommendations bar lets people like content, get recommendations and share what they’re reading with their friends. Facebook is probably the largest social networking website in the world. This is the reason why most of the corporate companies utilize Facebook for marketing their material and making it go viral on Social media. Facebook provides various ways of making your content go viral through Facebook like box, Facebook comments, Facebook like button. The recommendation bar is not something new, in fact you see it on many websites, including on myblogger-tricks.com. It’s that box that appears to the right side of your blog or website with links to articles on your site, offered as ‘recommended for reading’ to your visitors. This is a good approach to adopt if you want to increase your pageviews, but bear in mind that not all visitors would like to be interrupted with such a floating box.

Step 1. Create Facebook Application

Before you can use the Facebook plugin for blogger, go to the Facebook App page and click on the button Create New App.
1. Go to facebook Developer Page.
2. and create app like setting below.

3. Enter the captcha security code. Click Continue.
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.

Now you will land of a new page which would provide you your application details like App ID, App Secret and etc. You need to copy “app ID” and enter them later. ( See Screenshot above )

Step 2. Add It To Blogger

1. Go to you blogger Dashboard>>Template>>edit html
2. Search for this code.

<html

3. Replace with below code.

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

This will make the recommendation bar compatible in older versions of browsers also.

4. Paste the Following below code before closing < body /> tag.

<div id='fb-root'/>
<script>
//Facebook Recommendation bar
//<![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='5' side='right' site='http://www.myblogger-tricks.com' trigger='30%'/></div>
</b:if></b:if>

You are almost done. Make these changes:

Just replace *************** with your 15 digit App Id that you saved in step1.
and replace http://www.myblogger-tricks.com with your blog home page link.
and save it.. you are done!!!...

More Editing In Code Above

The plugin is expanded once the trigger parameter requirements are met, and the person has been on the page for at least the duration specified in the read_time parameter. There are three values for the trigger parameter:

onvisible. The plugin is expanded when people scroll past the exact point where the<fb:recommendations-bar /> tag is placed on the page. This is the simplest option and will work best if you place the tag right at the end of your article's main content. This is the default.
X%, where X is any positive integer less than or equal to 100. This specifies the percent of the page that must be scrolled before the plugin is expanded. For example: 100% would indicate that people need to scroll all the way to the end of the page before the plugin expands. 50% indicates that people need to scroll to the middle point of the page.
manual. Use this option to manually trigger the plugin. When you want to trigger the plugin, callFB.XFBML.RecommendationsBar.markRead(href); in JavaScript. The href parameter is optional and will default to the current page if not set. If provided, it must match the href parameter on the XFBML tag. The manual trigger is useful when you have more a multipage article. For example on a three-page article, you would addtrigger="manual" on pages one and two and never call the markRead JavaScript function on those pages.

The read_time parameter tells the plugin to wait a certain amount of time before it expands. It takes an integer representing the number of seconds. By default this will be set to 30 seconds. The minimum is 10 seconds. Note that in order for the plugin to expand, thetrigger condition must be true, and the read_time must be met.

The Above Documentation Provided by Facebook Developer Team..
Save your template and see the plugin work correctly. If any thing went wrong just your post query below in comments. I will reply back as soon as time allow. I hope the installation was very simple adn easy. Happy Blogging..!!

Spread The Love, Share Our Article

Friday, September 6, 2013