jQuery plugin for Facebook "Like" Button

Question

On lots of sites now, you can see a Facebook "Like" Button. - When depressed, it changes background color. - When mouse-overed, it allows you to write some additional text

I love this interface - lightweight action, but allow for expression of more data if the user wants to.

Anyone has written a similar plugin?

UPDATE: See: http://www.engadget.com/2010/05/30/htc-evo-4g-gets-hacked-froyo-port-sense-ui-be-damned/ at the bottom of a post, you will see the facebook like button

Answer 1

You can handle the hover, mousedown, and mouseup events and change the button's content or style.

Answer 2

Is not a plugin it uses the Facebook Javascript SDK. You load it by placing this at bottom of your document:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({status: true, cookie: true,
         xfbml: true});
};
(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>

Add this attribute to your HTML tag(the actual HTML tag right after the DOCTYPE):

xmlns:fb="http://www.facebook.com/2008/fbml"

And then you can place this snippet wherever you want a Like button:

<fb:like></fb:like>

Answer 3

I don't know of such a plugin for jQuery, but writing the user-interface is quite simple.

(Edit: Actually I just thought of a place where I could use this feature myself. I might just as well write a proper plugin based on this next week if I have the time, and edit it here. For the time being, below is what I originally posted...)

All you need is a couple of divs:

<div id="thebutton">Click me!</div>
<div id="thebox" style="display:none;">Content goes here</div>

And some jQuery:

    <script type="text/javascript">
    $(function () {

        $('#thebutton')
            .click(function () {
                //Show/hide the box
                $(this).toggleClass('activated');
                $(this).hasClass('activated') ? $('#thebox').fadeIn() : $('#thebox').fadeOut();
            })
            .mouseenter(function () {
                //If the button is .activated, cancel any delayed hide and display the box
                $(this).addClass('hovering');
                if ($(this).hasClass('activated')) {
                    $('#thebox').clearQueue().fadeIn();
                }
            })
            .mouseleave(function () {
                //Hide the box after 300 milliseconds (unless someone cancels the action)
                $(this).removeClass('hovering');
                $('#thebox').delay(300).fadeOut();
            });

        $('#thebox')
            //When hovering onto the box, cancel any delayed hide operations
            .mouseenter(function () { $(this).clearQueue(); })

            //When hovering off from the box, wait for 300 milliseconds and hide the box (unless cancelled)
            .mouseleave(function () { $(this).delay(300).fadeOut(); });
    });
</script>

The rest is pretty much just CSS for #thebutton, #thebox, .hovering and .activated.

Here's a spartan look I used while writing this:

<style type="text/css">
    #thebutton              { width: 100px; background-color: #eee; text-align: center; padding: 10px; cursor: pointer; }
    #thebutton.activated    { font-weight: bold; }
    #thebutton.hovering     { color: Blue; }          
    #thebox                 { background-color: #eee; position:relative; width: 300px; height: 200px; padding: 10px; top: 5px; display: none;}
</style>