Menu Close Menu

Add Facebook Recommendation bar to blogger blog

fb-recommend-bar-for-blogger 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.
Create Apps for Recommendation bar
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.

add your website home page link
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 == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><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 add trigger="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, the trigger 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..!!

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.