Facebook LIKE and SHARE Button for Blogger

Facebook "Like" and "Share" buttons are great to use in your blog to let your friends/visitors show their reaction. They can like, comment and share your post using their Facebook account. There are several design for Like and Share button. However, I personally liked the following button  and I have installed into my blog couple of months ago. If you are interested in similar one, follow the following procedure:

A. Facebook Like Button

Like

D.b. Rana, Ujir Rai Tilung Mukchhimchha and 26 others like this.

Step 1. Dashboard >Template >Edit HTML and check "Expand Widget Templates"

1. Go to your blogger dashboard.
2. Select "Template" from the design menu.
3. Choose "Edit HTML" and click "Proceed".
4. Check "Expand Widget Templates".

Step  2. Press Ctrl-F and find following line of code inside the template box:      

     <data:post.body/>

Step  3. Copy and Paste the following code just below the code. This step will show your button at the end of your blog post.

     <!-- Facebook Like button Start -->

     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

     <div style='float:left;padding:5px 5px 5px 0;'>

     <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:440px; height:35px;'/>

     </div>

     </b:if>

     <!-- Facebook Like button End -->

Step  4. Now "Save Template".

Note: It is always good idea to backup your template before you do any change in your current template. You can restore your previous template if anything goes wrong.

B. Facebook Share Button (Example: see at the bottom of this post)

Step  1.  Same as above

Step 2. Press Ctrl-F and find following line of code inside the template box:

    <data:post.body/>

Step  3. Copy and Paste the following code just below the code. This step will show Facebook share button at the right end of the blog post.

     <b:if cond='data:blog.pageType == &quot;item&quot;'>

     <div style='float:right;margin-left:10px;margin-bottom:10px;'>

     <a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

     </div>

     </b:if>

Step  4. Now "Save Template".

C.  Facebook Like and Share Button

Step  1.  Same as above

Step  2. Press Ctrl-F and find following line of code inside the template box:

    <data:post.body/>

Step  3. Copy and Paste the following code just below the code. This step will show your button at the end of your blog post.

     <!-- Facebook Like button Start -->

     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

     <div style='float:left;padding:5px 5px 5px 0;'>

     <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:440px; height:35px;'/>

     </div>

     </b:if>

     <!-- Facebook Like button End -->

     <b:if cond='data:blog.pageType == &quot;item&quot;'>

     <div style='float:right;margin-left:10px;margin-bottom:10px;'>

     <a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

     </div>

     </b:if>

Step  4. Now "Save Template".

If you have any question, write in the comment box. HAPPY BLOGGING!!!