Facebook Recommendations Widget for Blogger (Official Bar) (Blog trick)

acebook recently has introduced a new social plugin called Facebook Recommendation Bar. FRB is useful plugin which helps you to drive traffic from Facebook. With Facebook Recommendation Bar, Your blog viewers can LIKE you posts and can see related posts as well.

How to Install Facebook Recommendations Widget in Blogger

You first need to add Facebook open Graphs meta tags. Here is the simple way to add Facebook open graphs in your blogger template.

  1. Got your Blogger template and find this code
  2. <head>
  3. Add new code just AFTER searched code.
  4. <!-- 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'/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
    <meta expr:content='&quot;en_US&quot;' property='og:locale'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <!-- End Open Graph metadata -->
  5. Save Your Template
  6. Now go to  Facebook Recommendations Bar Official Page
  7. No need to enter anything, directly click the Get Code Button
  8. Click on Create a new app Link
  9. Enter the App Name with your Blog Title and App URL with your Blog URL and click on Continue.
  10. Enter Captcha Code and Click Submit button
  11. Enter your blog URL in URL of the article box and your domain name in Domain box, Click the Get Code Button once again
  12. Copy the code that appears in First Box and Encode the Code using HTML parser.
  13. Now, go back to Blogger > Template > HTML > Proceed and select Expand widget templates
  14. Search <body> and past the encoded code AFTER <body> tag
  15. Now search for;
  16. <data:post.body/>
  17. Paste below given code after the code you searched.
  18. <b:if cond='data:blog.pageType == "item"'> <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>
  19. Save your template
Share this article :

Post a Comment


Copyright © 2011. Tricks Duniya - All Rights Reserved