image



Facebook has already introduced a brand new social plugin called the ‘Facebook Recommendations Bar’. It’s a plugin that basically allows users to receive recommended content or material that they ‘Like’ and share them with their Facebook friends.
This is a great and helpful way to drive traffic from Facebook. Good thing is, Harish Dasari has already created a nice tutorial on how you can install in your Blogger site.
For this plugin to work, you must first have Facebook’s Open Graphs meta tags. Pathawks’ meta, according to Harish, is the simplest one out there, so that’s what we’ll be using here.
Just copy/paste the code below right after the <head> tag of of your template:
<!-- 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 -->
Once you have that, follow the instructions below:
  1. Go to Facebook Recommendations Bar Official Page
  2. Click on the ‘Get Code’ button
  3. Click on ‘Create a new app’ link
  4. Key in your Blog Title in ‘App Name’ and your Blog’s URL in ‘App URL’, then click ‘Continue
  5. Enter the appropriate Captcha code then click ‘Submit
  6. Click on the ‘Get Code’ button once again
  7. Copy the JavaScript SDK code inside the box under “This script uses the app ID of your app:
  8. Then have it ‘encoded’ using Harish’s tool
  9. Login to you Blogger dashboard then go over to the ‘Template’ section of your blog
  10. Click on ‘Edit HTML’ then ‘Proceed
  11. Put a check inside the ‘Expand Template Widgets’ box
  12. Look for the <body> tag using ‘Ctrl+F’ then COPY the code which you ‘Encoded’ from the encode/decode tool and PASTE it after the <body> tag.
Feel free to customize the Facebook Recommendations Bar settings as you like.
13. Using ‘Ctrl+F’ again, search for <data:post.body/> tag and paste the following code below AFTER it:
<b:if cond='data:blog.pageType == &quot;item&quot;'><div class="fb-recommendations-bar" data-trigger="onvisible" expr:data-href="data:post.url" data-read-time="30" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2"></div></b:if
14. Save your template and that’s practically it! Enjoy your blog’s new plugin.
For further assistance with the installation, you can get in touch with Harish by clicking here.

0 comments:

Post a Comment

 
Top