Home Blogging Blogging Tips How to add Facebook Like button widget on WordPress posts

How to add Facebook Like button widget on WordPress posts

Facebook Like Widget

Just found out that you can now add Facebook “Like” button widget on our own web pages or even blog posts just now. Facebook “Like” is a new phenomenon and it’s simple yet attract you to click the button whenever you like a friend’s post.

Facebook only gives you the code on a single URL but what if you have a blog and you want to add the Facebook Like widget code on every post? Here is how.

How to add Facebook Like widget on WordPress blog posts

  1. Go to Facebook Like Button social plugins page
  2. Choose the button style, etc at the bottom of the page, also enter your own blog’s URL
    Add Facebook Like to WordPress
  3. Click on the “Get Code” button and Facebook will generate the codes for you to copy paste on your blog’s theme file.
  4. Paste the code to your blog’s theme file (single.php) or where ever you want it to appear.
  5. Inside the codes, you’ll find a reference to href (the URL) – mine is www.cravingtech.com but yours will show your own blog’s URL:
    <iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.cravingtech.com&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:px”></iframe>
  6. Change the href=…… to WordPress’ magic dynamic URL code:
    <iframe src=”http://www.facebook.com/plugins/like.php?href=<?php urlencode(the_permalink()); ?> &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:px”></iframe>
  7. Save your theme file and you’re done!

You should then see the Facebook Like button on every blog post you have like this:

Facebook Like  at the bottom of wordpress blog post

I add some &nbsp; (spaces) before the button code but it’s entirely up to you. Now, if someone logs in to Facebook and clicks on the Like button, it will appear on his/her Facebook profile like this:

Facebook Like History

It will also have the right URL straight to the blog post. If you think that this tutorial is great and you like it, why don’t you click on the Like button below? I know you want to  ;)

UPDATE: It seems that the Like button only works once? Nothing happens on my Facebook when I tried to Like the second post (this one)

UPDATE: Why go the hard way if you can just install a plug-in and change the settings there?  Facebok Like WordPress plug-in.