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&layout=button_count& show_faces=false& width=450& action=like& font=trebuchet+ms& 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();?>& layout=button_count&show_faces=false& width=450& action=like& font=trebuchet+ms& 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();?>;& ;layout=button_count& show_faces=false& width=80&action=like& font=trebuchet+ms & 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.
April 22nd, 2010 at 1:30 pm
Sirji, where is the like button here, i want to like your posts
April 22nd, 2010 at 5:47 pm
How do I use this like button for any page on my site – not wordpress? What is the code to reference to current url so that I can place this code in my template and all my webpages will have the like button.
April 22nd, 2010 at 6:19 pm
If you have static HTML pages, you can’t automatically generate permalinks for all your pages.
If not, find a way to generate permalinks using PHP and replace the static URL with that.
Try this
http://www.webcheatsheet.com/php/get_current_page_url.php
April 23rd, 2010 at 5:15 pm
[...] http://www.pathikshah.com/blog/how-to-add-the-facebook-like-button-to-wordpress-blog/ http://www.webcheatsheet.com/php/get_current_page_url.php [...]
April 24th, 2010 at 4:20 am
We take the opportunity of this blog post to inform everyone about our effort to create a steady and fair environment for Facebook users. As you may already know Facebook Accounts are SUSPENDED with geometrical progress. We started a petition against this policy and we ask to unite your voice with ours to create the proper attention and rectify this issue with Facebook admins. Current editors at various magazines want to see that there is a certain interest before they create articles to their websites and/or magazines. To all visitors and to blog owner we ask to support our petition here : http://FacebookDisabled.me (redirects to petitionspot) – Twitter : http://twitter.com/facebookpetitio . Thanks everyone for this time !!
April 25th, 2010 at 10:26 am
Here’s the Facebook Like button plugin available from WordPress:
http://wordpress.org/extend/plugins/like
No coding necessary, you can customize the look and placement of the button in the settings interface