Add Facebook Recommendations Bar widget in Blogger
- Adding Open Graph Tags
- Step # 1
(I found a very simpler and reliable open graph tags on Git Hub gist and i really thank Pathawks for this. .)
- Go to blogger dashboard –> Template –> Edit HTML(Tick the Expand Widget Template Option).
- 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 == "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 –>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.
- Choose Create An App button.
- Enter your blog title in app name field and click on Continue.
- It will ask for word verification. Enter the text displayed and click on submit button.
- Step # 3
- You will be taken to your app page.
- Note down your App ID.
- Enter your blog Url in App Domains field and also in Website with Facebook Login field.
- Click on Save changes button.
- 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 == "item"’><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>
source: Facebook developers
- 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 commentsThank 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!