1

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

1
  • I haven't seen this type of control anywhere - could you edit your post with a link to an example?
    – jevakallio
    May 30, 2010 at 17:22

5 Answers 5

10

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>
3
  • awesome answer, thanks! you should so totally make a plugin, it would be very useful for a lot of people
    – meow
    May 31, 2010 at 4:18
  • more than 1000 people have viewed your answer, great stuff! =D
    – meow
    Nov 18, 2010 at 1:19
  • Looks like I also forgot to write that plugin :) Maybe the next time I have a need for functionality like this...
    – jevakallio
    Dec 13, 2010 at 15:03
1

How about this jquery plugin: http://socialmediaautomat.com/jquery-fbjlike-js.php It's really simple to set up and lets you perform some neat tasks in combination with the jquery cookie plugin (have a look at the demo page).

0

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

0

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>
2
  • You're misunderstanding the question. He's asking how to create a similar button.
    – SLaks
    May 30, 2010 at 18:17
  • but I like your answer anyways :) but you forgot the mention where to put the app ID
    – vsync
    Jun 30, 2011 at 17:46
0

Using the $('#your-button').button(); function from the jQuery UI library gives this functionality, and a whole lot more.

http://jqueryui.com/themeroller/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.