How To Make A Friendly Facebook Like Button

First I was very excited when I saw the new Facebook Like Button. But when I checked the code to see how it works, I noticed that this button actually allows Facebook to track all the Facebook users on your site, no matter if they click it or not (see my previous post on how this works).

As a publisher, you might not want to annoy the visitors of your site with that. So I hacked together an alternative like button, that only connects to Facebook if you click it. Once you have clicked it, it looks and behaves the same as the original button (actually, it’s replaced by the original button when you click it). This way users can decide if they want to let Facebook know that they have visited your site. Try it here:

Here is how you can put this button on your website:

  1. Copy the code snippet from here and put it in the HTML code of your page where you want the button to appear.
  2. Go to this code-generator on Facebook and configure the button (usually you only need to enter your URL).
  3. When you’re done, click “Get Code” on the Facebook-page.
  4. From the iframe-field, copy only the characters from the first to the second quotation mark. Make sure you don’t miss the quotation marks, as shown here:Screenshot from the Facebook code generator
  5. Paste this text into the code you’ve inserted in your page in step 1: just replace the string “PASTE_FACEBOOK_URL_HERE”. Keep the trailing semicolon after the end of the string.

That’s it! You should see the button expand when you click it and load the real like button.

If you want to change the text of the button: it’s located in the next to last line of the code. Just change it to whatever you like. The button will resize to the length of the text.

This code basically just displays a button and applies a stylesheet from Facebook to it, so it looks exactly like the real like button. Of course you can replace it with your own customized button. Just make sure that the ids of the button and its container stay the same (“flb” and “flbCont”) and that it calls insertLikeButton() when clicked. This function replaces your button with an iframe that sends your parameters and the user’s cookie to facebook and loads the actual like button and friends info.

If you have problems with the width and height of the expanded button, you should give the container div named “flbCont” a size that fits your needs. The loaded iframe will be resized to these dimensions.