Add The New Facebook Like This Share Icon To Your Blog Posts




| | 56 comments

Facebook Like Icon For BloggerFacebook have just made a simple Like Button available for bloggers and webmasters.The Like Button or Icon will be a great help in the effort to get readers sharing your posts on Facebook.Social networks and social bookmarking sites are constantly coming up with ways to make it easier for people to share the content they find online with their friends.From Twitter to Digg and Facebook to Stumble Upon there are lots of buttons and icons available on blogs, news sites and other websites allowing you to share their stuff with others.

While this is great for users to let their friends know what they find interesting as a blogger it's one of the best ways to get your blog content shared and attract new readers.We covered this subject in more dept a while back in a post titled What is social bookmarking /How does it work / How can it help my blog ?.Facebook have just released a new option for people to easily share your blog and in this post i will show you how to be one of the first to make this option available to your readers.

The new button just made available from Facebook make sharing blogs as easy as possible and this is great news for us bloggers.With the New Facebook Like Button Just one click is required in the very same way as you would click like on a friends picture or comment your own Facebook homepage.Unlike other sharing options you don't get a pop up or have to go to the website you just click like or recommend and your done...Nice Ehh ?

Update - We Recently Added A Post With A New Compact Facebook Like Icon You can use.

Update 2 - You can now add the New Facebook Send Button beside you Like Button - The New Facebook Send Button.

New Facebook Like Button Demo


Below is a working example of the Like Button, Try It Out !


How to add the facebook buttons to your Blog


First up i will give you the code for the button and then we will look at were you can add the buttons in your blog posts.

Facebook Like Button Code :

<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;'/>

Were To Place The Button


In this post we will look at three places you can add the button

*Below the post title
*At the top of the post
*Below the entire post

First go to your blogs html by following these three steps - In your dashboard click 'Layout' > 'Edit Html' > Tick the 'Expand Widget Templates' box.


Blogger layout

edit html blogger

Expand widget templates blogger


To add the button directly below the post titles Find the following code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code - More Info)

<div class='post-header-line-1'>

Now paste the facebook button code Directly Below / Under <div class='post-header-line-1'>

To add the button at the top of the posts Find the following code in your blogs Html
(Click Ctrl and F for a search bar to help find the code - More Info)

<data:post.body/>


Now paste the Facebook button code Directly Before / Above <data:post.body/>

To add the button directly below the posts Find the following code in your blogs Html :

(Click Ctrl and F for a search bar to help find the code - More Info)

<data:post.body/>


Now paste the Facebook code Directly Below / Under <data:post.body/>

Once you have the Facebook code pasted were you want the button to appear and your template saved go check out your new share option.


More From Facebook - Follow this link to check out our recent post bringing you 8 Great Facebook Icons and widgets for your blog !

Drop Your Comments And Questions Below.


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

Stay Connected With Free Updates

Subscribe via Email

56 comments:

  1. great post! I've put up the "like" button on my posts, can't wait to see how people respond!

    ReplyDelete
    Replies
    1. This blog is very interesting. But if you want to extract the herbal aroma and flavor molecules from the similar ingredients you may use volcano vaporizer . This device has a digital and analog temperature control and two valves options by which it fills the balloon.

      Delete
  2. Great information! I am not sure how many people will actually use this function on my blog, but thanks! Ive wanted to know how to do this for a while now!

    ReplyDelete
  3. Awesome! great information and very simple tutorial! I now have this up and running on my blog!! :)

    ReplyDelete
  4. Thanks, i used it and it looks great.

    ReplyDelete
  5. Thanks for the detailed description!! However when I like one of the posts then it only likes the blog title (ie. xy likes All The Supreme Things on allthesupremethings.blogspot.com). Does anyone know how to change that? I would be great if it would show the post title!!
    Thx

    ReplyDelete
  6. Very interesting tips for bloggers.

    ReplyDelete
  7. Thanks for that info.
    How can I check the list of people who have liked my article in the blog.
    Please do the needful.

    ReplyDelete
  8. Thanx for sharing.. I will get it to my blogs,, :D

    ReplyDelete
  9. You guys are awesome. Thanks!!

    ReplyDelete
  10. this is great tool but how do i have it in my wordpress blog

    ReplyDelete
  11. Thanks I just managed to add this to my blog. However, when I like it from facebook, the 'icon' displayed is not my header logo... it is a default work in progress blog image.

    how do i specify which image should be the thumbnail for sharing?

    ReplyDelete
  12. @ Siddharth - You can probably get a wp plug in.

    @ Anon - I didn't think the like button used a thumbnail, the share button does and you should be able to select the thumbnail.

    ReplyDelete
  13. definitely the best way to get exposure...i used directly below the title....didnt chose above title coz it looks weird to me :p

    ReplyDelete
  14. Great tool, im surely going to add it....

    ReplyDelete
  15. cool...thanks 4r useful topic.

    ReplyDelete
  16. Cool.. Thanks.. It helps me lot..

    ReplyDelete
  17. thanks fer the info.i tried it to my blog and it worked.

    ReplyDelete
  18. Thank's a lot..:D this is a nice post n I will try in my blog

    ReplyDelete
  19. Have you got any new icon images...?, if yes, please share it!!, I'll be back...:D

    ReplyDelete
  20. I had never used "like this facebook share" this, but since the new template replace yet I plug it again.

    ReplyDelete
  21. Hey Paul thank you for he post.
    But when I search for after checking expand widget templates 4 results ate found .
    Which one should I use exactly?

    ReplyDelete
  22. very cool..
    I want put in my blog

    ReplyDelete
  23. i have tried everything and it didnt work.. till now!!! Ur tutorial is just perfect, thank you so, so much!!!

    ReplyDelete
  24. Can You post a tutorial on small like box ?? I want a like box in a like button style? :D

    ReplyDelete
  25. U ROXX MAN, I ADDED THIS CODE, THANK U!!!

    ReplyDelete
  26. Interesting post. Keep posting such kind of information on your blog.

    ReplyDelete
  27. hmm this site is really amazing awesome and also inspirational to me.

    ReplyDelete
  28. Wow, that is a good news. By clicking the like icon or the share one, you can even know that both you and the person who clicked it have the same interest.

    ReplyDelete
  29. i have tried everything and it didnt work.. till now!!! Ur tutorial is just perfect, thank you so, so much!!!

    ReplyDelete
  30. This is helpful. I just added the Like Us on Facebook Box in the sidebar but the button will be pretty convenient in posts. I'm still thinking about it though since it might be redundant already.

    ReplyDelete
  31. i added it..and it works :D bt i don't want the like button on the home page..i want it only in the posts.how to do that?

    ReplyDelete
  32. Thanks for the detailed description!! However when I like one of the posts then it only likes the blog title. Does anyone know how to change that? I would be great if it would show the post title!!
    Thx

    ReplyDelete
  33. That genuinely answered my problem, give thanks to you!

    ReplyDelete
  34. Your article is very nice, very helpful to me in making blog

    Thanks

    ReplyDelete
  35. I have put it on one of my blog and it briliant!

    ReplyDelete
  36. Well keep going.. This is unique and good to read.. This kind of article only we need.. Thank you...

    ReplyDelete
  37. Wow! the like button looks very cute, bright and shiny. It is very nice, good work.

    ReplyDelete
  38. Thanks for such a great post and the review, it was helpful.!

    ReplyDelete
  39. Thanks a lot for the share, I am going to add on my blog. Cheers

    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