Add Facebook Like Button To Blogger Comments




| 18 comments

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 and Live demo.

Screenshot :

facebook like in blogger comments

Live Demo - Click To See The Live Demo : Facebook Like In Comments

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 - More Info)

<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://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/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://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/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.

You can also add a nice image in that section instead of the post a comment test - Replace post a comment with an image.Make sure to check out more of our Social Media Tips and Blog Design Posts.

Drop Your Comments, Views And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

18 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. What a great idea i would never have thought to put the like button in the comments great post.

    ReplyDelete
  3. Paul, your the best man ;)
    check my blog if i have put the things right www.theinfow.com

    ReplyDelete
  4. Yes it worked perfectly, thank you!

    ReplyDelete
  5. I do not believe this worked for my blog... :(

    ReplyDelete
  6. @ FatBoi - If it didn't work then you didn't do it right :) Give it another go I'm sure you can do it !

    ReplyDelete
  7. This is so cool. Thanks for the very easy to follow directions!

    ReplyDelete
  8. Thank you!!! Arigatou Gozaimasu!

    Over the last 24hrs i have used 7 gadgets on this ridiculously awesome site and this is one. They have all worked.

    I'm looking forward to being a spiceupyourblog follower.

    Please keep up the good work!

    ReplyDelete
  9. Thanks for taking the time to discuss this, I feel strongly about it and really like learning more on this matter. If possible, as you gain expertise, would you mind updating your blog with more details? It is extremely helpful for me.
    Tombstone

    ReplyDelete
  10. Awesome , Have Added in my blog :)

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us