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

Advertisement

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

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