Facebook Like button in WordPress

Adding Facebook like buttons to your WordPress based blogWith the enormous userbase on Facebook, the new “Like buttons” from Facebook is also something you should consider for your WordPress based blog.

There are already plugins that can insert Like buttons on your blog, but since the implementation is very easy, including a plugin for this limited amount of functionality sounds like overkill to me.

Why implement a Like button

The like buttons from Facebook can be a very effective way of promoting your blog.

When a user clicks on the Like button two interesting things happens:

  • A update is added to the users Facebook wall, saying that the user likes the post (including a link to the post)
  • If some of the users Facebook connections visits the post,  they can see that the user likes the post, and therefore maybe has a more positive attitude towards the post.

Facebook Like buttons can be implemented either as a iframe or by javascript, but please be aware, that the integration towards Facebook requires an area of 450px width, so you should consider where you have space for this before starting the implementation.

Like button – iframe

The simplest way of implementing the Like button is by using a iframe.

The iframe below is optimized for WordPress, as it dynamically inserts the permalink to the current page as the page to bookmark on Facebook.

To install the Like button as a iframe,  go to “Appearance->Editor” and select the page where you want to insert the button. Typically you want to insert the button on the single post template: “single.php”

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

Like button – XFBML

If you’re using the Facebook javascript API, you can also implement the like button through XFBML.

You identify the WordPress templates where you want to implement the Like button, tha same way as with the ifrme, but you just need to add the following code where you want teh button to appear:


<fb:like href="<?php the_permalink() ?>"></fb:like>

The XFBML has a few advantages compared to the iframe:

  • The XFBML version allows users to add a comment to their like as it is posted back to Facebook.
  • The XFBML version also dynamically sizes its height; for example, if there are no profile pictures to display, the plugin will only be tall enough for the button itself

Conclusion

As you can see, adding the new Facebook Like buttons to your WordPress based blog is very simple.

If you’re already using the Facebook javascript API, the XFBML sounds like the obvious implementation method, but if you want to test how it works the iframe can be a quick-and-dirty way of gettign started.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

Trackbacks for this post

  1. Open Graph enable your WordPress blog | Tips4PHP
  2. Sådan får du Like-knap på din blog | JLAB

Comments are now closed for this article.