Jul 7th 2010 × code your own facebook ‘be the first to like’ with mootools
I never like having iframes in production sites source codes so when management decided to add the ‘facebook like’ widget thing, I decided to move it outside of the source and into a javascript abstraction. Easiest and most convenient way to do so is via extending the Element prototype in mootools (via Element.implement()):
Element.implement({
facebookLike: function(url, options) {
var options = $merge({
show_faces: "false",
layout: "standard",
width: 450,
action: "like",
font: "lucida grande",
colorscheme: "light",
height: 30,
href: url
}, options);
var src= "http://www.facebook.com/plugins/like.php?href={href}&layout={layout}&show_faces={show_faces}&width={width}&action={action}&font={font}&colorscheme={colorscheme}&height={height}".substitute(options);
return this.adopt(new Element("iframe", {
styles: {
border: "none",
overflow: "hidden",
width: options.width,
height: options.height
},
id: "FBFrame",
frameborder: 0,
allowTransparency: "true",
scrolling: "no",
src: src
}));
}
});
// exmaple use:
document.id("like").facebookLike("http://fragged.org/", {
width: 400,
height: 30
});
Why would you want to do that instead of the default interface? Because it will speed up page load and abstract this into domready / onload events. It also allows you to produce multiples very easily via a a selector, eg,
// if in your markup you have a number of // then target them, get the link's href and apply the like button instead document.getElements("div.like").each(function(el) { var urlToLike = el.getFirst().get("href"); el.empty().faceboookLike(urlToLike); });
All of the facebook options like button plugin are “supported” – you can find the list here
Finally, here’s what it looks like:
Play with it some more on the jsfiddle: click here
1 Comment to code your own facebook ‘be the first to like’ with mootools
[...] This post was mentioned on Twitter by Thierry Bela. Thierry Bela said: RT @D_mitar: Make your own facebook 'be the first to like' via Element.implement in #mootools – http://bit.ly/9d18vV, #jsfilddle: http:/ … [...]
Would you like to leave a comment?
You must be logged in to post a comment.




