Questions? Feedback? powered by Olark live chat software

Adding the Facebook Like Button To Your Site

Note: There have been some updates since I published this post so I give more current and specific information in this post: Adding the Facebook Like Button Revisited

Some pretty big changes are brewing over at Facebook and I’m working on a full coverage type of piece, but for today I wanted to jump in and cover one little change that makes some sense for you to consider right now.

Mark Zuckerberg FacebookFacebook has changed the idea of becoming a fan to something a little less committed – Like. Now you can like or recommend a fan page to your friends. The net effect is the same as your choice to like something is noted on your wall.

The big change is that Facebook wants you to start sharing your likes from anywhere on the web. Look for web publishers to start installing the FB like button on web sites, blog posts and in reference to individual items and products.

The video below gives an overview of the Like button installation process. You can use the FB tool easily get started or, if you know a little HTML and FBML you can do a fair amount of integration.

I’ve installed both the Like Box (over in the right sidebar) and the Like Button (in each post)

The code that is generated from the FB like tool gives you some flexibility but will only link to the page you give it. If you want to add a button as I have in each post you need to edit the code URL to include the WordPress < ?php the_permalink() ?> code for each individual post.

You can control some of what’s shown on a person’s wall when they click the like button by adding meta data to your page headers. Facebook is using the emerging Open Graph protocol to help this along.

The image below is another implementation of the Like button related to a specific product. In this case the format include pictures and details about who likes the product.

Update: To add the Like button to every post on a WordPress blog, as I’ve done here, open up your index.php and single.php files in the editor and add the code below to install the button. Add it above or below your post content depending on your preference.


This is the code you get from the Facebook Like button tool with the WP permalink added.

Image credit: Mark Zuckerberg – World Economic Forum

Don't miss a single word!
Complete the form and we will send you articles just like this every week.

  • http://blogmidwestlabs.com Brent Pohlman

    John

    Great Post! – How did you add the code in WordPress to come up in every post. This person

    http://www.ruhanirabin.com/how-to-add-facebook-

    suggests changing a .php file. I don't think that is what you did. Can you let me know where in WordPress to add it.

  • http://twitter.com/photoseo Zach Prez

    Thanks for this tip. In 5 minutes I was up and running with the Like button on my Thesis theme with help from http://thewellrunsite.com/2010/04/22/adding-a-f…. Now we'll see how usage compares to the retweet button.

    @Brent – probably not how he got the Like to appear on the right side, but there is also a Like button at the top of the post, just under the headline. That is the one you place using the .php file.

  • treymarkel

    John

    Thanks for the advice. I have another question for you. If you have under 100 followers how do you promote your fan page if you aren't allowed a custom Facebook link?

  • treymarkel

    I have a cold fusion blog and I tried putting the like button code into the HTML of one of my posts and it doesnt seem to be working. Does this like button only work for PHP platforms? I tried going to the developers facebook page to put in a URL so I can get the code and every time I push the “Get Code button it comes back and says “Page Not Found” Any thoughts?

    Trey

  • http://www.ducttapemarketing.com/blog ducttape

    Take the long, ugly URL to a shortening link by getting an account at bit.ly and creating something that's good for your brand like bit.ly/yourbizname then when you get your custom name it will default to it and it won't be so hard to change it.

  • http://blogmidwestlabs.com Brent Pohlman

    Thanks John! Unfortunately, I use Headway Theme and I have contacted the owner to see if there is a way to do this with this theme. Thanks for the additional information I will refer my friends to your site. Its really very useful information. Brent

  • http://twitter.com/MeeganWeaver Meegan Weaver

    Im not real familar with code but I added it into the the index php and the single php and i did a test post to see if it would come up.. it was something really weird! I have a prophoto theme…. any suggestions??

  • http://www.mikestenger.com Mike Stenger

    I'm really “liking” the new like buttons over at Facebook. Had one added on my posts but decided to remove that as I don't want to confuse it with the like button in the sidebar which is for my fan page.

    Either way, the like box is a much better way to get others to become a part of your page. Makes it easy in 1 simple step.

  • http://www.mikestenger.com Mike Stenger

    Hey Trey, I was gonna say that Facebook now has it to where you only need 25 people to be a part of your page in order to get a username. Just make sure you're logged in and go to http://www.facebook.com/username/

    Hope that helps!

  • http://www.facebook.com/javier.reyes Javier Reyes

    You can download a free WordPress plugin hear:
    http://www.sociable.es/facebook-connect/

    with the new Facebook like, activity and recommendations widgets. And the old Facebook Connect login and register, send comments….
    Tutoral with screenshots:
    http://www.sociable.es/facebook-opengraph-wordp

  • http://www.ruhanirabin.com/ Ruhani Rabin

    Hi there already 3 days before I've tried the exact code that you've posted here .. just for the heads up.. it doesn't work with all the themes and permalinks structure.. I've my version which actually works!

    You can't simply put a the_permalink because that will return permanent url not the encoded url.. :)

  • http://www.ducttapemarketing.com/blog ducttape

    I agree it won't work with every theme because as theme designers attempt to make the themes more flexible and more DIY they are making it harder to get to the code, but for the record this worked just fine with my set-up, but your suggested <?php echo urlencode(get_permalink($post->ID)); ?> is probably a good suggestion to be more universal.

  • http://johnhaydon.com John Haydon

    John – Another solution for WordPress folks is to use the Facebook Like Button Plugin: http://blog.ahmedgeek.com/archives/409

  • Maxiosearch

    Great article, thanks for providing such practical advices. I'm just about doing it! I can tell you then if it works :)

    Join the conversations about Facebook and some other business topics on startups.com

  • http://aksb.org/ Lia Suzuki

    I'm using Headway and can't seem to accomplish 2 things…

    1) I'd like to place the button at the top of my posts
    2) I'd like for the button to show up on each of my category excerpts

    Any suggestions…?

  • http://twitter.com/ZeristaSoftware Zerista

    great summary. next up … i'm adding the buttons to our site!

  • ymtina

    http://www.gucci-shoes-bags.com
    http://www.guccinewshop.com
    Dear friends welcome to our store: we have a specail offer now which is once you buy any product you can get a free gift as well, these gifts are in the gift area, you can free to choose and please add to the shopping cart, we will send it together with your purchased product. Thanks!

  • Sherry

    Already have the FB Like Box, no problem–added it weeks ago when it was still “Become a Fan.” But when I just tried the tool to generate code for the Like Button, I get “Page Not Found.” Help?

  • http://blog.bottomlessinc.com PlF

    Here's the WordPress plugin:
    http://wordpress.org/extend/plugins/like
    No coding necessary, you can customize the look and placement of the button in the settings interface

  • stephsammons

    John thanks for making this easy for us!

  • http://www.wholesaleinc.net/Wholesale-laptops-notebooks_c21 China laptops

    wholesale Cheap Laptops & notebook computer , Mini Laptops from china

  • alexpitson

    Thanks again for the excellent article, and I look forward to reading more of your writing on this topic. mlm lead system pro review

  • http://www.netprofitmarketing.com/ Jared Detroit

    Do we have Like replacing the Share buttons now? I “like” their idea of making it easy for websites and blogs to have their content shared on facebook. I believe it will grow their network.

  • ronlacy1

    Please suggest how can I add site's name in the content of like feature of facebook?
    I have already provided the og:title, og:url and og:site_name.

    Please suggest.

  • Ian J Young

    All very well adding the like button if you have white as page background otherwise you cannot see the text (or numbers)
    Any one know how to change the colour of the text

  • Ian J Young

    Sorted that. Just changed the background colour.
    However, I fam finding that if someone else clicks on the “Like” button, it reverts to zero.
    Code taken straight from Facebook. Any ideas?

  • http://www.ducttapemarketing.com/blog ducttape

    That might be a conflict with another plug in on your site – what platform?

  • http://www.ducttapemarketing.com/blog ducttape

    Read up on the Open Social Graph settings and the various ways to configure your blog settings.

  • http://www.ducttapemarketing.com/blog ducttape

    It certainly appears to be working

  • ronlacy1

    I have already gone through these and we have currently added the like feature to our site. when a user uses the Like feature, it is appearing fine our end but in their recent activity on facebook, sometimes the site name appears and sometimes it doesnt.

    Opinder likes Louis Vuitton Odeon (Monogram MM).

    Opinder likes Louis Vuitton Galliera (PM) on oohilove.com.

  • knowledgenotebook

    Here's another version of how to do it / integrate with your existing HTML/php/other web page.

    HOW:
    1) Copy and past the following code to your own HTML, php or whatever else web page at a location where you want the LIKE button to show up and fine tune the width and height attributes to your need.

    <iframe src=”http://www.facebook.com/plugins/likebox.php?
    id=326611573872&width=182&connections=10&stream=true&header=true” scrolling=”no”
    frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:182px; height:px”></iframe>

    2) Replace the ID of 326611573872 with your own.

    3) DONE. It's that simple if you know how … now smile

    4) See it in ACTION! (scroll to the bottom and try it if you will)
    http://www.knowledgenotebook.com/

  • Ian J Young

    This is not in WordPress – straight html on Apache server

  • rachelknowledge

    Hi John, What is the benefit of adding the Like button if you already have a Facebook Share button? Perhaps you could enlighten me as to the difference between the two please.

    Many thanks

    Rachel

  • http://www.ducttapemarketing.com/blog ducttape

    Not sure what you're trying to say – this is certainly a WordPress blog, but yes the template has been altered with HTML – look in the comments and you'll also find some true WP plugins

  • Like

    Hi– as someone looking at a page, if we click on 'like', will that automatically make us 'follow' them and CAN the company be able to access and see OUR page and information as if they are now our friends and able to view our walls, pics, etc? I'd like to know as some I dont want them to be able to view all my information just because I click on the 'like' button. Please advise! Thanks!

  • RyanTB

    Can anyone tell me how to get this to post to a news feed? I have it appearing on my profile just fine (Ryan likes … on …), but I can't get it on a news feed. Thanks!

  • http://BuckeyeTalkBack.com Steve

    I added the Google Buzz button to my blogs and that didn't go anywhere. I might wait out this Facebook Like button to make sure it's going to catch on.

  • http://www.youracreator.com IZZY

    Thanks,

    How do you get the “like box” to now show “Find Me On Facebook”?? as you have show to your right -> on http://www.ducttapemarketing.com

  • http://www.ducttapemarketing.com/blog ducttape

    It's a different tool called a Like Box

  • mariaf1

    This doesn't work in my WordPress.com blog. Is there something I'm missing? Is it just not possible?

  • jim

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

  • random

    He meant his site is not in wordpress and is using straight html on an apache server

  • http://www.ri.org me

    How do I integrate the code generated by FB onto my FB Causes page?

  • Mei

    I came a few months ago and you had the like icon ( mean the hand showing without the text or the number of people that liked the page). Will you plz tell me how to implement the “the like button” with Iframe to obtain that result, although I see that you no longer has the icon( standard form)

  • Abbiwood

    I think that MZ guy is dreaming with 'public is the new social norm'. People do not share the same things with everyone they know once they reach adulthood. Most people by default want no public information about themselves, their children. Facebook will crash as fast as it rised once the novelty is gone (see MySpace) and people realize how much they share without knowing it.
    Nitric Oxide Supplements

  • Asad

    The video is pretty well done. Perhaps the users need to know how to really use the facebook like button on their WordPress blog. You have covered the 'how to' from technical perspective pretty well, but this article covers the non-technical part:

    http://wpsplash.com/how-to-facebook-like-button

  • Terra-boi

    is it possible to add a 'like button' without wordpress?

  • Dfuckyou

    IDIOT MAKE GOOD TUTORIALS….

  • http://twitter.com/_milap milap neupane

    i want people to like a small game in my small site and i wrote the code as:
    <iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmajjako.webs.com%2Fyellowball.html&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:80px;” allowTransparency=”true”></iframe>

    but there is a problem it shows someone liked it only on his/her profile not on the newsfeed ( the home page) what might be the problem?

  • Lorraine Suess