Skip to content

Instantly share code, notes, and snippets.

@matiascarranza
Forked from ryanflorence/FBLikeButton.html
Last active August 29, 2015 14:14
Show Gist options
  • Save matiascarranza/84ba7fbc392c47b9f245 to your computer and use it in GitHub Desktop.
Save matiascarranza/84ba7fbc392c47b9f245 to your computer and use it in GitHub Desktop.
<!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 += '&amp;' + 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment