June 20, 2016

Official Facebook Recommendations Bar for Blogger Blog

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.

No comments:
Write comments

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!

About Owner

Sayyad Miskeen is a web developer, SEO Consultant , Graphics Expert and Online Mentor who has been working since 2013 and is managing several successful websites on the internet for last 5 years. Sayyad Miskeen can help you in Web development, Make Money, SEO , Graphics and Online Marketing related issues, if you want to know more about him then click here

About My Father

My father name is Muhammad Miskeen. He is born on 1957.He is a senior Teacher at BISE Rawalpindi.he is Joined his Duty as a art & Drawing Teacher in G.H.S.S Ausia Rawalpindi (12-08-1976) 
carer O'level in G.H.S.S
Intermediate And Graduation in Art & Drawing + Statistics + Economics {1974 - A.I.O.U}

Featured post

Use Telenor Free Internet Trick 2016

How to Use Telenor Free Internet Trick 2016 Telenor Free 2G/3G Internet Trick j Hi ! Everyone ....! My name is Sayyad Miskeen ...

Alexa Rank

© 2014-17 Sayyad Graphics. Designed by Sayyad Miskeen & Distributed by Sayyadgraphics.com