BannerFans.com

Add Facebook Like Button To Blogger Comments

7:36 AM |

One of the features i have seen added to comments on Wordpress blogs recently is the Facebook like button.This is a quiet clever addition to the comments as the like button only takes a second to click and if a reader is leaving a comment they obviously do like or have an opinion on the post making them more likely to share your post with their facebook friends.So in this post i will show you how to add a Facebook like icon to the Comments on your Blogger Blog.Adding the Like Button to let readers Share On Facebook is easy and it actually fits perfectly above the comment form.So lets look at the Screenshot.

Screenshot :
OK lets add this cool feature to your blog.


Add Facebook Like Button To Blogger Comments

Step 1. In your Blogger Dashboard click > Design > Edit Html > Expand Widget Templates :



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

<data:postCommentMsg/>

Important - This code will be in your template more than once, you need to find the code wrapped in heading tags (Example - h2, h3, h4).So it will look similar to this :

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Step 3. Copy And Paste The Code Below Directly After <data:postCommentMsg/>

<a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAH6CBD-AUjFNI-vLZwNgx-R5oKymOEbxMpRKUDY_tGPIrjCQB_Y-NuBAIq44oWLLOhs0GqbQlrMI1QBj64vvS8fxl5Uj85_hYSYszmiDx3fKku6yvgZNrOTluqeT5VAq6YH7BjhwbZ6sV/s1600/best+blogger+tips.png'/></a><br/><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=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

It will now look like this :

<h4 id='comment-post-message'><data:postCommentMsg/></h4><br/><a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAH6CBD-AUjFNI-vLZwNgx-R5oKymOEbxMpRKUDY_tGPIrjCQB_Y-NuBAIq44oWLLOhs0GqbQlrMI1QBj64vvS8fxl5Uj85_hYSYszmiDx3fKku6yvgZNrOTluqeT5VAq6YH7BjhwbZ6sV/s1600/best+blogger+tips.png'/></a><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=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

Step 4. OK with the code in place you can save your Blogger Template and check out your comments with Facebook Like Icon Button.
IconIconIconIconFollow Me on PinterestYouTube
 
Gadgets By For Bloggers