19 October 2012

Facebook Recommendations Bar Widget for Blogger

Advertisements

Facebook recently introduced the Recommended Bar app for websites. It will add two options at the right bottom of your website. This helps to show additional recommended articles or post to visitors. The posts that are previously shared or liked on Facebook will be displayed with thumbnails. Overall this will increase your page views.


Let's Facebook Recommendations Bar Widget

Step 1 - Facebook Open Graphs meta tags

Gist.github.com provides the script to add Facebook Open Graphs meta tags.

Go to Edit HTML page
and add following code AFTER <head>

<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- End Open Graph metadata -->

Step 2 - Getting App ID

1. Go to Facebook Application Page and click on Create a New App, a box will pop up.

2 . In the App Name box type "My Recommendation Bar" and click Continue. Enter captcha if appeares.

3. You will be redirected to Basic settings. Enter the details.  And click on Save Changes.


Step 3 - Adding the bar

Go to Edit HTML and look for <body> and BELOW it add 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=APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3'
read_time='15' side='right' site='Your_Blog_Url' trigger='40%'/>
</div>
</b:if>
Replace App_ID with your Facebook APP ID code. Add your website URL to Your_Blog_Url. And save your template.

Customization
num_recommendations='3'
Change value here to increase the no. of posts to be shown.

recommendations-bar action='like'
You can use the text like/recomand

read_time='15'
It is the time required to appeare

max_age='0'
If you want all posts new and old to appear in Recommendations bar keep it 0. You can specify how many days (upto 1-180) old post to appear.

side='right'
Here you can specify on which side your bar will appear.

Related Posts

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More