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!

Advertisement

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

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

Resources (Plugins for WordPress):

Thanks to my Readers :)

Advertisement

And.. I’m spent…

Don’t forget to rate the post too!

_

  • http://www.buraq-technologies.com/ ambreen11

    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

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

  • Piyush goyal

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

  • http://www.theplasticsurgerychannel.com/ breast implants

    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.

  • http://www.facebook.com/Fiio.Ramos Fiorella Ramos Charcape

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

  • http://dietadimagrire.info Dimagrire

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

  • http://discount-uniforms.mehickal.com/ Matt Jones

    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.

  • http://binary-options-trading-system.weebly.com/ Smugjoey

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

    • http://www.ruhanirabin.com/ Ruhani Rabin

      what kind of concern please let me know :)

  • http://brand-new-mobile-money-machines.weebly.com Clarkhudson56

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

  • http://brand-new-mobile-money-machines.weebly.com/ Dan Poter

    i love wordpress magic.keep posting

  • http://www.myprodietary.info/ Greg Vandom

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

  • http://www.mydietarybuzz.info/ Roel Yap

    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.

    • http://massfacebookfans.com/ buy cheap facebook fans

      agreed with u mate

  • http://www.vacationbrokenbowlake.com/ broken bow lake

    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

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

    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

    Thank you so much, works great !!!

  • Bijusubhash

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

  • http://www.keluarganobel.com Natalia Ina

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

  • http://cellphonetrackers.org Cell phone tracker

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

  • lenababe

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

    • http://www.ruhanirabin.com/ Ruhani Rabin

      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.

  • http://www.budiey.com Budiey

    nice

  • http://electricscootersforadultsreview.com electric scooters for adults

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

  • http://www.iwannawatch.net/ Jeck Denial

    thanx mate you just solve my problem.

    Like!

  • http://justteknologi.wordpress.com/ eddy

    Thanks ?

  • http://www.amenshairstyles2011.com/up-do-hairstyles-%E2%80%93-casual-and-elegant-look-for-stylish-women/ Up Do Hairstyles

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

  • http://www.apromdressesunder100.com/cheap-prom-dresses-under-50-%E2%80%93-inexpensive-but-chic/ Cheap Formal Dresses

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

  • Örsan

    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

    • http://www.ruhanirabin.com/ Ruhani Rabin

      I think you need to adjust the height to 60px

  • http://erikajonesblog.com Erika Jones

    Great tips! Thanks for posting and sharing! :)

  • adenkthebasterd

    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.

    • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://twitter.com/MsAlisCakePops Alicia Hansen

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

  • Virgiltu

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

  • Mr.M

    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?

    • http://www.ruhanirabin.com/ Ruhani Rabin

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

      • Mr.M

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

  • Rai Hina

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

    • http://www.ruhanirabin.com/ Ruhani Rabin

      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

    grea thanks

  • Kamran Web

    thanks

  • Arben H

    Thank you so much. kiss from Albania :))

  • Webinnovacio

    a huge thanks from Hungary!

  • http://webend.in Jaspreet Singh

    Thank you very much. great help

  • http://www.entrepreneursstartup.com entrepreneurs startup

    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

  • http://www.moldremediationremoval.com Mold Removal

    Interesting article and nice blog you have too!

  • Daniel

    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.

  • http://www.exocar.net exotic car gallery

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

  • toeying

    Brilliant…worked like a charm..thanks

  • Depk1990

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

  • http://www.stylishandtrendy.com/ Dev @ Women Magazine

    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?

    • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://twitter.com/khaidirstudios khaidirstudios

    @Ruhani Rabin,
    Thank you for your useful post.

  • http://www.prowordpress.net/ Premium Wordpress

    Thanks your great code

  • http://paramountessays.com Dan essays

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

  • http://twitter.com/prashanth284 Prashanth R

    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

  • http://www.thomaspaylor.com/agel-scam Agel Scam

    Wicked, just added to my wordpress blog

  • http://www.ptec.co PTEC

    Thank you for your useful post

  • http://www.site2you.com/ Sammy The Site Builder

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

  • http://pulse.yahoo.com/_YFSJMMGAIQPJNQIVQJLEH4TZLM mheo

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

  • http://samedayessay.com/ Essay Writing

    Great post
    Thanks for this tutorial.

  • http://whatmattersrightnow.com Tisha

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

  • http://www.flicksandbits.com dee8

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

  • Chesley

    THANK YOU for this!

  • R_loredana

    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!

    • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • Ori

    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!

  • http://www.fastfacebookfans.com Buy Facebook Fans

    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.

  • http://www.gmtpowerpress.com Powerpress

    hi thank to giving a nice tips

  • http://twitter.com/inkatechnology Inka Technology UK

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

  • http://indijobs.in/ Indijobs

    Thanks for sharing I will implement it

  • knockoff handbags

    good bags

  • http://www.callejasharrisoninfinitydownline.com Callejas Harrison

    nice

  • http://www.shoutmeloud.com/ Harsh Agrawal

    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

    Thanks mate

  • http://www.directorysubmissionservices.net Nick

    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

    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/

  • http://www.workwithcherry.com/ Cherry Rahtu

    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.

  • http://www.nervemetal.com/ Virgil Anthony Warren

    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.

  • http://www.tikrasisPasaulis.eu Info

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

  • http://www.socialfactory.net Facebook Apps

    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

    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

  • http://www.thegirlinthecafe.com thegirlinthecafe

    Thanks a lot for this, very useful!

  • http://www.gl3nnx.net GLenn

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

  • http://smsformobile.in Sms for Mobile

    Wonderfull post contains great usefull information thanks for it

  • http://nicekicks.com Matt Halfhill

    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!

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://twitter.com/VIDEOLINKXREVEW Ronald Lejeune

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

    http://videolinkx.com

  • Steve Patterson

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

  • Steve Patterson
  • Craig

    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 ;)

  • http://www.discount-louis-vuitton.com louis vuitton handbags

    “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

    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

    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

    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.

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://friendfeed.com/jamoore J Moore

    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

    useful article

    Thanks a lot

  • http://freestuff.co.uk Nick

    Works a treat, thanks very much :)

  • http://www.wemogo.com/ Aahna

    thanks its working on my site now…

  • Deb

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

  • http://hpguru.net hpguru

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

  • http://www.jankz.com Min

    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

  • http://www.google.com/profiles/techiezine Mark

    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?

  • http://www.nike-air-force-one.com air force one shoes

    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!

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://www.awebguy.com Mark Aaron Murnahan

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

  • http://www.awebguy.com Mark Aaron Murnahan

    I am blushing now. :-D

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

  • http://www.awebguy.com Mark Aaron Murnahan

    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.

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • arthurcharlesvanwyk

    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

  • http://www.ruhanirabin.com/ Ruhani Rabin

    Thanks Mark!! Spot on =)

  • http://www.awebguy.com Mark Aaron Murnahan

    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

    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

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

  • http://www.specialstories.net/ award winning children's books

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

  • http://www.laptopbatteriesinc.com/Replacement-acer-laptop-battery_c1 good batteries

    good article!I love it
    Laptop Batteries

  • http://dresramblings.com Andre Natta

    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!

  • http://ahyen.com jianchung

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

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://blog.bottomlessinc.com Bottomless

    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.

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://www.janapuri.net Kiko

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

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://www.workwithcherry.com/ Cherry Rahtu

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

  • http://www.janapuri.net Kiko

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

  • http://tech18.com/ Sunil Jain

    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 :) :)

  • http://www.ruhanirabin.com/ Ruhani Rabin

    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

  • http://photos.rickscheibner.net Rick

    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.

  • http://www.ruhanirabin.com/ Ruhani Rabin

    Thanks bro!! =)

  • http://www.bloggodown.com gautamhans

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

  • http://twitter.com/jreyes Javier Reyes

    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

  • http://www.awebguy.com Mark Aaron Murnahan

    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.

    • http://www.ruhanirabin.com/ Ruhani Rabin

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

      • http://www.awebguy.com Mark Aaron Murnahan

        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

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

  • http://www.ruhanirabin.com/ Ruhani Rabin

    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

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://blog.bottomlessinc.com PlF

    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)

  • http://www.intentionalCaregiver.com Shelley

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

  • http://www.awebguy.com Mark Aaron Murnahan

    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

    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.

  • http://www.awebguy.com Mark Aaron Murnahan

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

  • http://fitho.in/ Fitho Dev

    thanks, this was really helpful

  • http://www.jasonfweb.com/ jasonfweb

    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 ;)

    • http://www.ruhanirabin.com/ Ruhani Rabin

      I just tested your site and it is working :)

      • http://www.jasonfweb.com/ jasonfweb

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

  • Nicolas

    Thank you very much for promoting!

  • toddlopez

    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…?

  • http://www.ruhanirabin.com/ Ruhani Rabin

    You've been added into the resources

  • http://twitter.com/sonicblink Sonic Blink

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

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://www.ruhanirabin.com/ Ruhani Rabin

    Nicely done !! =)

  • http://blog.patyuen.com Pat Yuen

    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

    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.

  • http://www.kouguu.net Nicolas

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

  • http://www.jasonfweb.com/ jasonfweb

    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

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

  • http://thewellrunsite.com Michael Johnston

    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

  • http://www.faqpal.com Pliggs

    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.

  • http://www.ruhanirabin.com/ Ruhani Rabin

    yeap mine is set to show_faces=false

  • http://www.faqpal.com Pliggs

    I like it just below the title and meta information.

  • http://www.faqpal.com Pliggs

    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?

  • http://www.ruhanirabin.com/ Ruhani Rabin

    show_faces=false not show_faces:false

  • http://www.faqpal.com Pliggs

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

  • http://www.ruhanirabin.com/ Ruhani Rabin

    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!

  • http://www.faqpal.com Pliggs

    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

    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

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://ustandout.com Diana Freedman

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

  • http://www.italal.com Talal

    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?

  • http://www.c28.com aaron

    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…

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://www.ruhanirabin.com/ Ruhani Rabin

    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

  • http://www.italal.com Talal

    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

  • http://www.ruhanirabin.com/ Ruhani Rabin

    Let me check again! Thanks by the way :)

  • http://twitter.com/ack154 Allan Kintz

    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!

  • http://www.ringrocker.com Christian

    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?

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://www.ringrocker.com Christian

    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

  • http://www.alteragroup.net Jay O'Hare

    Thanks for posting – works well.

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://www.bitpop.co.uk Bitpop

    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

  • http://www.ruhanirabin.com/ Ruhani Rabin

    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>image:
    LinkedIn] <http://my.linkedin.com/in/ruhanirabin>image:
    Flickr]<http://www.flickr.com/photos/neoblitz/>image:
    Twitter] <http://twitter.com/ruhanirabin>image: Blog
    RSS]<http://feeds.feedburner.com/ruhanirabin>image:
    Blog RSS] <http://feeds.feedburner.com/f22in>image:
    Friendster]<http://www.friendster.com/ruhanirabin>image:
    Google] <http://www.google.com/profiles/ruhani.rabin>im
    devianArt]<http://ruhanirabin.deviantart.com/&gt;
    IM: [image: Google Talk/]ruhani.rabin [image: Skype/]ruhani.rabin [image:
    MSN/]ruhanir [image: BlackBerry Messenger/]2190E5D5

  • http://johnhaydon.com John Haydon

    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

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • TiPo

    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.

  • http://www.ruhanirabin.com/ Ruhani Rabin

    Glad it helped! =)

  • TiPo

    I already did!
    still the same trouble :S

  • http://www.ruhanirabin.com/ Ruhani Rabin

    Just copy paste this code should be able to work!

  • TiPo

    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?

  • http://twitter.com/jamesdclarke James D Clarke

    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!

  • http://profiles.yahoo.com/u/ZJ6MV2CDWGW6KTEBH5M4WJVXTY baardoa

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

  • toddlopez

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

    • http://www.ruhanirabin.com/ Ruhani Rabin

      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

        OK thanks for looking into it!

      • Anonymous

        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

      • http://www.ruhanirabin.com/ Ruhani Rabin

        What type of error you have!?

      • Anonymous

        Just a red error pops up next to the button

      • http://themovingarts.com Eric

        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.

      • http://www.ruhanirabin.com/ Ruhani Rabin

        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

      • http://themovingarts.com Eric

        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?

      • http://www.ruhanirabin.com/ Ruhani Rabin

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

      • http://themovingarts.com Eric

        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 :(

      • http://www.ruhanirabin.com/ Ruhani Rabin

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

      • http://themovingarts.com Eric

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

      • http://www.ruhanirabin.com/ Ruhani Rabin

        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…

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://creative-order.com Todd
  • http://www.ruhanirabin.com/ Ruhani Rabin

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

  • http://creative-order.com Todd

    <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” />

  • http://www.ruhanirabin.com/ Ruhani Rabin

    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

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

  • http://www.ruhanirabin.com/ Ruhani Rabin

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

    • http://themovingarts.com Eric

      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?

      • http://www.ruhanirabin.com/ Ruhani Rabin

        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

      • http://themovingarts.com Eric

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

  • http://profiles.yahoo.com/u/ZJ6MV2CDWGW6KTEBH5M4WJVXTY baardoa

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