How to – Add Facebook LIKE button to WordPress Posts


Facebook introduced more social interactions with their new “Like” or “Recommend” Button. This Facebook button enables the user to interact with a site or page. Additionally share it with his/her friends at their own Facebook profile.

Well, Facebook does made it pretty easy to Implement the “Like” button code on your site. The complexity comes when it is not a single page website. How about a blog Post? This is where you will need this hack to make it work!

Do not use the code provided by Facebook because that will not work on Blog posts. Here is the hacked code designed for WordPress!

Open up your single.php and look for the_content(). Paste the code you see below… either before or after the_content()..

Advertisement
// start of fb like code
<iframe width="320" height="240" style="border: none; overflow: hidden; width: 450px; height: 60px;" src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" frameborder="0" scrolling="no"></iframe>
// end of fb like code

Optional Settings:

If you like to show the faces of your friends, change the part “show_faces=false” to “show_faces=true

If you like to show the label of the button as “Recommend“, change the part of the code “action=like” to “action=recommend

I hope this will help you to implement the “Like” button on your WordPress Posts! Have fun and drop me a line at twitter or you can click on the “Like” button on the top of this post ;)

Advertisement

Resources (Plugins for WordPress):

Thanks to my Readers :)

And.. I’m spent…

Don’t forget to rate the post too!

_

In Category: Wordpress
Show 223 Comments
  • ambreen11 March 5, 2013, 12:46 pm

    Really interesting work. When visitors to your blog click the “Like” button on your post, they share your content on their Facebook wall—instant advertising. You want more readers, more site traffic, and more exposure. This is a great way to do it.

  • Queen Niquez October 3, 2012, 11:21 pm

    doesnt work for me :( which code am I copying the one on the Facebook like generator or from your page

  • Piyush goyal May 30, 2012, 3:55 pm

    That is why I really love wordpress because of its features and flexibility! Keep posting. 
    thanxx for sharing

  • breast implants March 5, 2012, 10:28 am

    wordpress blog has many features inside about facebook plugin for like, widget and many more. you can select any which one is best suitable for your blog layout.

  • Fiorella Ramos Charcape January 11, 2012, 4:10 am

    I’m kind of a newbie, and I don’t know where that “single.php” is… :$

  • Dimagrire November 29, 2011, 2:24 pm

    Thank you so much for this Source and tutorial, problem solved :)

  • Matt Jones November 13, 2011, 10:51 pm

    My hope is that some members of our community will be interested in
    submitting their scholarly work for possible presentation at the
    conference. I’m serving as co-ch air of the conference’s Marketing
    Education track, one of more than 15 tracks that comprise the conference
    program.

  • Smugjoey November 6, 2011, 7:51 pm

    Oh my goodness! an incredible article dude. Thank you Nevertheless I’m experiencing concern with ur rss . 

    • Ruhani Rabin November 8, 2011, 12:12 am

      what kind of concern please let me know :)

  • Clarkhudson56 October 30, 2011, 10:19 pm

    hey there , wanted to tell you thanks for your quality post . its incredible refreshing to witness a intellectual blog for once.

  • Dan Poter October 28, 2011, 10:12 pm

    i love wordpress magic.keep posting

  • Greg Vandom October 9, 2011, 6:48 pm

    That is why I really love wordpress because of its features and flexibility! Keep posting.

  • Roel Yap October 4, 2011, 1:21 pm

    Thanks for sharing your thought and ideas. I really love WordPress because it has a lot of features.  Thanks again because I learned something new.

  • broken bow lake September 22, 2011, 3:21 am

    wordpress give many facility to add quickly which social plugin you want to add. in plugin you can search which  you need then quickly add it as per your needs.

  • Abc September 14, 2011, 12:31 am

    // start of fb like code

    <iframe src="http://www.facebook.com/plugins/like.php?href=ID));
    ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light”
    scrolling=”no” frameborder=”0″ allowTransparency=”true”
    style=”border:none; overflow:hidden; width:450px;
    height:60px”>

    // end of fb like code

  • BarLinn May 29, 2011, 4:50 pm

    Great post, thank you! It’s really helpful that you include exactly where to put the code in. I know this would be self-explanatory for many people, but I am very new with css/php so it is greatly appreciated!

  • cybermarty May 28, 2011, 1:24 pm

    Thank you so much, works great !!!

  • Bijusubhash May 18, 2011, 3:46 pm

     thank you…
    I search a lot… and find out a good one…

  • Natalia Ina May 10, 2011, 9:03 am

    Thank you, I have put the code ‘FB Like button’ into my wordpress blog. It works.

  • Cell phone tracker May 2, 2011, 3:07 am

    Thanks very much, I am looking for the code, I like your post.

  • lenababe April 26, 2011, 12:57 am

    where can i find this single.php in wordpress blog? I want to add it too. thanks.

    • Ruhani Rabin April 26, 2011, 2:29 am

      look inside your wordpress theme folder .. which would be under
      wp-content/themes/yourtheme or go to wordpress dashboard > go to themes >
      edit themes > select “single.php” from the right side bar.

  • Budiey April 23, 2011, 8:16 am

    nice

  • electric scooters for adults April 11, 2011, 11:26 am

    Okay, thanks for the info. Just thinking would anybody insert a like button in their post… They could put it on your page.
    Anyway, your the Vice president of MOL! Awesome!!

  • Jeck Denial April 8, 2011, 12:42 pm

    thanx mate you just solve my problem.

    Like!

  • eddy April 8, 2011, 10:16 am

    Thanks ?

  • Up Do Hairstyles April 6, 2011, 4:14 am

    what easy to do tricks. I can apply your guides to create facebook like button on my blogs. Thanks

  • Cheap Formal Dresses April 5, 2011, 4:33 am

    Great. Your guides help me to add facebook like button on my blog. Thanks for sharing.

  • Örsan March 31, 2011, 8:45 pm

    Hey Ruhani,

    thanks for your Post! Unfortunately, i’m stuck a little. I have implemented the same code, but, when someone likes the post, it will show up in the profile (that’s good), but unfortunately, no picture will be shown. You can test it at http://blog.augasmus.de when you like any post. Why is that, and how can I make it so that it shows an image?

    Thanks in Advance,
    Örsan

    • Ruhani Rabin April 1, 2011, 12:54 am

      I think you need to adjust the height to 60px

  • Erika Jones March 27, 2011, 4:45 pm

    Great tips! Thanks for posting and sharing! :)

  • adenkthebasterd March 21, 2011, 1:36 pm

    Hello. I tried to add like buttons to every post link on my wordpress homepage, (Lead post, etc) but failed . Can you help me? Thanks before.

    • Ruhani Rabin March 21, 2011, 4:51 pm

      Use one of the plugin listed in this post to have that issue sorted.

  • Alicia Hansen March 20, 2011, 8:56 pm

    Many thanks! Added to my store but it’s built on Wordpress so this was just what I needed.

  • Virgiltu March 18, 2011, 4:55 pm

    Cool thanx. Ill suport you by google adds. Save me some time.

  • Mr.M March 9, 2011, 5:36 am

    Can I change the height to 30px or other pixels to suit my blog post? 60px leaves too much empty spaces in my blog post. How can I make it visible on both Homepage and Post?

    • Ruhani Rabin March 9, 2011, 6:37 pm

      Yes you can change the height to 30px or 20px

      • Mr.M March 10, 2011, 2:14 am

        But do you know how can I make it visible on both home and post?

  • Rai Hina March 5, 2011, 6:52 am

    i like the left panel of all social media links and bottom panel …is it possible to add same thing like you on free wordpress blog. Kindly let me know….

    • Ruhani Rabin March 7, 2011, 3:43 am

      Hi There, you need to have your own hosted WordPress platform to use this similar functionalities. If you are hosted at WordPress.com that won’t be possible.

  • Asas March 4, 2011, 10:11 am

    grea thanks

  • Kamran Web March 4, 2011, 7:19 am

    thanks

  • Arben H February 25, 2011, 11:53 pm

    Thank you so much. kiss from Albania :))

  • Webinnovacio February 21, 2011, 12:02 pm

    a huge thanks from Hungary!

  • Jaspreet Singh February 15, 2011, 12:06 pm

    Thank you very much. great help

  • entrepreneurs startup February 3, 2011, 2:17 pm

    thanks for plugins…i have been struggking for adding facebook like box as it is comming in ugly shape.it is really helpful for me

  • Mold Removal February 2, 2011, 7:46 am

    Interesting article and nice blog you have too!

  • Daniel January 20, 2011, 3:03 pm

    No, you tested code which was then morphed into what was presented here, and the morphed code fails.

    Specifically, your ampersands were escaped at some stage, and then the escaping was escaped. The result is a bunch of stray occurrences of “amp;” in the rendering.

  • exotic car gallery January 18, 2011, 4:37 pm

    you are right… the code from facebook is not work for single post..

  • toeying January 10, 2011, 12:26 pm

    Brilliant…worked like a charm..thanks

  • Depk1990 January 7, 2011, 5:07 pm

    sir plzz tell me where to find this single.php file…..on wp

  • Dev @ Women Magazine January 7, 2011, 5:47 am

    That’s great, now i am looking for how to give my tech users an option to post code samples in comments without using discuss etc. Just like stackoverflow. is that possible?

    • Ruhani Rabin January 7, 2011, 6:01 am

      Technically Disqus would help more because it offers you multiple type of logons and streamlined management with social interaction .. it is possible to make something like stackoverflow if your platform running wordpress etc..

  • khaidirstudios December 30, 2010, 8:25 am

    @Ruhani Rabin,
    Thank you for your useful post.

  • Premium Wordpress December 28, 2010, 9:59 pm

    Thanks your great code

  • Dan essays December 8, 2010, 7:57 am

    Thanks for this advice, but truly I don’t see a lot of sense in it..)

  • Prashanth R December 7, 2010, 1:46 pm

    steps to add facebook comments box to wordpress in less than 10 minutes, easy steps people! :) http://tipsandtricksworld.com/web-design/wordpress/adding-facebook-comment-box-to-wordpress-blog-in-10-minutes

  • Agel Scam November 23, 2010, 4:37 pm

    Wicked, just added to my wordpress blog

  • PTEC November 23, 2010, 11:54 am

    Thank you for your useful post

  • Sammy The Site Builder November 20, 2010, 10:18 pm

    This button is very useful for advertising and promotion. It would be nice if facebook was giving backlinks :)

  • mheo November 20, 2010, 5:26 pm

    hi there, can I ask what plugin/module you used for your comment and sharer? Thanks :D

  • Essay Writing November 18, 2010, 11:57 am

    Great post
    Thanks for this tutorial.

  • Tisha November 11, 2010, 8:03 pm

    Great – I just used this and it’s exactly what I was looking for! Thank you!

  • dee8 November 10, 2010, 4:17 pm

    thanks for this gonna give it a try…I should have done this a long time ago :-S

  • Chesley November 2, 2010, 4:47 pm

    THANK YOU for this!

  • R_loredana October 22, 2010, 7:05 am

    Can I use this code on my blog wordpress.com? There is not a widget and I really want to add this button to my blog!

    • Ruhani Rabin October 22, 2010, 7:16 am

      I don’t think you can use it on wordpress.com blogs.. sorry!

  • Ori October 18, 2010, 3:29 pm

    Thank you so much… it is so hard to find one reasonable Guide on how to do that correctly.. and i got to this page and at last the code is WORKING OK ! not like in other guides or the facebook code itself!

  • Buy Facebook Fans October 12, 2010, 5:34 am

    Adding this button to my site increased by traffic by almost 4% due to the people who like the post friends seeing the site and visiting it.

  • Powerpress October 4, 2010, 2:39 pm

    hi thank to giving a nice tips

  • Inka Technology UK September 30, 2010, 6:27 am

    Thanks for this tutorial.
    I really looking how to implement it and found the answer here.

  • Indijobs September 29, 2010, 11:27 am

    Thanks for sharing I will implement it

  • knockoff handbags September 25, 2010, 6:02 am

    good bags

  • Callejas Harrison September 25, 2010, 1:32 am

    nice

  • Harsh Agrawal September 22, 2010, 6:06 pm

    I have both fbShare and Fb like button but fb like button are performing much better in comparison to fb share button.. Highly recommended….

  • oaussieo September 17, 2010, 9:11 pm

    Thanks mate

  • Nick September 7, 2010, 12:50 pm

    Here’s the WordPress plugin:

    http://wordpress.org/extend/plugins/like

    No coding necessary, you can customize the look and placement of the button in the settings interface. Thanks for nice post

  • Overweightandfedup8 September 3, 2010, 9:09 am

    I’m so sure that you will learn how to lose 10 pounds in 10 days at home from this course that I am willing to back it up with a 100 percent guarantee! If you fail to learn anything from this course, then you can get your money back! I am so sure that “Lose 10 Pounds – How To Lose Weight In 10 Days” is a valuable course that I am willing to put my money where my mouth is and back up my promises with a guarantee! 100% “Love It or Leave It”.
    http://overweightandfedup.com/

  • Cherry Rahtu September 2, 2010, 4:07 am

    Hi Robin,yes , it does work well , both like button and comment box are shown, but how can i move it right after the content and before the related post and vote button in my blog. you can see the example post here http://t.co/EyqlPt3, i will appreciate if you could help me out . thank you.

  • Virgil Anthony Warren August 27, 2010, 10:02 pm

    Thanks very much for your short tutorial. Been looking all over for something like this. Now I feel stupid after realizing how simple it was. This will make my website that much better.

  • Info August 16, 2010, 9:43 am

    Thank you a lot of. It's help for me :) http://www.Howitwork.info

  • Facebook Apps August 9, 2010, 6:53 am

    I have the like button a couples of days after they announced it, but How the hell can I implement the open graph in my wordpress?? Thats the question I want an answer for

  • replica watches August 2, 2010, 2:01 am

    It has a black dial accented with Geneva ripples, combined with connotation and internalization through sleek lines. Orange colors are absolutely eye-catching against black background. It makes people recall the particular rivets on the particular head of the particular train in Industry Era. It is the particular uniqueness of this timekeeper that makes people strongly feel the particular spirit of that period. It is produced at exclusive edition and thrilling for the particular powerful and trustworthy mechanism and distinctive style and design. In a word, it continues all the particular advantages of Mido Multifort series, absolutely worthy of buying.Tudor replica watches

  • thegirlinthecafe July 29, 2010, 6:40 pm

    Thanks a lot for this, very useful!

  • GLenn July 26, 2010, 8:07 am

    thumbs up sir, i have just click the like button at the top! :)

  • Sms for Mobile July 25, 2010, 8:28 pm

    Wonderfull post contains great usefull information thanks for it

  • Matt Halfhill July 23, 2010, 7:38 am

    Thank you a ton for the help! I tried a number of plugins, but didn't like that there were very few options of exactly where you could place the button.

    Thanks again for sharing this helpful tip!

  • Ruhani Rabin July 22, 2010, 8:38 pm

    Steve what is your point when this plugin is already listed here ..

  • Ronald Lejeune July 22, 2010, 12:04 pm

    Thanks so much for the how to. I think my readers will enjoy this feature..

    http://videolinkx.com

  • Steve Patterson July 21, 2010, 9:10 pm

    BTW, You can check out http://www.cardeologist.com for a working version of that plugin I found.

  • Steve Patterson July 21, 2010, 9:09 pm
  • Craig July 18, 2010, 7:36 pm

    Your list of credentials is embarrassing. It's just a huge list of made-up titles at various 1-man-companies. There you have it ;)

  • louis vuitton handbags July 7, 2010, 8:05 am

    “Here elaborates the matter new balance shoes not only extensively but also detailly .I support the
    write's unique point.It is useful and benefit to your daily life.You can go those
    sits to know more relate things.They are strongly recommended by friends.Personally

  • Tommie July 3, 2010, 3:29 pm

    Check out http://likebot.com if you want a like-button without the Facebook-connections.

    WP plugin here:
    http://wordpress.org/extend/plugins/likebot/

  • Liamsdomain Co Nr June 24, 2010, 11:03 pm

    i found a plugin that works, but if someone can figure this out it would still be helpful, i just dont need this info anymore

  • Liamsdomain Co Nr June 24, 2010, 10:45 pm

    i have a problem with this, i have a free domain so it shows up as www2-cole.homelinux.com:83 but my website name is MediaPond.co.nr, that isnt much of a problem, but when i add it to a page it will show it as (persons name) likes (title of post) on www2-cole.homelinux.com.

    but if i try to change the code so where it says
    src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>
    is now changed to
    src=”http://www.facebook.com/plugins/like.php?href=MediaPond.co.nr/?p=000
    on facebook it will now say
    (persons name) likes http://MediaPond.co.nr/?p=000 on MediaPond.co.nr

    can someone please help me i want it to say
    (persons name) likes (post name) on MediaPond.co.nr.

    please help ive spent the last 10 hrs trying to get these facebook like buttons to work on my website and this is the last thing i need.

  • Ruhani Rabin June 14, 2010, 1:06 pm

    Yeah You are right about that. I need to update this article to fit those
    Meta Properties…

  • J Moore June 14, 2010, 12:45 pm

    It takes a while to figure it out completely as there a good few more features to the like button if you add the FB meta properties too. A deatiled tutorial on that and explanation for everything and how it benefits the website owner would go down a treat for me as FB don't make it all very clear however I see people n the forums talking about using it to automatically ask the people to like your FB page after they like the content.

  • dattai June 14, 2010, 10:45 am

    useful article

    Thanks a lot

  • Nick June 8, 2010, 4:10 pm

    Works a treat, thanks very much :)

  • Aahna June 7, 2010, 7:45 am

    thanks its working on my site now…

  • Deb June 6, 2010, 8:27 am

    is it possible to add the like button to just posts in one category?

  • hpguru June 5, 2010, 3:53 pm

    Thank you for this tip! You are best and now my blog have button like that works!

  • Min June 4, 2010, 7:23 pm

    i just restored a back up for my site… i had the like button… but now it seems that only my older post articles before the restorations will appear on my facebook profile… my new posts articles dont seem to appear anywhere… do you by any chance know whats goin on?

    Thanks a bunch

  • Mark June 3, 2010, 10:40 am

    Please help.

    I have added this but when I click like it does not update on my Facebook profile like it doesm on your blog.

    For example I just liked your post and on my Facebook wall it says Mark likes – the name f your post and a link to it.

    When I click on mine on my blog that doesn't happen?

  • air force one shoes May 31, 2010, 8:23 am

    Well , the view of the passage is totally correct ,your details is really reasonable and you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this forum when I m free and I find there are so much good information we can learn in this forum!

  • Ruhani Rabin May 17, 2010, 3:53 pm

    Hilarious!!! Now I know… that is what he was talking about =)

  • Mark Aaron Murnahan May 17, 2010, 1:36 pm

    I have messed my single.php up 1,000 times. Not that particular way, but 1,000 times in some way or another. LOL

  • Mark Aaron Murnahan May 17, 2010, 1:26 pm

    I am blushing now. :-D

    Have you ever seen that video he mentioned? Fun stuff!
    http://www.awebguy.com/2009/08/internet-marketi

  • Mark Aaron Murnahan May 17, 2010, 1:24 pm

    I am excited to know it is fixed. That seemed like the likely problem in your single.php.

    Thanks for saying that, and thanks for reading. I had huge fun with that video and “Mom” was actually my wife, Peggy.

  • Ruhani Rabin May 17, 2010, 9:38 am

    Glad it's sorted out mate! You are most welcome =) Yes Mark is always a
    knowledgeable friend!

  • arthurcharlesvanwyk May 17, 2010, 9:22 am

    Thanks guys.. Sorted. You have no idea how much I appreciate that.
    I actually did have that piece of code in there twice.

    I would have you know that I am a fan of both of y'all.. I read Ruhani's tweets religiously, while I make a point of checking my RSS feed to your blog daily Mark..
    the internet marketing spoof with the paper background had me in stitches, whilst it had me thinking at the same time..

    Thanks again guys

  • Ruhani Rabin May 17, 2010, 6:12 am

    Thanks Mark!! Spot on =)

  • Mark Aaron Murnahan May 17, 2010, 5:54 am

    If it happened when you added the like button to individual posts, it was almost surely in the single.php and you just picked up a little something extra when you copied / pasted. If you see “php the_content” in there more than once, you have your culprit.

    You should be able to find it in the URL (edit as needed for web address, theme name, etcetera) as follows:

    http://__yourdomain__/wp-admin/theme-editor.php

  • arthurcharlesvanwyk May 17, 2010, 5:28 am

    I have added the button successfully a month or so ago, however all the content in every post is now duplicated. I have deactivated and deleted every single plugin on the blog and the post content is still in duplicate. This is only in the browser, not on the dashboard.
    Is it possible that this plugin could be the cause of that?

  • rajeevranjansingh May 12, 2010, 6:40 am

    Nice post, i need this tips thanks, http://www.globalthoughtz.com

  • award winning children's books May 11, 2010, 7:36 am

    You have explained everything very clearly and it is very easy to understand… thanks

  • good batteries May 5, 2010, 2:55 am

    good article!I love it
    Laptop Batteries

  • Andre Natta May 3, 2010, 10:32 pm

    Thanks for the hack! I”ve been able to use it on all of the sites that I currently maintain and it seems to be working quite well so far. I'm going to try to make the additional meta changes to see what'll happen next.

    Thanks again!

  • jianchung May 3, 2010, 7:58 am

    hey this is a great hack! thanks! I implemented it to my site :) Keep them guides coming!

  • Ruhani Rabin April 30, 2010, 9:23 am

    Hi Thanks for the Info.. Already Added your plugin in the list.. No need to post the comment into multiple posts :)

  • Bottomless April 30, 2010, 8:14 am

    Here's the Wordpress plugin with support for Open Graph:
    http://wordpress.org/extend/plugins/like
    No coding necessary, you can customize the look and placement of the button in the settings interface.

  • Ruhani Rabin April 29, 2010, 2:19 pm

    adjust the height in the code .. for example height:28px

  • Kiko April 29, 2010, 1:15 pm

    Sorry, i mean that a big white space below the button….

  • Ruhani Rabin April 29, 2010, 10:33 am

    well as you should know.. you can only see the name of your friends who are
    sharing the post.. ;)

  • Ruhani Rabin April 29, 2010, 10:32 am

    Try to adjust the width in the code.. say 450px to 350px maybe…..

  • Cherry Rahtu April 29, 2010, 10:28 am

    ya, it's pretty cool, i already added it to my website. thanks

  • Kiko April 28, 2010, 3:20 pm

    I got a big white space after the like button, how to reduce it? (My setting: no avatar)

  • Sunil Jain April 28, 2010, 3:16 pm

    Hi Ruhani :)
    I am adding this button and I also saw in many blogs next to each RT button there is a Like button :)
    A very nice step from Facebook and I hope it replaces share button very soon :) :)

  • Ruhani Rabin April 27, 2010, 3:43 am

    Erm… No it should not be.. unless your wordpress codes are repeated ..
    clear your wordpress cache .. (if you have one) .. out of few thousands you
    are the only one having problem my friend.. this code is as simple as it
    could be

  • Rick April 27, 2010, 3:25 am

    Hmmm…for some reason that code is causing my posts to be posted twice in the same single page. I've tried pasting it in a couple of different locations, and it still breaks my theme.

  • Ruhani Rabin April 26, 2010, 3:42 am

    Thanks bro!! =)

  • gautamhans April 26, 2010, 3:37 am

    Awesome work! Ruhani. I think this like function is way better than share. will add it to my website, right away :)

  • Javier Reyes April 25, 2010, 6:09 pm

    A Facebook OpenGraph Wordpress plugin hear (with the new like, activity and recommendations widgets. And the old Facebook Connect login and register, send comments….):
    http://www.sociable.es/facebook-connect/

    Tutoral with screenshots:
    http://www.sociable.es/facebook-opengraph-wordp

  • Mark Aaron Murnahan April 25, 2010, 5:17 pm

    It does not appear to be a coding issue. Let me give you two examples. One post is liked by me and two others, and Facebook says this, but it only shows one picture, which is mine. See here: http://mamy.us/bVGf0i

    The other one says it is liked by me and somebody else (name changes with each refresh) and says it is liked by us “both” rather than “x” others. However, it shows seven Facebook avatars. See here: http://mamy.us/bXH8jZ

    If you are not logged into Facebook, it seems to only show that one person has liked something, regardless how many actually like it. It just seems to be very inconsistent. In fact, it was even giving a 404 in the iframe for a little while yesterday.

    • Ruhani Rabin April 26, 2010, 3:27 am

      Hey Mark,

      1) the post shows only your avatar because you only have the permission to see your avatar, the other people listed there are not direct friends of yours, so basically when i went to see your post (when i was already logged into facebook) it showed me “Mark and 2 others likes this ..” but i can only see your avatar .. :) cz you r in my friends list..

      2) Your second post, where i have another friend which is our common friend so I can see her and your avatar ..
      http://twitpic.com/1ijmwg

      Now here is the thing..

      a) facebook like button is not a retweet button .. and you will not be able to see any avatar unless the people liked it ARE your FRIEND

      b) If there is more than 2 friends (who are your facebook friends) who likes your post .. the name will be shuffled on refresh .. but only 2 friends name will be shown at a time (tidy).

      c) It will display the avatar of your friends (there is a limit for that too, and the avatars will be shuffled too once it reaches the max)..

      apart from these the thing when you are not logged into facebook it should only display a counter of how many people likes it .. my side it works anytime ..
      Fun Fact : When i went to one of your page using a browser where i am not logged into facebook.. it showed me “Seorang suka ini” in Malay Language and which means .. 1 person likes this .. LOL! But in the same browser when I went to one of my pages … it showed me “3 people likes this” in English .. hmm .. interesting ..

      • Mark Aaron Murnahan April 26, 2010, 3:05 pm

        That is funny, because the second one where you show two people, I have eight avatars and several are mutual friends of ours, plus “Mark Aaron Murnahan and Eureka Janet Alexander both like this.” On another post, it will say something like “Mark Aaron Murnahan and Eureka Janet Alexander and 6 others like this.” It really is flawed, and it is not just my imagination. I know this even better after seeing your screenshot and having already seen it in 5-6 browsers, logged in and not logged in. Facebook has some work to do … it is not our fault. :-)

  • mikegreer April 25, 2010, 4:46 pm

    This works great! Thanks so much (I added it to all 3 of my websites.)

  • Ruhani Rabin April 24, 2010, 4:15 pm

    Copy your URL to facebook like api page and test it out.. it will come out exactly the same.. ;) maybe you can ask facebook about it ;)

    You need to have a post where more than at least 3 of your friends says liked it

  • Ruhani Rabin April 24, 2010, 6:18 am

    hi there .. it should be inside your wp-content/themes/yourtheme/single.php

  • PlF April 24, 2010, 1:08 am

    Here's a simple widget that uses the new Facebook Like button:

    Facebook Like Wordpress Plugin

    Feedbacks appreciated on this blog post while waiting for Wordpress to approve it and move it to the directory.

    (the blog actually uses it so you can test the plugin live before installing)

  • Shelley April 23, 2010, 7:04 pm

    um, where do I find the “single-php”? I am SO not technical.

  • Mark Aaron Murnahan April 23, 2010, 6:19 pm

    For some reason it only shows two people at a time for me and does not have the … “and x others like this.” Every time I refresh the page, it just shows a different set of two people who liked it. It is time to do some checking.

  • MeanDean April 23, 2010, 5:30 pm

    Thanks for the post.

    Your breakdown was helpful in providing some ideas and inspiration to field a wordpress plugin for the Like Button.

    Keep up the great posts.

  • Mark Aaron Murnahan April 23, 2010, 4:31 pm

    I like it very much. I just thought about this today and decided to implement it on my blog. Funny that I should find you on top of this, Ruhani. :-)

  • Fitho Dev April 23, 2010, 7:03 am

    thanks, this was really helpful

  • jasonfweb April 23, 2010, 6:49 am

    I just managed to do it.. I copied the lines and it worked.. or at least it works for me… Can someone try to see if it works? I don't know if I can write my homepage here.. so just add “www. before my username, and “.com “after it ;)

    • Ruhani Rabin April 23, 2010, 9:42 am

      I just tested your site and it is working :)

      • jasonfweb April 23, 2010, 9:46 am

        thank you VERY much! And I succed in getting the comments working! Now to layout optimization ;)

  • Nicolas April 23, 2010, 5:49 am

    Thank you very much for promoting!

  • toddlopez April 23, 2010, 3:33 am

    Hey Ruhani (how do you pronounce that?)

    For some reason the iframe just does not work on mine…

    Ive used the JS one and changed the href php to get the Permalink

    <fb:like href=”<?php the_permalink(); ?>” layout=”standard” show_faces=”false” width=”400″ action=”like” colorscheme=”light” />

    Although it seems once you click like on like one post it says you like all other posts on the site…?

  • Ruhani Rabin April 23, 2010, 2:38 am

    You've been added into the resources

  • Sonic Blink April 23, 2010, 2:37 am

    Another wordpress plugin that lets you see a live preview before you save settings:
    http://bit.ly/awqa5C

  • Ruhani Rabin April 23, 2010, 2:37 am

    check which kind of error you are getting..

    Yes you are right… for homepage you need to resolve the permalink for the post and put it in ..

  • Ruhani Rabin April 23, 2010, 2:25 am

    Nicely done !! =)

  • Pat Yuen April 22, 2010, 10:35 pm

    There is a WP plug in now. http://tinyurl.com/2vvpka9

    No coding required. Works great and you can see it in action here. http://blog.patyuen.com

  • bitlockers April 22, 2010, 10:11 pm

    My problem with this has been ( not with your code), When it's sent to FB it shows the tittle and link, (With the correct sub domain links on both tittle and link) but when it shows “on” it takes you to the main domain in stead of the sub-domain name where the actually post is. Another words it takes you to the wrong site more or less.

    I tried yours and it worked fine but showed double post on the same page, if you no why or if there is a fix for this, please let me know.

  • Nicolas April 22, 2010, 10:09 pm

    Maybe helpful: Kouguu FB Like wraps the Facebook Like Button into a customizable WP plugin. http://www.kouguu.net

  • jasonfweb April 22, 2010, 9:42 pm

    thanks! It worked! I had problems 'cause it gave me an error tellimg me that it couldn't get the url even if I made one as this °_° I still don't know where I was wrong..
    I have a question though.. How to implement it on the home page? If I put it in index.php liking a post result as a like to all the posts ( I suppose it's cuz it get's the permalink for the homepage right?

  • magnus_g April 22, 2010, 8:03 pm

    Thank you! Saved me from a lot of frustrations ;)

  • Michael Johnston April 22, 2010, 7:31 pm

    I have taken your lead and done this for the Thesis theme. The instructions for doing so can be found here:

    http://thewellrunsite.com/2010/04/22/adding-a-f

  • Pliggs April 22, 2010, 5:49 pm

    Figured it out, it was “my” error, instead of:

    &show_faces=false

    I had:

    &ampshow_faces=false

    not sure how it happened, but it's working now. Thanks.

  • Ruhani Rabin April 22, 2010, 5:44 pm

    yeap mine is set to show_faces=false

  • Pliggs April 22, 2010, 5:44 pm

    I like it just below the title and meta information.

  • Pliggs April 22, 2010, 5:42 pm

    Sorry, I do have show_faces=false and it still shows the faces.

    Has anyone got it set to not show faces and have it working?

  • Ruhani Rabin April 22, 2010, 5:39 pm

    show_faces=false not show_faces:false

  • Pliggs April 22, 2010, 5:36 pm

    show-faces:false and show_faces:false both still show the faces.

  • Ruhani Rabin April 22, 2010, 5:31 pm

    Actually there was a typo in the code .. that is needed to be fixed ..

    wrong: show-faces

    right: show_faces

    thanks for pointing it out man!

  • Pliggs April 22, 2010, 5:22 pm

    One thing not working is the option to turn off the faces. Even set to false, it still displays the faces.

    Any idea whats up?

  • WebWeaver April 22, 2010, 4:48 pm

    Thanks Ruhani – so easy to implement with Wordpress self-hosted version. Now I've got a Facebook Like button on every blog post here:

    http://catswebweave.com/blog

  • Ruhani Rabin April 22, 2010, 3:58 pm

    Actually it is already working .. it seems no other people than your friends
    liked it .. thats all
    http://twitpic.com/1hjbsv

    BTW since you've shown the sample from FB itself.. i dont think I did
    anything to that..

    plus your own sample is showing correct thing.. LOL!

    Facebooks developers url is a uniqe one with many thousands of people
    clicking on it.. so thats all different stories..

  • Diana Freedman April 22, 2010, 3:57 pm

    Thank you very much! This worked perfectly on my blog (though I'm still trying to figure out the best placement for it within each post). :-)

  • Talal April 22, 2010, 3:46 pm

    Yes I know that, it shows you your current facebook friends who liked the post, but what I'm talking about here is that it doesn't show you the total number of all people who liked it. Here is an example: if you try and test “developers.facebook.com” it will show you if you liked the websites, and if your friends liked it, AND total number of people who liked it”
    http://yfrog.com/bacountercj
    While if I try your post for example it shows me myself, and if any of my friends liked it, BUT no counter of how many people liked your post
    http://yfrog.com/j5nocounterj

    I found this to happen on most of wordpress websites, while on big websites such as IMDb.com the counter works very well. http://www.imdb.com/title/tt0120338

    Any idea?

  • aaron April 22, 2010, 3:38 pm

    Im getting the exact same error. its so frustrating. why can it be implimented on wp dynamic pages but not on a different site that is dynamic. all thet needs to hapen is have the url in the like button be changed dynamically right. i do that and it works on one page bu then the rest of the pages gives me an error saying “You failed to provide a valid list of administators. You need to supply the administors using either a “fb:app_id” meta tag, or using a “fb:admins” meta tag to specify a comma-delimited list of Facebook users.” help please…

  • Ruhani Rabin April 22, 2010, 3:23 pm

    Thanks allan .. that was due to the syntax highlighting plugin.. i changed it and the code looks clean now.. :D

  • Ruhani Rabin April 22, 2010, 3:22 pm

    Also take a look at this .. the same link on facebook like api page
    http://twitpic.com/1hj2jl

  • Ruhani Rabin April 22, 2010, 3:18 pm

    You have to understand how it is supposed to work.. it only shows the likes to a visitor who has HIS facebook friends .. liking the link..

    So .. why not you go to http://developers.facebook.com/docs/reference/p

    Type in your own link .. and test it out .. it is working here and on other websites..
    if you need a prove look at this picture below
    http://twitpic.com/1hj1zd

  • Talal April 22, 2010, 3:10 pm

    I found out that in most of the websites the counter doesn't work, it only shows me myself and my friends who liked the post but not the total number of people who liked it. If you visit the developer page you will see something like this: “yourname, and 3,166 others like this” while in your website and mine it doesn't do that. Any idea how to get this to work?

    http://developers.facebook.com/docs/reference/p

  • Ruhani Rabin April 22, 2010, 2:51 pm

    Let me check again! Thanks by the way :)

  • Allan Kintz April 22, 2010, 2:49 pm

    It looks like there's an extra ; just before the ?php. That was giving mine an error when I tried to use it. Removed the semicolon and it worked fine. Thank you!

  • Christian April 22, 2010, 2:23 pm

    I know, but apart from that it is correctly implemented but i dont understand what the error is supposed to mean. Di you have any idea / hint?

  • Ruhani Rabin April 22, 2010, 2:16 pm

    This code is only for wordpress don't use elsewhere please

  • Christian April 22, 2010, 2:11 pm

    I'm trying to implement this on my site (example here at the bottom: http://www.ringrocker.com/lineup.php?op=showban…) but i'm always getting an error on facebook saying “You failed to provide a valid list of administators. You need to supply the administors using either a “fb:app_id” meta tag, or using a “fb:admins” meta tag to specify a comma-delimited list of Facebook users.”. What is that supposed to mean and how can it be fixed? Thx in advance

  • Jay O'Hare April 22, 2010, 2:09 pm

    Thanks for posting – works well.

  • Ruhani Rabin April 22, 2010, 1:33 pm

    Because you've added the code on single.php it will work only on single post!

  • Bitpop April 22, 2010, 1:25 pm

    Thanks for this! I've added it to my WP blog and the “like button” is appearing on the individual posts, but not on the main feed. I've cleared the cache, and it's still not appearing. Is this correct behaviour or have I done something wrong?

    http://www.bitpop.co.uk

  • Ruhani Rabin April 22, 2010, 1:20 pm

    the space below is reserved for the faces icons.. but i think u can adjust
    the code near to the end of it .. set height:24px maybe

    Best Regards,
    ———————————
    Ruhani Rabin
    Social Profiles: [image: Facebook]
    <http://www.facebook.com/ruhani.rabin>%5Bimage:
    LinkedIn] <http://my.linkedin.com/in/ruhanirabin>%5Bimage:
    Flickr]<http://www.flickr.com/photos/neoblitz/>%5Bimage:
    Twitter] <http://twitter.com/ruhanirabin>%5Bimage: Blog
    RSS]<http://feeds.feedburner.com/ruhanirabin>%5Bimage:
    Blog RSS] <http://feeds.feedburner.com/f22in>%5Bimage:
    Friendster]<http://www.friendster.com/ruhanirabin>%5Bimage:
    Google] <http://www.google.com/profiles/ruhani.rabin>%5Bim
    devianArt]<http://ruhanirabin.deviantart.com/&gt;
    IM: [image: Google Talk/]ruhani.rabin [image: Skype/]ruhani.rabin [image:
    MSN/]ruhanir [image: BlackBerry Messenger/]2190E5D5

  • John Haydon April 22, 2010, 1:12 pm

    Ruhani – great post! I'm curious how to remove the space below the like button. Please see http://johnhaydon.com/2010/04/drives-danielle-b

  • Ruhani Rabin April 22, 2010, 12:41 pm

    The code you've posted is not executed as PHP… check server configuration

  • TiPo April 22, 2010, 12:36 pm

    here's the error:

    The page at <a href=”http://<;?php%2520echo%2520urlencode%28get_permalink%28%24post->ID%29%29;%2520?”>http://&lt;;?php%20echo%20urlencode(get_permali…> could not be reached.

  • Ruhani Rabin April 22, 2010, 12:35 pm

    Glad it helped! =)

  • TiPo April 22, 2010, 12:29 pm

    I already did!
    still the same trouble :S

  • Ruhani Rabin April 22, 2010, 12:23 pm

    Just copy paste this code should be able to work!

  • TiPo April 22, 2010, 12:21 pm

    it didn't work with me =(
    it says: ERROR
    well, I'm using a custom permalink structure, which is:
    /%category%/%postname%-%post_id%
    can I use the same code provided above in this post?

  • James D Clarke April 22, 2010, 11:52 am

    Brilliant post! I spent 30 mins trying to figure this out before googling it…..shoud have known someone smarter would have already done so!

    Thanks for sharing!

  • baardoa April 22, 2010, 11:47 am

    Thanks, Ruhani. That's easy and cool :)

  • toddlopez April 22, 2010, 11:43 am

    Nice one, legend! Ive got it running sort of on my typography blog, http://picturetype.com/mind-your-head/

    • Ruhani Rabin April 22, 2010, 12:34 pm

      Hi Todd .. I’ve taken a look into the SDK which is a lot of stuff to load just for one single function.. and very time consuming.. this one is the fastest to implement..

      • Anonymous April 22, 2010, 2:34 pm

        OK thanks for looking into it!

      • Anonymous April 22, 2010, 2:41 pm

        Ive got error when ive used your code… reverted back to the javascript one… which works but it doesnt unfortunately pull the post title onto the users FB page

      • Ruhani Rabin April 22, 2010, 2:44 pm

        What type of error you have!?

      • Anonymous April 22, 2010, 2:50 pm

        Just a red error pops up next to the button

      • Eric May 19, 2010, 2:47 am

        I have the same exact problem. I copied and pasted the code exactly as instructed and it looks fine, but when I click on the like button a red error just shows up and says the page could not be located. Feel free to go to any post on my site and see for yourself. Don’t know what to do.

      • Ruhani Rabin May 19, 2010, 3:03 am

        Here is one thing you can test. Go to your facebook and try to share one of
        your post in facebook using facebook share. If you can’t see your contents
        in the share, means facebook is not able to see your website. If facebook is
        not able to see your website then it will not able to use the “Like” button

      • Eric May 19, 2010, 3:20 am

        I was able to share on facebook from my website but it showed up on my facebook page as only my website in general, didn’t display any specifics about the post itself. Any way to fix this?

      • Ruhani Rabin May 19, 2010, 3:23 am

        Yeap thats what I wondered about, I’ve seen another similar problem… if
        you art not using All in one SEO pack… try to install it .. it will add
        some tags on your header.. clear cache and try again to share on fb..

      • Eric May 19, 2010, 4:18 am

        activated the all-in-one seo pack, cleared cache, tried to share again… same exact result as before. It just shares a link to the website, doesn’t give anything to do with the post, and the like button still has an error :(

      • Ruhani Rabin May 19, 2010, 4:22 am

        My friend is facing the same problem… his website also not visible to
        facebook share .. and he cant use the like button too… that leads me to
        think that .. it might be possible that the facebook bot cant fetch
        information from the site maybe because the server is preventing the bot to
        access… or a robots.txt file might be needed..

      • Eric May 19, 2010, 4:48 am

        Just added a robots.txt file to allow all robots, cleared the cache, but still getting the same results.

      • Ruhani Rabin May 19, 2010, 4:59 am

        Eric, I’ve checked your site and like button .. the error says facebook
        can’t reach or verify the existence of that url.. why dont you copy a post
        url .. go to facebook api page for LIKE button .. paste it and try .. see
        what comes up.. the link is in this post…

  • Ruhani Rabin April 22, 2010, 11:29 am

    No worries :) I'll dig in as soon as I reach home! Now driving!

  • Todd April 22, 2010, 11:27 am
  • Ruhani Rabin April 22, 2010, 11:21 am

    Todd can u post the link please :) thanks :)

  • Todd April 22, 2010, 11:20 am

    <div id=”fb-root”></div>
    <script>
    window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
    xfbml: true});
    };
    (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
    '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
    }());
    </script>

    ––––––
    <fb:like href=”http://developers.facebook.com/” layout=”standard” show_faces=”true” width=”450″ action=”like” colorscheme=”light” />

  • Ruhani Rabin April 22, 2010, 11:15 am

    I didn't saw any js version! Are you sure!? This one is iframe version to be exact! If you have the js version link, you can share it here! I will take a look :)

  • toddlopez April 22, 2010, 11:12 am

    Is this the JS version? On the FB developer site there is two versions…

  • Ruhani Rabin April 22, 2010, 10:32 am

    In the code change the action=like to action=recommend that's all

    • Eric May 19, 2010, 5:32 am

      Hi, I tried putting in the specific url of my post on the button code generator and it worked. But I don’t want to have to put in a new code for each post… Any ideas?

      • Ruhani Rabin May 19, 2010, 6:56 am

        Most probably because facebook API site is not using the iFrame code itself
        .. it is using the javascript version .. so then you need to try out few of
        the plugins listed in this post .. having said that you might also need to
        create a quick facebook app for using XFBML javascript version

      • Eric May 19, 2010, 5:47 pm

        I just tried the first plugin you listed in your post, and it worked! Thanks a lot, you’ve been extremely helpful. Cheers!

  • baardoa April 22, 2010, 10:19 am

    Good post. I have tested it, and it works fine. Is it possible to do the same for the “recommend” button?