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

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='”http://www.facebook.com/plugins/like.php?href=” + data:post.url + “&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light”‘ 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 !

 

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

     

  2. 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

  3.  

  4. 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

  5. Awesome! great information and very simple tutorial! I now have this up and running on my blog!! 🙂

    ReplyDelete

  6. Thanks, i used it and it looks great.

    ReplyDelete

  7. 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

  8. Very interesting tips for bloggers.

    ReplyDelete

  9. 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

  10. Thanx for sharing.. I will get it to my blogs,, 😀

    ReplyDelete

  11. You guys are awesome. Thanks!!

    ReplyDelete

  12. Stone Art’s BlogMarch 31, 2011 at 10:58 PM

    That great, Thanks for this

    ReplyDelete

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

    ReplyDelete

  14. 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

  15. @ 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

  16. 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

  17. Great tool, im surely going to add it….

    ReplyDelete

  18. cool…thanks 4r useful topic.

    ReplyDelete

  19. Cool.. Thanks.. It helps me lot..

    ReplyDelete

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

    ReplyDelete

  21. Thank’s a lot..:D this is a nice post n I will try in my blog

    ReplyDelete

  22. Have you got any new icon images…?, if yes, please share it!!, I’ll be back…:D

    ReplyDelete

  23. I had never used “like this facebook share” this, but since the new template replace yet I plug it again.

    ReplyDelete

  24. 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

  25. thx bro 😉

    ReplyDelete

  26. very cool..
    I want put in my blog

    ReplyDelete

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

    ReplyDelete

  28. Can You post a tutorial on small like box ?? I want a like box in a like button style? 😀

    ReplyDelete

  29. Thanxxx…..

    ReplyDelete

  30. niCEE..

    ReplyDelete

  31. Coool man

    ReplyDelete

  32. U ROXX MAN, I ADDED THIS CODE, THANK U!!!

    ReplyDelete

  33. html5 audio playerMarch 27, 2012 at 11:29 AM

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

    ReplyDelete

  34. Facebook Application DeveloperMay 14, 2012 at 10:35 AM

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

    ReplyDelete

  35. gerai pelangsingMay 18, 2012 at 9:19 PM

    nice post,,thanks.

    ReplyDelete

  36. nice tip, thanks very much

    ReplyDelete

  37. Latest Funny SMS text MessagesJune 24, 2012 at 6:30 PM

    Awsume Post! Thanx

    ReplyDelete

  38. 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

  39. Very helpful. I love it.

    ReplyDelete

  40. Brilliant! Thank you

    ReplyDelete

  41. De’Etta @ Choosing JoyJuly 18, 2012 at 5:43 PM

    Worked wonderfully, thank you.

    ReplyDelete

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

    ReplyDelete

  43. Mencegah Hepatitis BAugust 24, 2012 at 1:51 PM

    Brilian.thanxs

    ReplyDelete

  44. 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

  45. i added it..and it works 😀 bt i don’t want the like button on the home page..i want it only in the posts.how to do that?

    ReplyDelete

  46. 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

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

    ReplyDelete

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

    Thanks

    ReplyDelete

     

    Replies

     

  49. helpful to me in making blog

    Delete

  50.  

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

    ReplyDelete

  52. how to get rid of belly fat for womenNovember 26, 2012 at 11:03 AM

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  55. great tips buddy 🙂

    ReplyDelete

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

    ReplyDelete

  57. wonderful and interesting

    ReplyDelete

  58. Thanks for great post.

    ReplyDelete