|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv=Content-type content="text/html; charset=utf-8"> |
|
<title></title> |
|
</head> |
|
<body> |
|
<div id=container> |
|
|
|
<ul> |
|
<li><code>href</code> - the URL to like. The XFBML version defaults to the current page. </li> |
|
<li><code>layout</code> - there are three options. |
|
|
|
<ul> |
|
<li><code>standard</code> - 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). </li> |
|
<li><code>button_count</code> - displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels. </li> |
|
<li><code>box_count</code> - displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.</li> |
|
</ul></li> |
|
<li><code>show_faces</code> - specifies whether to display profile photos below the button (standard layout only) </li> |
|
<li><code>width</code> - the width of the Like button. </li> |
|
<li><code>action</code> - the verb to display on the button. Options: 'like', 'recommend' </li> |
|
<li><code>font</code> - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana' </li> |
|
<li><code>colorscheme</code> - the color scheme for the like button. Options: 'light', 'dark' </li> |
|
<li><code>ref</code> - 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: |
|
|
|
<ul> |
|
<li><code>fb_ref</code> - the ref parameter </li> |
|
<li><code>fb_source</code> - the stream type ('home', 'profile', 'search', 'other') in which the click occurred and the story type ('oneline' or 'multiline'), concatenated with an underscore.</li> |
|
</ul></li> |
|
</ul> |
|
|
|
</div> |
|
|
|
<script type="text/javascript" charset="utf-8"> |
|
|
|
|
|
// where (node) - Node to append the iframe to |
|
// options (obj) - Object containing iframe html attribute and button options |
|
// example: |
|
// |
|
// { |
|
// options: { /* button options here */ }, |
|
// attrs: { /* ifram html attributes here */ } |
|
// } |
|
|
|
var FBLikeButton = function(where, options){ |
|
this.setOptions(options); |
|
this.iframe = document.createElement('iframe'); |
|
this.setAttributes().setSource().inject(where || document.body) |
|
} |
|
|
|
FBLikeButton.prototype = { |
|
|
|
setOptions: function(options){ |
|
this.attrs = { |
|
scrolling: 'no', |
|
frameborder: '0', |
|
style: 'border:none; overflow:hidden; width:390px; height:65px;', |
|
allowTransparency: "true" |
|
}; |
|
this.options = { |
|
layout: 'box_count', |
|
show_faces: false, |
|
width: 390, |
|
action: 'like', |
|
colorscheme: 'light', |
|
height: 65 |
|
}; |
|
if (options) { |
|
this.attrs = options.attrs; |
|
this.options = options.options; |
|
} |
|
}, |
|
|
|
setAttributes: function(){ |
|
for (i in this.attrs) this.iframe.setAttribute(i, this.attrs[i]); |
|
return this; |
|
}, |
|
|
|
setSource: function(){ |
|
var loc = encodeURI(window.location.href) |
|
, ops = this.buildURL(); |
|
this.iframe.src = 'http://www.facebook.com/plugins/like.php?href=' + loc + ops; |
|
return this; |
|
}, |
|
|
|
buildURL: function(){ |
|
var str = ''; |
|
for (i in this.options) str += '&' + i + '=' + this.options[i] |
|
return str; |
|
}, |
|
|
|
inject: function(parent){ |
|
parent.appendChild(this.iframe); |
|
return this; |
|
} |
|
}; |
|
|
|
// usage |
|
var c = document.getElementById('container'); |
|
new FBLikeButton(c); |
|
|
|
</script> |
|
|
|
</body> |
|
</html> |
|
|
