web-dev-qa-db-fra.com

Facebook Like Button - comment désactiver le commentaire pop-up?

Je souhaite désactiver la zone de commentaire qui s'affiche 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.

facebookfacebook-likefbml
107
BrynJ

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

81
BrynJ

La solution la plus simple pour masquer la boîte de commentaire après Facebook Like (la version XFBML n'est pas la version iframe) est la même:

.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, ça marche :)

125
Mohammad Arif

J'utilise ceci dans mon CSS:

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

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

69
Elmer

Ce que j'ai fait est de créer une 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;
}
14
Kotzilla

J'aime la solution de Mohammed Arif et je la choisis comme la meilleure réponse. Mais si FB change de classe, le sous-programme 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 "YOUR" div id contenant le code du bouton J'aime

9
Zorox

La solution de nettoyage qui fonctionne (à partir de en mai 2014 ) -

  1. Tout d’abord, assurez-vous que le <div class="fb-like" possède la propriété data-layout en tant que bouton -

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

  2. Il suffit d'ajouter ce CSS-

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

C'est ça!

démo

5
Sahil Mittal

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

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

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

4
Daniel Krueger

En accord avec BrynJ, la meilleure solution consiste actuellement à placer le bouton "like" dans un conteneur div de 20 pixels de haut et à définir le débordement sur masqué (j'ai lu quelque part que FB avait récemment déplacé le menu déroulant de commentaire dans iFrame, de sorte que la solution qui modifie le style de - . fb_Edge_widget_with_comment n'est probablement plus utile pour les utilisateurs d'iFrame).

Utiliser AddThis? Faire 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>
3
Gerbus

Je n'ai pas pu obtenir le display: none possibilité de travailler avec la version HTML 5 du bouton. Au lieu de cela, j'ai ciblé la div pour laquelle le bouton de bouton J'aime est créé et définir le débordement sur masqué.

Supprimer les éléments suivants dans mon fichier css principal a fait l'affaire:

#fb_button{
    overflow:hidden;
}
3
symulation

J'ai réussi à contourner le problème de commentaire de bouton comme Facebook en mettant en place la version IFRAME. J'ai pris les mesures suivantes pour le faire:

  1. Visitez https://developers.facebook.com/docs/plugins/like-button/
  2. Changez l'URL à aimer en votre URL de page Facebook
  3. Sélectionnez d'autres options (disposition, 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 où il est indiqué "Ce script utilise l'identifiant de l'application".
  7. Implémenter le code fourni dans votre application

D'après ce que je peux voir, le bouton J'aime avec la mise en œuvre d'IFRAME ne déclenche aucune fenêtre contextuelle. Il fonctionne simplement comme un bouton similaire. C'était mon résultat souhaité.

Bonne chance.

2
Shay Narang

Si le bouton "J'aime" disparaît lorsque vous cliquez sur "J'aime" et que vous avez une div de conteneur 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;
}
2
MaxK

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();
 });
1
Aamir Afridi

Si vous utilisez le bouton HTML5 le plus récent et que vous devriez le faire, car il est compatible avec les versions ultérieures et suggéré par Facebook, rien de plus facile, en vous écartant de ce que d'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.

1
Bill Pairaktaridis

Comme je l'ai fait correctement, le popup de commentaires sera désactivé lorsque:

  1. Montrer les visages: -> décocher
  2. Obtenir le code: -> choisissez l’option IFRAME
1
Trực Phạm

Voici le code pour que le bouton J'aime fonctionne comme un 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>
1
Rafael

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

0
tleo

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

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

Voici le CSS pour masquer la boîte de commentaire:

.fb_Edge_widget_with_comment span.fb_Edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

Voici la méthode JQuery pour supprimer l'élément DOM:

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

Voici la méthode javascript pure utilisant le widget fourni à partir du rappel:

FB.Event.subscribe('Edge.create', function (href, widget) {
    widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);        
});
0
Stephane Brillant

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

0
jollyr0ger

Définir un débordement sur masqué peut aider. Faites cela dans votre fichier css principal.

#fb_button{
overflow:hidden;
}
0
Akshat

Que diriez-vous de faire en sorte que l’iframe contenant le bouton "like" ait la même taille que le bouton:

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

C'est ça.

0
Graham McLellan

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;
}
0
user0000001