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
anchor text

// 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

I have had the facebook tooltip available as a part of my core library for a while now. However, usage on various sites highlighted certain visual errors in the way it rendered on sites with custom CSS settings for line-height and line-spacing. This (plus the ineffectiveness of the old way the tooltip arrow was injected) caused me to sit down and refactor the whole function. Look at the demo tooltip page for possible uses.

It’s just silly and totally unnecessary unless you have some silly amount of applications… For the rest of us who use facebook to keep in touch and play a bit of poker, it just sucks. The sad truth is: they are freeing up space to have more adverts. Not that it matters with firefox anyway!