| Monday May 30th 2016

HOWTO: Add Facebook “Like” Buttons to Your Website

I want to offer a quick look inside the technology behind Facebook’s Open Graph initiative to show how easy it is to mark up your site and let Facebook users interact with it.

FacebookThis is only a part of the broad Open Graph strategy the company announced at its 2010 F8 developer conference.

Basically, Facebook is offering up a set of widgets (they call them Social Plug-ins) that you can drop into any web page to make that page more “Facebooky.” There’s a Like button, a Recommendations widget that shows what other pages people’s friends are reading, an Activity Stream widget that shows a simplified version of the visitor’s personal Facebook news feed, and a Facebook Bar, a toolbar site owners can float at the bottom of the screen that serves all of these things at once.

Using the Open Graph widgets, you can incorporate some of Facebook’s key social interaction features into any page on the web.

The most important Social Plug-in, and the one we’ll no doubt see the most use of, is the Like button. Put it on your page, and if a Facebook user visits your site and clicks on it, a link to your page gets added to their activity stream. Suddenly, all of their friends can see that link, click on it and be led directly to your page. When that second person arrives, the Like button is personalized for them — it shows which of their friends have already clicked it, and when they click on it, a link to your page gets added to their stream.

There are actually two versions of the Like button, one that uses an i-frame and one that uses JavaScript.

The iframe version
For the simple i-frame version, it’s one line of code:

?iframe src="Some Facebook URL" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"?

You can generate your own bit of i-frame code for any URL of your choosing (and tweak the parameters) using the tool at the bottom of this page on Facebook’s developer site

The content inside the i-frame is hosted by Facebook, and Facebook can detect whether the user is logged in or not using a cookie. If the person is logged in to Facebook, the stuff in the i-frame is personalized for them. It shows a list of their friends who have also liked the page. If they’re not logged in, they’ll be prompted to log in or to join.

The JavaScript version
The slightly more complicated JavaScript version of the button utilizes two other bits of Facebook technology: the XFBML fb:like tag and Facebook’s JavaScript SDK.

?fb:like href="Your URL" layout="standard" show-faces="true" width="450" action="like" colorscheme="light" /?

You get all the same personalization features as the i-frame version, so each logged in Facebook user who visits your site sees which of their friends have clicked the “Like” button, and a link to your site gets shared across their social graph. Also like the i-frame version, you can tweak the parameters however you want.

But the JavaScript version offers some extras. In the code above, you can also see there’s a show-faces flag that will show the profile pictures of your friends who have clicked on the Like button.

The JavaScript version also gives your visitors the chance to add a comment to the link when they click on the Like button.

If a user is not logged in to Facebook when they visit your site, you can authenticate them automatically using OAuth 2.0, which Facebook now supports. Full details are here.

Tag up your page

When a user Likes your page, it does more than just pass the link around. If you’re a band, or you run a site for a movie, you can add some semantic markup to your page that tells Facebook the type of thing your page represents. That way, if I go to your movie page and “Like” your movie, Facebook can easily add a link to your movie’s website in my profile. If I keep a list of my favorite movies in my Facebook profile, a link to your public website will be added there, where it belongs.

This part is optional, but it’s recommended. Just add some Open Graph meta tags to your page so Facebook knows what you are. There are four that are required, the rest are gravy. You can claim your entity’s identity by picking the most relevant content type. The list is long — musician, sports team, blog, drink, hotel, movie, book, city, cause — so whatever your page represents, Facebook can understand it and deal with the link properly when somebody clicks your Like button.

Get used to it

Like buttons are a step up from the other sharing buttons that have been on the web for years. Unlike those for Digg and Twitter, which just display a blind count of aggregate clicks from everyone on the social network, the Facebook Like button shows you how your friends are interacting with the page you’re on.

We can certainly expect other social networks to pick up on this model and start serving up lists of your friends, and maybe even their faces, along side their own social widgets.

Related Posts: On this day...

Reader Feedback

11 Responses to “HOWTO: Add Facebook “Like” Buttons to Your Website”

  1. Vrian Barias says:

    Thank you for sharing your article I would always follow

  2. Tyrone Vampa says:

    I actually got to this blog by searching for movies to stream. Will you write an article on the top movies to view online thanks

  3. Evan Zevallos says:

    Hey… I’m having a bit of problem with the site layout. For some reason the text block overlaps the margins. Is this just me or have you heard this from other ppl? Just wanted to let you know in case you’ve been making changes. Thanks!

  4. Carla R. Renick says:

    Homicide IS ABORTION

  5. Dyna says:

    Obama are likely to be the preliminary 1 phrase prez we now have acquired inside the prolonged time.

  6. Carroll B. Merriman says:

    borders books closing 2011

  7. Elison says:

    I have fun with, cause I discovered just what I used to be taking a look for. You have ended my 4 day lengthy hunt! God Bless you man. Have a nice day. Bye

  8. Darrick Lattig says:

    Watch complete movies totally free

  9. Mike says:

    I have read some good stuff here. Definitely value bookmarking for revisiting. I wonder how much attempt you put to make any such great informative website.

  10. Dom says:

    Pretty section of content. I simply stumbled upon your blog and in accession capital to say that I get actually enjoyed account your blog posts. Anyway I will be subscribing for your feeds and even I fulfillment you get admission to consistently rapidly.

Leave a Reply

You must be logged in to post a comment.