How To Add the Facebook ‘Like’ Button to Your Blog

by Jerod Morris on April 30, 2010

Post image for How To Add the Facebook ‘Like’ Button to Your Blog

As part of its quest to rival Google in dominating Al Gore’s little creation that we all know and love, Facebook has introduced a new way for web publishers to encourage readers to share content.

Facebook’s new “Like” button, officially released just last week, will soon become a ubiquitously used tool on pretty much every website that isn’t hosted by GeoCities.

Case in point: I am the guy who published this post on his sports blog…and who just this morning added the “Like” button to that very same sports blog.

Oh Facebook, you dastardly, craven, necessary little evil you.

Anyway, if you don’t mind selling off a tiny little piece of your soul for increased exposure (as I obviously didn’t), this post quickly details a few steps for adding the “Like” button to your own site.

add-facebook-like-button

What are you waiting for? Help Mark Zuckerberg and Facebook get one step closer to Total Web Domination with the Like button!

Image source: IdeaGrove.com

Add Facebook “Like” Button to WP Using Plugin

As you can see if you glance down at the bottom of this page, the Facebook “Like” button is now a part of H2B. How did I do it? Why through the heavenly alchemy of a plugin of course!

There seem to be more than a few out there, but the first one I tried worked so I didn’t investigate them all. The one I used is called “Facebook Like Plugin for WordPress” and was written by Ahmed the Greek.

This plugin provides options for where you want the “Like” button, whether you want it to say “Like” or “Recommend”, how wide you want it, and a few others. It is clean, simple, and allowed me to get the button up in a matter of minutes.

One note: Pay attention to where the button ends up on your home page. It will auto-insert itself into posts on the homepage that have more than just the excerpt (see the H2B homepage). With one setting it inserted it right into the middle of the text, so I had to tweak it a bit.

Add Facebook “Like” Button to WP Using Code

If you like to minimize the amount of plugins you use (never a bad idea), then you can add code directly to the single.php file of your theme. This is how I added the Facebook “Like” button to Midwest Sports Fans.

Thanks to this site’s quick lesson on adding the Facebook “Like” button, I easily found the code I needed. Here it is:

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

Depending on where you want your button, take that code and copy paste somewhere before or after you see this: <?php the_content(); ?>

If you go directly to Facebook to get this code, it can be a bit confusing. I won’t even link you there because all you need is above. The author rewrote the iframe code to be compatible with WordPress and to work for each individual post you publish.

Besides, if I directed you to Facebook, you’d just end up leaving the page five minutes later confused and probably the victim of identity theft. There’s no need for that.

Add Facebook “Like” Button to non-WP Blog Using Code

If you are a non-WordPress user, here are a few sites to help you out that will know much more about this than we will:

If you are a Drupal user, I couldn’t find a perfect link. Try this one, but hopefully there are some updates to the code soon.

Hopefully you found what you were looking for. Now please make it all worth my while and like the post using the nifty little button you see below. I’m sure that person from your high school geometry class that you are friends with but haven’t talked to in 15 years will appreciate it.

{ 2 comments… read them below or add one }

Bottomless April 30, 2010 at 2:36 pm

Here’s the WordPress plugin:
http://wordpress.org/extend/plugins/like

Reply

Jerod Morris May 7, 2010 at 8:10 am

Thanks!

Reply

Leave a Comment

Previous post:

Next post: