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 website , and if a Facebook user visits your site and clicks on it, a link to your page gets added to their activity stream and count. 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 theirfriends have already clicked it, and when they click on it, a link to your page gets added to their stream.Its really interesting.
There are actually two versions of the Like button, one that uses an i-frame and one that uses JavaScript.
1. The i-frame 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
2. 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 features. In the code above, you can also see there’s a show-facesflag 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.
