Now with the Facebook Like Button!

Obviously, the Facebook Like button is one you’d like to implement inside your blog, website or whatsoever. I did too, although I am quite late as everyone has theirs for ages, but why not share some thoughts about it and the whole social widgets riot? As we all know (or maybe suspect) the web is going social, and what value is your blog if your readers can’t share your article with their friends with a single click of a button?

Facebook’s gone wild for the last few months. They keep rolling out new features, extending their functionality, and allowing developers and website owners implement those features into their own websites. Of course Facebook’s not the only one with their funky F8 conference, the Javascript SDK and the Social Graph API, as Twitter introduced their @Anywhere platform at the SXSW conference. And what about Digg? Google Buzz? I can go on forever, but all these new features have some things in common:

• The code is bullet-proof (with a few exceptions)
• You don’t need third-party services such as Tweet Meme, etc
• Everything’s well documented in several languages
• They’re all incredibly easy to use and maintain

Right. Who needs those extra WordPress plugins when you can simply copy and paste a few lines of code into your sources? As long as you have a little bit of general HTML knowledge you’ll be fine. If you’re a developer though, you’ll find all these extras much more interesting than an average person. I’ll keep this post closer to what Facebook has to offer, but the thoughts are fair for others too.

If you’re into the Facebook Platform, then you must have had some experience with FBML, iframe coding for Facebook and Facebook Connect. After Facebook rolled out their official PHP library, things began to make more sense, as you don’t have to spend too much time reading the specs to their API, everything’s done for you and wrapped into a set of classes, well documented and ready for use. Amazing!

Now, let’s drop the PHP stuff and talk about javascript for a while. Facebook’s got a Javascript SDK, and the best part of it is that you don’t have to read at all! There it is, right on the homepage, a short snippet of javascript code, ready to be copy-pasted onto your website, and voila! You’re now officially pimped! And ..? And yes, returning back to our Facebook Like button, it’ll take you less than 3 seconds to install it as well as all the other sexy widgets.

The Facebook Like Plugin page is full of text for those of you who like to read, but just by looking at the form, it’ll take you 2 seconds to configure it, and one to grab the code in FBML. If there’s somebody who didn’t quite get it, here’s a snippet with the complete Like button:

<div id="body">
<!-- My FBML goes here -->
</div>
<!-- Facebook Javascript SDK -->
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({appId: 'your_app_id', status: true, cookie: true, xfbml: true});
        FB.XFBML.parse(document.getElementById('body'));
    };
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());
</script>

What on earth could be easier than that? Hello World? ;)

Now that you’re boosted with the Facebook Javascript SDK, you can go on and grab some other sweet plugins such as the Activity Feed, Comments, Friendpile and the rest. Experiment with the UI, sizing and positioning and you should be able to fit the widgets anywhere on your website. P.S. The Facebook Like button’s minimum width is 90 pixels.

You won’t (or at least shouldn’t) have any trouble installing other social widgets onto your website, including Twitter, Digg and Buzz. There are tonnes of articles out there that explain the whole process step by step, but if you’re experienced enough, you’ll be fine just by scanning through the code.. Hope you didn’t scan my article that way ;)

Anyways, the bottom line is that Facebook (and everyone else) are doing quite good at providing tools to fulfill your website with the social juice available. Oh, and don’t forget to “Like” this post, and of course retweet. Cheers!