How To Add Facebook Meta Data Or Tags In Blogger Blog :
- First go to blogger.com and login using your google account.
- After login go to blogger Dashboard>>Templates>>Edit html.
- Now search for the following html code in your blog template.
xmlns:expr='http://www.google.com/2005/gml/expr'
- Then just after above code insert xmlns:og='http://ogp.me/ns#' [ Don't forget to give space between both codes ]. Once everything is done, final code will look like below code.
xmlns:expr='http://www.google.com/2005/gml/expr'xmlns:og='http://ogp.me/ns#'>
- After that again search for <head> tag in you blogger template and just below it paste the following meta code.
<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'/>
- Once everything done, click on the save template button.Congratulation, you have successfully added facebook meta tags or data in your blogger blog.Now facebook can show correct images of blog posts on recommendations bar and also on facebook.com.Now you can easily install facebook recommendation plugin in your blogger blog.
How To Add Facebook Recommendations Bar Plugin Or Widget On Your Blogger Blog :
- Once again go to blogger Dashboard>>Templates>>Edit html and search for<body> tag in your blogger template.And paste the following code just below<body> tag.
<div id="fb-root"></div>
<script>(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_GB/sdk.js#xfbml=1&appId=Your Facebook APP ID&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
- Replace Your Facebook APP ID with your facebook app id number.If you don't have facebook app id,.
- Now search for <data:post.body/> tag in your blogger template and paste the following code just after the <data:post.body/> tag.
<div class="fb-recommendations-bar" data-site="mytricksyard.com" data-read-time="30" data-side="right" data-action="like" num_recommendations="3"></div>Note : If you can't find <data:post.body/> in your blog or plugin is not working in your blog after puting this code below <data:post.body/> than please go to blogger Dashboard>>Layout>>Add a Gadget>>HTML/JavaScript paste the above code there in blank field and save it.
Customization :
- Replace mytricksyard.com with your blog domain name.
- Replace 30 in above code with number of seconds before the plugin shows recommended posts [ Minimum 10 seconds ].
- Replace right with left if you want to this plugin in left side of your blog page.
- Replace 3 with the number of recommendations you want to display [ Maximum 5 ].
Emoticon Emoticon