Thursday, December 13, 2012

Facebook Recommendations Bar

Facebook Recommendations Bar for Blogger - is a new social plug in that helps your readers to find articles based on what there friends like and share from your blog - this is really Awesome Widget.



 

You can see demo of this widget Live on eBlogger Tips



How this Works:-

As you read article on your blog or website, a small pop-up comes at the bottom of the screen highlighting recommended articles and these recommendations are based on content that your friends have explicitly liked and shared in your blog.

This is really awesome widget for your Blogger Blog by eBlogger Tips.

And blogger websites are seeing 3x times click through on the stories through this Recommendations Box by eBlogger Tips.


Follow these Steps to Install Facebook Recommendations Bar :-



Step 1 :- First Take Backup of your Template


  1. Go to Blogger > Template
  2. Backup your template



Step 2 :- Facebook Recommendations Bar works with Facebook Open Graph meta tags-  In order to work this you need to add following code after <HEAD> tag in your blog




<!-- Begin Open Graph metadata by www.ebloggertips.com-->
<b:if cond='data:blog.pageType == "item"'>
 <meta content='article' property='og:type'/>
 <meta expr:content='data:blog.title' property='og:site_name'/>
 <meta expr:content='data:blog.pageName' property='og:title'/>
 <b:if cond='data:blog.postImageThumbnailUrl'>
 <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
 </b:if>
<b:else/>
 <meta expr:content='data:blog.title' property='og:title'/>
 <meta content='website' property='og:type'/>
</b:if>

<meta expr:content='"en_US"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- End Open Graph metadata by www.ebloggertips.com-->



Step 3 :- Add this XML namespace in your template as this will enhance the plugin performance and compatibility for older browsers

  1. Go to Blogger > Template
  2. Click Edit HTML > Proceed
  3. Search For " <html "

And add/replace following code (See below screenshot)


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






Step 4 :- Create Facebook Application


1. Go to Facebook Apps Official Page

2. Click on Create New App button >> On Top-right of Page


3. In the Next Box- Enter the App Name with your Blog Title, as below and Click Continue button >> Enter captcha code correctly and Click Continue button




4. Next Click on Website with Facebook Login tab and inside the box enter your Blog URL and Note your APP ID
>> See below screenshot and Click on Save Changes <<




Step 5 :- Final Step to make this Widget Work on Your Awesome Blog



Search for <body> tag and just below this paste the following code :-


<div id='fb-root'/>
<script>
//<![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=ENTER-YOUR-APP-ID-HERE";
  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; margin-right:20px;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' 
read_time='20' side='right' site='http://www.ebloggertips.com' trigger='30%'/></div> </b:if></b:if>






Make following changes and your are Done !

  1. Replace ENTER-YOUR-APP-ID-HERE with your APP ID  
  2. And replace http://www.ebloggertips.com with your blog link

>> Save your template and that's IT :) For any Questions ! Just drop a comment Below <<

Do You Like this Post and wish to Stay Updated then make sure you - Subscribe to Our Free Email Updates!!




 
Copyright © 2012-2013 ESG-Network - All Rights Reserved ∙ WebmastersTerms & PrivacySite MapAdvertise With Us
Posts RSSComments RSSBack to top ↑
Powered by Blogger