Friday, April 23rd, 2010 | Author: pluc | Views: 63

I was wondering, last night, if I’d really have to wait for everyone to implement the new Facebook Social Plugins, more specifically, the new embeddable “Like Button”. I think it’s a pretty cool alternative to replace everyone’s “Share on Facebook” annoying popup link. That being said, I decided I’d throw a little JavaScript together, actually inspired by Damon Cortesi’s DM Deleter for Twitter, I put together a bookmarklet to insert a “Like” button virtually anywhere (and by that, I mean on any site/page you visit).

First, for those who want the result before the explanation, drag this link to your browser’s bookmark toolbar: Like This

Alright, now for the smart people, here’s a breakdown of what this puppy does:


javascript:(function(){
var h=document.getElementsByTagName('head')[0];
var m1=document.createElement('meta');
m1.setAttribute('property','og:title');
m1.content=document.title;
h.appendChild(m1);

var m2=document.createElement('meta');
m2.setAttribute('property','og:site_name');
m2.content=window.location.hostname;
h.appendChild(m2);

var m3=document.createElement('meta');
m3.setAttribute('property','og:url');
m3.content=window.location;
h.appendChild(m3);

var s=document.createElement('iframe');
s.scrolling='no';
s.frameborder='0';
s.allowTransparency='true';
s.style.border='none';
s.style.overflow='hidden';
s.style.position='absolute';
s.style.zIndex='100';
s.src='http://www.facebook.com/plugins/like.php?href='+encodeURIComponent(window.location)+'&layout=standard&show_faces=true&width=450&action=like&colorscheme=light';
var a=document.body.firstChild;
document.body.insertBefore(s,a);
})();void(0);

What that is gonna do is relatively simple and most of you will be able to guess it just by looking at the code above. It creates three META tags, one for og:title, one for og:site_name, and one for og:url which are all required by Facebook to display the data that you actually like.
Once that’s done, it creates an iframe, exactly the same as just getting the Like Button code from Facebook and puts it as the first element of the body tag, making it the first thing you see on the page, technically.

This is mostly a little toy, but feel free to use it if you’d like! I’m not too sure why, but when I tried this at home, it would pop up a Facebook login window instead of just “Liking” whatever I was supposed to be Liking… this morning, it doesn’t. So let me know what you experience if you try it out.

Edit: ReadWriteWeb is also saying they’ve got a “Safe” bookmarklet. But theirs don’t add meta tags :)

You can leave a response, or trackback from your own site.

Leave a Reply