Content Free: Official Facebook Recommendations Bar Widget for Blogger Blogspot

Sunday, January 8, 2017

Official Facebook Recommendations Bar Widget for Blogger Blogspot

Facebook Introduced their brand new social social plugin called Facebook Recommendations Bar. It is Beta Plugins.
In this tutorial, we go to learn how to install Facebook Recommendations Bar in Blogger Blogs. This widget is more helpful to drive traffic from Facebook with and instant likes and related posts.

Preview

Official Facebook Recommendations Bar Widget Preview
OR
You can take a look at Right Bottom of this Page and see it’s action in Live!
How to Install the Official Facebook Recommendations Bar Widget?

In order to work the Facebook Recommendations Bar every blog should must have the Facebook Open Graphs meta tags.
I found the simplest and Working Facebook Open Graphs tags on GitHub gist. Thanks to pathawks.!

Add the Following code after <head> tag.


<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/>


    First Go to Facebook Recommendations Bar Official Page.
    Directly click the Get Code Button.
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step one
    Click on Create a new app Link
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step two
    Enter the App Name with your Blog Title and App URL with your Blog URL, like as below and Click Continue button.
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step three
    Enter Captcha Code Correctly and Click Submit button
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step four
    Then Click the Get Code Button once again.
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step five
    Copy the First JavaScript SDK code (First Box Code) and Encode the Code using This Tool
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step six
    Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
    Select the Template > Click on Edit HTML > Proceed
    Check/Tick the Expand Template Widgets checkbox
    Search for <body> tag and place the Copied code After <body> tag.
    Facebook Recommendations Bar Customizations:
    You can customize the Facebook Recommendations Bar settings

    Settings

    Position:

    Action

    Trigger

    Read Time

    Number of Recomednations

    Search for <data:post.body/> tag and place the following code after the <data:post.body/> tag

    <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>

    Save the Template, Enjoy :)

Please dorp your comments and share this post.

Go to link download