diy niche building toolsrankspanker serviceniche basic

How to Add a Facebook Like Button to WordPress Posts

Unless you live under a rock… OK, a really BIG rock… you have a Facebook account (or 12 a bunch of fan pages) and have set out to either reconnect with old friends or build a network of followers around your business / website.

Do You Like this Site – Prove it, Be a Friend!

Facebook Taking Over the World!

Yesterday, Facebook shook the branches of the Google Tree, and announced that it was going to take over the world! Well, the Internet world anyhow.

To people like you and I, it means that we need to make our content easier for people to share on Facebook if we want to ride the wave. You will notice that I added a “Facebook [Like] Button” to the bottom of every page of this site and it’s connected into the WordPress code, to add the specific page URL for visitors to share.

Adding the Facebook Like Button to WordPress

When I decided to add the facebook “Like” button, the last thing I wanted was another plugin! As I have been working on Speeding up WordPress, I found that plugins are the biggest hog of resources… so instead of another one, I chose to just add code!

The process is actually very simple:

  1. Get the iFrame code from the Facebook like button generator.
  2. Paste it into the single.php theme file where you want the like button to appear.
  3. Replace the http URL with your permalink code from WordPress
  4. Save…
  5. Test

1 – Get the Code or copy it here

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

2 – Open the single.php file (Some themes use the index.php for this) within your theme folder, find where you want the button to show, and paste it! I would suggest placing it AFTER <the_content> code, so a visitor can read your page, then like it! :-) Exact placement is going to be different on every site, based on your theme.

3 – in the iFrame code, Replace:

  • This: http%3A%2F%2Fdevelopers.facebook.com%2F
  • With: <?php echo urlencode(get_permalink()); ?>

4 – Save

5 – Visit one of your single posts on the site and test it.

Do The Same for Pages

You can do this same thing to all your pages as well if you choose. Instead of opening the single.php or index.php, just go into your page.php file and set the code in place there.

Did you like this article? Why not test my “Like” button below? :-)

Previously Published Articles You May Like to Read:

Rate This Post

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading ... Loading ...

About the Author, Mark Hansen

has written 573 article(s) at the Niche Store Builder site.

I have been doing my part to "Build the Internet" since 1994, when I built my first website! Since then, I have built hundreds of niche websites for myself and many others, focused on design, applications, ecommerce, search optimization and internet marketing. 

Latest Readers Who Commented on This Article

8 Comments »

  • ERic said:

    Great Tip! Dead simple and easy! Thanks! *liked*

    Reply – Quote
    # 23 April 2010 at 8:14 am
  • Rochelle said:

    Just an FYI regarding Mark’s comment that reads, “…you have a Facebook account (or 12)…”
    be aware that per Facebook’s TOS, you may only have one account. If they catch wind of someone having multiple accounts, they may terminate all accounts for that person.

    This is under #4 at http://www.facebook.com/terms.php

    And now, back to your regularly scheduled program. Take it away, Mark…

    Reply – Quote
    # 23 April 2010 at 9:54 am
  • Mark Hansen (author) said:

    @Rochelle – I only have 1 “personal” facebook account Rochelle… but I do have several “fan pages or groups” for different webs or businesses I have every intent of keeping.

    I guess I should have said that differently…

    M

    Reply – Quote
    # 23 April 2010 at 10:23 am
  • Brad said:

    Mark

    I “Like” this. I had to add a 40 in for the pixel height to make it look good. Otherwise it was just a big empty space after the Like button.

    Reply – Quote
    # 23 April 2010 at 11:28 am
  • Mark Hansen (author) said:

    Good point Brad! I made the change myself…

    Reply – Quote
    # 23 April 2010 at 11:38 am
  • Anand Srinivasan said:

    I had the same issue as Brad…Thanks Mark for the post..I had been unsuccessfully trying it yesterday. Now I realize I had been using the_permalink(); instead of the echo function..

    Reply – Quote
    # 23 April 2010 at 12:20 pm
  • PlF said:

    Here’s a widget that will add the new Like button automatically at the top and/or bottom of your posts, so you don’t have any programming or copy pasting to do:

    Facebook Like WordPress Plugin

    Feedbacks appreciated on this blog post while waiting for WordPress to approve it and move it to the directory.

    (the blog actually uses it so you can test the plugin live before installing)

    Reply – Quote
    # 23 April 2010 at 11:53 pm
  • Bottomless said:

    The plugin is now hosted by WordPress:
    http://wordpress.org/extend/plugins/like

    Reply – Quote
    # 5 May 2010 at 3:19 am