How To Add Facebook Like Button To WordPress

Facebook Like Button in WordPress
Facebook Like Button in WordPress

I love Like/Vote/Digg buttons. They are amazing when it comes to spread out your stories in social media. Since I hooked up to WordPress I’ve been experimenting with various social media plugins but none are perfect and I always keep looking for something new and better ones.

The first social bookmarking plugin, which I used to use and which lasted for quite a few years, was sociable. It was good, it was easy to use and you could select which social bookmarking icons do you want to display. However there was one problem with sociable plugin. It didn’t show count.

The next plugin which I experimented with was digg digg. It’s look was awesome. Digg Digg copied Mashable’s style to WordPress.  The problem with digg digg is that it doesn’t work. It is slow, damn slow to be honest and brings down your blog. So I’ve to bury this plugin as well.

Having fed up with the plugins I finally decided to hard code the social media buttons so that it doesn’t slow down blog and also gives me complete flexibility in display.

The first like button which I nailed down was Facebook like button.

I was surprised to discover that it is so simple to add facebook like button in WordPress blog.

Here is the code for facebook like button.

[php]<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"> </iframe>[/php]

You can copy above code in the post loop in single post, page or home page. I prefer to have it only in the single posts.

You can see it live in action on Tennis blog, see it on single post – Maria Sharapova’s Profile

How and where to add the above code.

From WordPress Admin -> Theme Editor

Look for single.php in right colum, click on the link and it will open file to edit.

Search for following line

[php]<?php if (have_posts()) : while (have_posts()) : the_post(); ?>[/php]

Paste the facebook button code below this line where you want to make it appear.

Customization of facebook button

For the customization of facebok like button check out Facebook Like button.


Comments

29 responses to “How To Add Facebook Like Button To WordPress”

  1. Sorry could you let me know where exactly I need to add this code? I’m not wordpress expert and I’ve no clue what you are talking about.

    1. Updated to include instructions on where to add code.

  2. Maria Sharapova looks gorgeous …

    1. lol,
      Did u come for the facebook button or for Maria?

  3. Brilliant!!
    I didn’t know that is so simple to add facebook like button in wordpress. I was using plugin for this.

    1. I also started with plugins, some worked some where pain, some just slowed down. Finally decided to dump them and use the code directly. Now I’ve full control over it and it also saves a lot of bandwidth.

  4. Rishabh Avatar

    Paji how did you add twitter button? Mind sharing it?

    1. Puttar, that will be in next post.

      1. Kirsten Avatar
        Kirsten

        Ajay, just coming across your site during a search for this information. Great info, but I can’t find where you explain how to get Facebook, Twitter, Digg and Stumpleon all together. Thanks!

        1. Tx Kristen,
          Didn’t get time, I’ll try to add them soon.

  5. Avril-Maud Avatar
    Avril-Maud

    Hey- I followed your steps but I ran into a problem when I realised that I was already using the Facebook Fan box on one of my pages and therefore in the list of plugins the only option was to deactivate-

    Is there anyway for me to alter my fanbox so that I can have it on multiple pages?

    Please let me know!
    Thanks

    1. Hi Avril,
      I don’t see any problem with Facebook fan box and facebook like button co-existing on same pages.

      On this very blog you can see example. See the right column where you will find facebook fanbox and on the single pages below title the facebook like button.

      Did I miss something?

  6. CHARLES Avatar

    AJay
    i heard its not possible to put the FB like button on teh **homepage** of a WordPress blog, but only on posts and other pages. is this true? plz help

    Charles

    1. Why not? You can add facebook like code on any page irrespective of the CMS you are using. WordPress is no difference.

      Try it and let me know if you face any problems.

  7. Green Stickman Avatar
    Green Stickman

    Great post! If you may allow, I also made a detailed images on how to add a facebook like button.
    Here’s the URL:

    gayward-concepts.com/how-to-add-a-facebook-like-button/

    More power to your site! :)

  8. Patrick Avatar
    Patrick

    Hey would you mind posting your code for your entire social bar? I really like the looks of it, and I’m trying to get rid of digg digg, its way too slow.

    1. Will do one day. Right now feeling lazy ;)
      My code is heavily customized, will post it soon. Right now I’m in the process of discovering the best ways to show as many icons as possible. Once it is stabilized I’ll post it to the public.

  9. Suzen Pettit Avatar
    Suzen Pettit

    Could you tell me what version WordPress this will work for ? I have version 3.0.1,

    thanks

    1. This code is independent of WordPress version.

  10. You’d be surprised how hard it was to find the simple “Like” button that this post describes how to create. It worked perfectly. Best code I’ve seen for this yet. Thanks Ajay!

    1. That’s so true Sam, specially with new things.
      I’m glad that my post helped you.

  11. This is such a great site, and thanks for the information. :) The only problem I’m consistently having is that the like button only shows up when the actual post itself is clicked on. When the blog first comes up, the button is not there. So many people won’t click on the individual posts and so won’t have the chance to even see the button. Is there a way around this? Thanks again for all your help.

    1. Not sure if I’ve seen this problem.
      The solution is that you like it first to get it started ;)
      Whenever I add any new post I make sure that I like/vote/etc on all the social bookmarking icon.

      However I’ll keep an eye and if I come across any such problem then I’ll try to find a solution.

  12. leeryda Avatar

    thanks a million Ajay. this really helped. will love tofind out how to add the entire spectrum of social buttons (twitter, digg, +1 etc)

    1. coming soon, just keep tuned.

  13. GB-World.net Avatar
    GB-World.net

    Hello everybody.

    You can also give my WordPress-Plugin a try: Like-Button-Plugin-For-Wordpress (gb-world.net/projects/like-button-plugin-for-wordpress). It offers a variaty of Social Tools, Settings and Modifications for your Blog and the most common Social Buttons.

    It will contain a Evernote and Reddit Button soon. So stay in touch and never miss the chance again to be up2date with your Social Buttons for your Blog.

    Enjoy your day.

    1. Not-Another-Social-Plugin plz. We already have tons of them and it all makes us more confused. This was the reason that I decided not to use any of those plugins and use the code directly.

  14. Edward O'Daniel Avatar
    Edward O’Daniel

    I have been developing a new blog and working on a customized theme. I have placed several social share buttons on each post very similar to how you have suggested here.

  15. HI IS THIS TRUE OR NOT ME ALSO GET INSTANT MASSAGE BY SHELL

Leave a Reply

Your email address will not be published. Required fields are marked *