How to Add the Facebook Like Button to WordPress Blogs

Today, Facebook officially released its social plugins as part of its world domination plans. Now you can like every page on the internet and share it on Facebook. For website owners, it can be a great source of traffic.

This tutorial will show you how to add the Facebook Like Button to your WordPress Blog.

Go to http://developers.facebook.com/plugins

Select the Like Button Plugin – http://developers.facebook.com/docs/reference/plugins/like

Customize the button as you want –

Select the layout, width, font etc and click on Get Code. Keep the dummy URL as it is – http://developers.facebook.com/

For static pages, you can directly enter the URL and get the code.

If you have a WordPress blog, you can get dynamically generate Like buttons for every page without having to generate new code every time.

The sample code for my blog is

<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.pathikshah.com%2F&amp;layout=button_count&amp; show_faces=false&amp; width=450&amp; action=like&amp; font=trebuchet+ms&amp; colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:450px; height:px”></iframe>

Replace the blog URL with

<?php_the_permalink();?>

Just copy this code if you want –

<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php_the_permalink();?>&amp; layout=button_count&amp;show_faces=false&amp; width=450&amp; action=like&amp; font=trebuchet+ms&amp; colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:450px; height:px”></iframe>

This will automatically create Facebook Like buttons for every page of your blog. Just place this code in your sidebar or on single.php of your WordPress theme.

This is the code I added on single.php just below the page title.

<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php the_permalink();?>;&amp ;layout=button_count&amp; show_faces=false&amp; width=80&amp;action=like&amp; font=trebuchet+ms &amp; colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:80px; height:20px”></iframe>

Just tinker with the code and add it to your blog. If you have any doubts, leave a comment.

Also read...

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>