Hi Friends ..........! My name is Sayyad Miskeen .Today i waana Show You how to  add " Official Facebook Recommendations Bar In  Blogger Blog " You know Facebook introduced a brand new plugin called Facebook recommendations bar plugin and this plugin takes place like a slider on your blogger blog. It is still in beta version but its really an inspiring plugin. This plugin shows recommended posts of your blog inside it with a like button included and let us give a try to this awesome plugin. This plugin really looks very official and sleeky. You can view a live demo of this plugin at the right corner of this blog post after expanding the read more hack.

Add Facebook Recommendations Bar widget in Blogger
  • Adding Open Graph Tags


  • Step # 1
Firstly you need to add Facebook open graph tags for this widget to work or else this widget will show bug.
(I found a very simpler and reliable open graph tags on Git Hub gist and i really thank Pathawks for this. .)
  1. Go to blogger dashboard –> Template –> Edit HTML(Tick the Expand Widget Template Option). 
  2. Find(CTRL+F) for <head> and add the following open graph tags just below it

<!– 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 –>
This widget may show errors without open graph tags.

Creating Facebook App
  • Step # 2
If you have already created your Facebook app then move on with step 4. If not, Go To Facebook Apps Page.
  1. Choose Create An App button. 
  2. Enter your blog title in app name field and click on Continue. 
  3. It will ask for word verification. Enter the text displayed and click on submit button


Official Facebook Recommendations Bar for Blogger Blog
  • Step # 3
  1. You will be taken to your app page. 
  2. Note down your App ID. 
  3. Enter your blog Url in App Domains field and also in Website with Facebook Login field. 
  4. Click on Save changes button. 


Official Facebook Recommendations Bar for Blogger Blog
  • Now your App is completely Set.

Official Recommendations Bar widget code
  • Step # 4
You need advanced JavaScript SDK for this. Copy the following Javascript SDK code and paste it just below the <body> tag in your template.
<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=YOUR_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=’2′read_time=’25’ side=’right’ site=’http://www. sayyadgraphic1.blogspot.com ‘ trigger=’40%’/></div></b:if>

  • Step # 5
Replace YOUR_APP_ID with your newly created App ID.
  • Step # 6
Replace http://www.sayyadgraphic1.blogspot.com with your blog Url. 
  • Customizations
  • data-read-time=“25” –> Number of seconds the plugin will wait before it expands. 
  • data-action=“Like” –> type of action (Like or Recommend). 
  • data-num-recommendations=“2” –> Number of recommendations to be displayed. 
  • data-side=“right” –> The position of plugin. 

  • Step # 7
Finally Save your Template.
  • Step # 8
View Your blog and you can notice the official recommendations bar plugin on your blogger blog posts without any bugs or errors.



Reactions:

Post a Comment

Thank you for getting in touch!
We appreciate you contacting us about [Contact Reason]. We try to respond as soon as possible, so one of our Customer Service colleagues will get back to you within a few hours.
Have a great day ahead!

 
Top
Sayyad Graphics /*adblocker Script*/