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
[…] 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:/ … […]