Bouton J'aime Facebook - Comment désactiver la fenêtre de commentaire?

Je voudrais désactiver la boîte de commentaire qui apparaît lorsqu'un utilisateur clique sur le bouton J'aime de Facebook (fbml) que j'ai placé sur mon site. Est-ce possible? Je ne trouve aucun détail dans la documentation.

Le correctif le plus simple pour masquer la zone de commentaire après Facebook Like (la version XFBML et non l'iframe) est comme indiqué:

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

Mettez le style CSS dans n'importe lequel de vos fichiers CSS et voyez la magie, cela fonctionne :)

Le fait de placer l'iframe dans un div de taille appropriée avec un débordement défini sur hidden a résolu ce problème - bien que cela ne fasse que masquer le problème en tant que tel.

J'utilise ceci dans mon CSS:

.fb-like{
    height: 20px;
    overflow: hidden;
}

et restituer le bouton Facebook avec le code HTML5 normal, quelque chose comme ceci:

<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>

gr-

Ce que j'ai fait, c'est créer un div pour le bouton "J'aime" comme ceci:

<div class="fb_like">
  <fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>

Et voici le CSS:

.fb_like {  
  overflow: hidden;
  width: 90px;
}

J'aime la solution de Mohammed Arif et je la choisis comme la meilleure réponse. Mais si FB a changé de classe, alors ce qui suit fonctionnera toujours.

FB.Event.subscribe('edge.create', function(response) {
   $('#like_button_holder').html('<div class="fb-like" data-href="http://www.your-url.com" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false"></div>')
   FB.XFBML.parse();
});

où "like_button_holder" est "VOTRE" identifiant div contenant le code du bouton J'aime de Facebook

La solution plus propre qui fonctionne (à partir de mai 2014 ) -

1. Tout d'abord, assurez-vous que la propriété <div class="fb-like" has data-layout en tant que bouton -

   <div class="fb-like" data-layout="button"........></div>
   

2. Ajoutez simplement ce CSS-

   .fb-like{
      overflow: hidden !important;
   }
   

C'est tout!

Démo

Ne pas être une Debby Downer ici, mais le fait de cacher la boîte de commentaires ne viole-t-il pas la politique de Facebook?

IV. Points d'intégration d'application d. Vous ne devez pas masquer ou couvrir des éléments de nos plugins sociaux, tels que le bouton J'aime ou le plugin Like box.

https://developers.facebook.com/policy/

Je n'ai pas pu avoir la display: nonepossibilité de travailler avec la version HTML 5 du bouton. Au lieu de cela, j'ai ciblé le div dans lequel le bouton du bouton J'aime est créé et défini le débordement sur masqué.

Déposer ce qui suit dans mon fichier css principal a fait l'affaire:

#fb_button{
    overflow:hidden;
}

D'accord avec BrynJ, la meilleure solution actuellement est de mettre le bouton similaire dans un conteneur de haute div 20px et de définir le débordement sur masqué (j'ai lu quelque part que FB a récemment déplacé le menu déroulant des commentaires dans l'iFrame, donc la solution qui modifie le style de . fb_edge_widget_with_comment n'est probablement plus utile pour les utilisateurs d'iFrame).

Vous utilisez AddThis? Faites ceci:

<div class="container" style="height: 20px; overflow: hidden;">
  <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like"></a>
  </div>
</div>

Si le bouton J'aime disparaît lorsque vous cliquez sur "J'aime" et que vous disposez d'un conteneur div pour masquer la fenêtre contextuelle de commentaire, utilisez la solution suivante:

créez un conteneur div pour placer le bouton de type fb et donnez-lui le css suivant:

.fb_like {
  overflow: hidden;
  width: 90px;
}

.fb_like iframe {
  left: 0 !important;
}

J'ai réussi à contourner le problème de la fenêtre contextuelle des commentaires du bouton J'aime de Facebook en implémentant la version IFRAME à la place. J'ai suivi les étapes suivantes pour ce faire:

1. Visitez https://developers.facebook.com/docs/plugins/like-button/
2. Remplacez l'URL à aimer par l'URL de votre page Facebook
3. Sélectionnez les autres options (mise en page, type d'action, etc.) selon vos besoins
4. Appuyez sur le bouton "Obtenir le code"
5. Sélectionnez la version IFRAME
6. Assurez-vous de sélectionner votre application Facebook là où il est dit "Ce script utilise l'ID d'application de votre application"
7. Implémentez le code fourni dans votre application

D'après ce que je peux voir, le bouton J'aime avec l'implémentation IFRAME ne déclenche aucun pop-up. Il fonctionne simplement comme un bouton similaire. C'était mon résultat souhaité.

Bonne chance.

Voici le code pour que le bouton J'aime fonctionne comme un simple bouton standard avec Twitter et Linkedin. J'espère que ça aide.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FB</title>


<style>
.social ul { overflow: hidden; margin:0; padding:0; list-style: none; } 
.social ul li { float: left; margin-right: 10px; }
</style>

</head>

<body>
<div id="fb-root"></div>

<div class="social">

    <ul>
        <li class="facebook">   
            <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.smh.com.au&amp;send=false&amp;layout=button_count&amp;width=45&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=333450970117655" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:21px;" allowTransparency="true"></iframe> 
        </li>
        <li class="twitter">
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.smh.com.au" data-count="none">Tweet</a>
        </li>
        <li class="linkedin">
            <script type="IN/Share" data-url="http://www.smh.com.au/"></script>
        </li>
    </ul>
</div>

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=333450970117655";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>

<script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

</body>
</html>

Essayons celui-ci:

FB.Event.subscribe('edge.create', function(response) {
    var $parent =  $('[href="'+response+'"]').parent();
    $parent.empty();
    $parent.html('<fb:like href="'+response+'" send="false" layout="button_count" width="120" show_faces="false" action="like"></fb:like>');
    FB.XFBML.parse();
 });

Comme je l'ai bien fait, la fenêtre contextuelle de commentaire sera désactivée lorsque:

1. Afficher les visages: -> décochez-le
2. Obtenir le code: -> choisissez l'option IFRAME

Si vous utilisez le bouton HTML5 plus récent, et que vous devriez le faire, car il est compatible avec la transmission et suggéré par Facebook, c'est facile de partir de ce que les autres ont dit:

.fb-like, .addthis_button_facebook_like
  height: 25px
  overflow: hidden

La deuxième classe est un bonus pour ceux qui utilisent le plugin AddThis.

Les options de hauteur de débordement mentionnées ci-dessus ne doivent pas être utilisées lorsque show-faces=true. Sinon, cela masquera les visages.

Dans mon cas (avec la version XFBML), j'ai ajouté à la balise ceci:

width="90" height="20" style="overflow: hidden;"

Le résultat final est donc:

<fb:like data-href="URL" send="false" layout="button_count" width="90" height="20" style="overflow: hidden;" show_faces="false" colorscheme="light" action="like"></fb:like>

Il cache correctement le popup de commentaire.

Le masquage de la zone de commentaire fonctionne, mais peut créer un problème si vous avez un élément cliquable derrière la boîte de dialogue de commentaire.

Vous devez le cacher et le supprimer de la publication DOM comme.

Voici le CSS pour masquer la zone de commentaire:

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

Voici la manière JQuery de supprimer l'élément DOM:

 FB.Event.subscribe('edge.create', function (href, widget) {        
    $('.fb_edge_comment_widget.fb_iframe_widget').remove()       
});

Voici la manière javascript pure en utilisant le widget fourni à partir du rappel:

FB.Event.subscribe('edge.create', function (href, widget) {
    widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);        
});

Si vous souhaitez afficher uniquement le bouton J'aime, vous pouvez essayer quelque chose comme ceci

HTML:

<div class="fb_like">
    <div class="fb-like" data-href="http://google.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
    <div class="like_counter_hider"></div>
</div>

CSS:

.fb_like {
    overflow: hidden;
    width: 80px;
    height: 20px;
}
.like_counter_hider {
    position: absolute;
    top: 0;
    left: 45px;
    width: 35px;
    height: 20px;
    background-color: #f3f3f3; /*you'll have to match background color*/
    z-index: 200;
}

Définir le dépassement sur masqué peut aider. Faites-le dans votre fichier css principal.

#fb_button{
overflow:hidden;
}

Que diriez-vous simplement de faire de l'iframe qui contient le bouton similaire la même taille que le bouton:

.fb_iframe_widget_lift
{
    width: 49px !important;
    height: 20px !important;
}

C'est tout.