Plugin jQuery pour Facebook Bouton "J'aime"

Question

Sur beaucoup de sites, vous pouvez voir un bouton "J'aime" sur Facebook. - Lorsque cette touche est enfoncée, elle change la couleur de l'arrière-plan. - Lorsque souris-overed, il vous permet d'écrire du texte supplémentaire

J'aime cette interface - action légère, mais permettre l'expression de plus de données si l'utilisateur le veut.

Quelqu'un a écrit un plugin similaire?

MISE À JOUR: Voir: http://www.engadget.com/2010/05/30/htc-evo-4g-gets-hacked-froyo-port-sense-ui-be-damned/ au fond d'un poste, vous verrez le bouton facebook comme

Answer 1

Je ne sais pas d'un tel plug-in pour jQuery, mais écrire l'interface utilisateur est assez simple.

(Modifier: En fait, je pensais à un endroit où je pourrais utiliser cette fonctionnalité moi-même, je pourrais aussi bien écrire un plugin approprié basé sur cette semaine si j'ai le temps, et l'éditer ici. l'instant, voici ce que je ... Envoyé)

Tout ce que vous avez besoin est un couple de divs:

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

Et certains 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> 

Le reste est à peu près juste CSS pour #thebutton, #thebox, .hovering et .activated.

est ici un regard spartiate je en écrivant ceci:.

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

Answer 2

Vous pouvez gérer les hover, mousedown et mouseup événements et changer le contenu ou le style du bouton.

Answer 3

N'est pas un plugin, il utilise le Facebook Javascript SDK. Vous chargez en plaçant ce en bas de votre 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> 

Ajouter cet attribut à votre balise HTML (la balise HTML réelle juste après le DOCTYPE):

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

Et vous pouvez placer cette snippet où vous voulez un bouton comme:

<fb:like></fb:like> 

Answer 4

En utilisant le $ ('# votre bouton') touche(); fonction de la bibliothèque jQuery UI donne cette fonctionnalité, et beaucoup plus.

Answer 5

Que diriez-vous ce plugin jquery: http://socialmediaautomat.com/jquery-fbjlike-js.php Il est très simple à mettre en place et vous permet d'effectuer des tâches soignées en combinaison avec le plug-in cookie jquery (jetez un oeil à la page de démonstration).