Related Posts Plugin for WordPress, Blogger...

How To Add Facebook Recommendations Bar To Blogger

Facebook Recommendations bar


















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.
  1. Log into Facebook Apps
  2. Click on Create New App button towards Top-rightcreate new app
  3. In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.
app name
     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.
Site URL
         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.
App ID
  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML > Proceed
  4. 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:
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 sure to paste the code below the entire body tag.
<div id='fb-root'/>
<script>
//Facebook Recommendation bar by http://bloggingtiptricks.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 == &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='10' side='right' site='http://www.mybloggertricks.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.mybloggertricks.com with your blog link
     6.   Save your template and you are all done!

More Widgets
Powered by Blogger.