Feature
Post

Category
Code


Add A Facebook Like Button To Your WordPress Theme In 5 Minutes

Blog visitors don’t always want to leave comments- which explains why the Facebook “Like” button has become so popular. Who needs to type? By simply clicking a little thumbs-up button, you not only announce to the world that you appreciate something, you get to track it on your Facebook account and share it with all your friends.

For WordPress users, adding a Like button to your existing blog is as simple as installing and activating one of the available plug-ins. For WordPress theme authors, here’s how to integrate Like buttons into your theme:

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

Add this to the bottom of your theme’s single.php template- and wherever else you want it to show up- and you’re good to go.

Here’s a quick explanation of what’s going on here:

iframe :
Yes, you’re embedding an iframe (remember frames?) in your page.

http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?> :
Here, you’re calling up the Facebook like plug-in, and referencing the permalink of the current page or post you’re on.

&layout=standard&show_faces=true :
These are styles, which you can make changes to if you wish.

Do you use the Facebook Like button?


  1. By Adam Norwood posted on May 3, 2010 at 9:52 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    What timing! I just did this for a client a few days ago. I used urlencode(get_permalink()) though. Wouldn’t the_permalink() by itself generate an invalid query parameter for the Facebook URL? Or is urlencode overkill in this case?

  2. By Lorraine Nepomuceno posted on May 4, 2010 at 12:39 am
    Want an avatar? Get a gravatar! • You can link to this comment

    @Adam, thanks for your comment. I haven’t had any trouble using just the_permalink in my WP themes.

  3. By Bottomless posted on May 4, 2010 at 6:13 am
    Want an avatar? Get a gravatar! • You can link to this comment

    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.

  4. By Website Design posted on May 4, 2010 at 1:53 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Please webmasters protect the identity of your users and do not place ‘like’ buttons on your website.

  5. By James Lee posted on May 20, 2010 at 12:24 am
    Want an avatar? Get a gravatar! • You can link to this comment

    All, try out http://www.stiqr.com to easily place the facebook like button to your site. Do it in an easy and free roaming drag and drop interface, anywhere on your site.

    Here’s a short video demonstrating how Stiqr works.
    http://www.youtube.com/watch?v=B-ff53t8TuU

  6. TrackbackKako da dodate Facebook „Like“ na WordPress blog | Adria BlogHOW TO: Add Facebook “Like” Buttons to Your WordPress Blog « Black & White NotesHOW TO: Add Facebook “Like” Buttons to Your WordPress Blog |Jackie TulosHOW TO: Add Facebook “Like” Buttons to Your WordPress Blog