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 == "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 -->
Once you have that, follow the instructions below:- Go to Facebook Recommendations Bar Official Page
- Click on the ‘Get Code’ button
- Click on ‘Create a new app’ link
- Key in your Blog Title in ‘App Name’ and your Blog’s URL in ‘App URL’, then click ‘Continue’
- Enter the appropriate Captcha code then click ‘Submit’
- Click on the ‘Get Code’ button once again
- Copy the JavaScript SDK code inside the box under “This script uses the app ID of your app:”
- Then have it ‘encoded’ using Harish’s tool
- Login to you Blogger dashboard then go over to the ‘Template’ section of your blog
- Click on ‘Edit HTML’ then ‘Proceed’
- Put a check inside the ‘Expand Template Widgets’ box
- 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.
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 == "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
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