1. The iframe version

• This is the more simple version of the button. Just add this code wherever you want the button to appear on your website. Change 'http://www.fxwebdesign.nl' to your own website URL.

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/plugins/like.php?href=http://www.fxwebdesign.nl&layout=button_count&show_faces=false&
width=450&action=like&colorscheme=light" allowtransparency="true" style="border:none; overflow:hidden; width:115px; height:20px;">
</iframe>

Attributes:

• href - the URL to like. The XFBML version defaults to the current page.
• send - specifies whether to include a Send button with the Like button. This only works with the XFBML version.
• layout - there are three options.
• standard - displays social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
• button_count - displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
• box_count - displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
• show_faces - specifies whether to display profile photos below the button (standard layout only)
• width - the width of the Like button.
• action - the verb to display on the button. Options: 'like', 'recommend'
• font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
• colorscheme - the color scheme for the like button. Options: 'light', 'dark'
• ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:
• fb_ref - the ref parameter
• fb_source - the stream type ('home', 'profile', 'search', 'other') in which the click occurred and the story type ('oneline' or 'multiline'), concatenated with an underscore.

2. The XFBML version

• This is the more complicated version of the button. It uses the XFBML fb:like tag and Javascript SDK.
  • The XFBML version gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like.
  Just add this code wherever you want the button to appear on your website. Change 'http://www.fxwebdesign.nl' to your own website URL.

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.fxwebdesign.nl" send="false" width="450" show_faces="true" font=""></fb:like>

• Like the article? Finally found a Facebook Like Button that you understand now? Please consider a donation or comment. I suspect that like many of you, “scripting is just a hobby for me”. Thank you very much, i'd very much appreciate it.