Tuesday

How To Add Facebook Like Button To Blogger Posts

Today in this tutorial i will teach you how can go about about adding a facebook like button beneath your blog posts. By using this botton, you as a blogger will be able to know how interesting, effective, understanding or great your post is to your readers when the articlesare liked. I will be giving out different styles of like bottons it now depends on the one you want to add to your blog.There are only two steps to get this done ,so let’s start with the fisrt step.

 First step : You will install a javascript into your blogger template so that the facebook social plugin will work.

HOW TO:
  • Click on Edit HTML, when it opens search for <body> tag by using CTRL+F.
  • Paste the code below immediately below <body>.

<div id="fb-root">
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1065595340222456',
      xfbml      : true,
      version    : 'v2.7'
    });
  };

  (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_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

NOTE: If you have such code below the <body> tag before, you don’t need to add it again..so ignore this first step and go to the second step.


Second step : Here we are going to add the like botton so as to display underneath your blog posts.

As i told you earlier before now  that i will give out different styles of like bottons ,i have four different types with me you can choose anyone at your wish.


LIKE BOTTONS WITH DIFFERENT STYLES:

(1) BOX COUNT:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:65px;'/> </b:if> 

(2) BUTTON COUNT:
 http://www.safetricks.com/wp-content/uploads/2013/07/facebook-like-button-count.png
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

(3) STANDARD:
http://www.safetricks.com/wp-content/uploads/2013/07/facebook-like-button-standard.png
 <b:if cond='data:blog.pageType == &quot;item&quot;'
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>

(4) BUTTON:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>
Third step :
  •      Again click on Edit HTML in your blogger template, after opening, search for <data:post.body/> using CTRL+ F.
  •      If you find more than one <data:post.body/> choose the one that appear second.
  •      Copy any one of the 4 codes styles your want and paste it immediately below <data:post.body/>
NOTE : If after adding the code to the second <data:post.body/>  it does not show then try adding it below the third <data:post.body/>
I hope i have helped you in knowing how to add facebook like botton to blogger posts with ease. It’s  now you turn to do us good by sharing this post and also drop your comments.

Share This

1 comment:

  1. hi, how did you add the custom read more button to your blog?

    ReplyDelete