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

107

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.

BrynJ
la source
2
Impossible de trouver une réponse pour vous. Avez-vous considéré la "Like Box" comme une solution de contournement? développeurs.facebook.com/docs/reference/plugins/like-box . Vous pouvez désactiver "Afficher le flux" et "Afficher l'en-tête", et définir "Connexions" sur 0, ce qui rend le balisage résultant d'une taille raisonnable.
zombat
J'ai ajouté une réponse que j'ai trouvée comme solution de contournement.
BrynJ

Réponses:

125

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

Mohammad Arif
la source
Merci Jonathan bien que je ne sois pas le meilleur :) J'ai eu du mal sur la même chose et j'ai juste essayé de résoudre en utilisant CSS plutôt que de rechercher les solutions sophistiquées et cela a fonctionné `` comme un charme '' :)
Mohammad Arif
8
Personne ne pense que la réponse de BrynJ est la meilleure? Si Facebook modifie ses classes dans le balisage, cette méthode sera interrompue.
tybro0103
Incroyable, il n'y a pas encore d'option, où vous pouvez réellement désactiver le pop-up de commentaire. Fonctionne très bien.
Messing
@tybro, si les noms de classe changent par hasard à partir de la fin de Facebook, alors bien sûr, on peut changer la règle facilement à partir du CSS également, cela ne nécessite aucun type de changement fonctionnel, c'est la solution la plus simple pour masquer le popup de commentaire jusqu'à ce que le time FB ne le rend pas configurable.
Mohammad Arif
14
Cela n'a pas fonctionné pour moi à partir du 12 février 2013. J'ai dû utiliser la solution de Kotzilla
Bashevis
81

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.

BrynJ
la source
5
C'est drôle pour moi que l'autre gars ait obtenu tous les votes. Peut-être que sa méthode permet d'économiser trois minutes, mais si Facebook change de cours, cela s'arrêtera.
tybro0103
@tybro Vous pouvez ajouter une classe à la balise fb et la styliser, de sorte que la modification de sa classe par fb n'affectera pas votre code.
Gangesh
1
@Gangesh Euh non, vous ne pouvez pas. Le balisage provient directement de Facebook sur lequel vous n'avez aucun contrôle.
tybro0103
@ tybro0103, j'ai ajouté une méthode qui ne cassera pas même si FB change de classe
Zorox
Merci beaucoup @BrynJ
Abhishek
69

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-

Elmer
la source
4
Après avoir essayé les autres solutions, celle-ci a fonctionné le mieux. Iframe ne convient pas car je dois m'abonner à l'événement edge.create. Le rendu de la balise div dans le gestionnaire d'événements edge.create avait un peu de retard. L'autre solution CSS utilisant ".fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr" ne fonctionnait pas non plus pour moi.
CodeWarrior
C'est le seul qui a fonctionné pour moi aussi. J'utilise la méthode non iframe comme incorporée.
TK123
4
Ne fonctionne pas vraiment (janvier 2014). Il ne désactive pas la zone de commentaire, il la masque simplement. Si vous appuyez sur le bouton J'aime (veillez à actualiser votre page après avoir supprimé le lien avec lequel vous testez) et que vous commencez à taper, le <div>reste de la même taille mais affiche la zone de saisie de texte, puis appuyez sur tab et les boutons Fermer et Publier deviennent visibles . Pas bon. Je testais avec Firefox.
Annabel
yeeeaaahh, cette solution qui fonctionne vraiment, merci !!
Michael
14

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;
}
Kotzilla
la source
4
C'est en fait la meilleure solution de contournement que j'ai trouvée. Si vous utilisez la disposition du nombre de boîtes, utilisez le CSS suivant: .fb-like {overflow: hidden; hauteur: 61px; } Vous verrez juste la petite encoche sur le bouton like mais vous ne serez plus ennuyé par cette stupide popup.
NicolasBernier
Pour le thème minimal shopify, cette utilisation d'une div d'emballage fonctionnait à la fois sur le Web et sur le mobile, tout en remplaçant simplement la classe de type fb directement sur le Web mais pas sur le mobile (en raison de l'inclusion de classes spécifiques aux médias supplémentaires)
gamozzii
9

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

Zorox
la source
4
J'ai utilisé cette solution car avec les styles css, je ne peux pas cacher un div dans une iframe.
Pons
c'est vraiment intelligent, cependant, la boîte de commentaires peut être vue très peu de temps
pinkdawn
1
Je n'appellerais pas cela une bonne solution "vraiment intelligente" - cela implique de supprimer le balisage du bouton J'aime (mais de rendre orphelin du code de gestion d'événements), de faire un nouvel ajout au DOM, de réanalyser le DOM de la page entière pour XFBML et de régénérer un nouveau bouton J'aime, ce qui signifie plus de gestionnaires d'événements, un repeint et une redistribution, quelques nouvelles demandes, etc. J'appellerais en fait cela une mauvaise solution, ou peut-être pas une solution du tout puisque ce que vous faites est comme mettre à jour votre navigateur en acheter un nouvel ordinateur.
AndrewF
1
Vous avez une meilleure idée? Cette putain de boîte de commentaires ne disparaîtra pas autrement.
Amalgovinus
@AndrewF - meilleure idée alors?
Jeremy Haile
5

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

Sahil Mittal
la source
4

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/

Daniel Krueger
la source
1
Cela ne répond pas à la question. Veuillez ajouter des remarques en guise de commentaire.
Trinimon
2
C'est ironique - c'est la boîte de commentaires f * cking qui cache mon bouton J'aime !!
Amalgovinus
3

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;
}
symulation
la source
3

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>
Gerbus
la source
Peut confirmer que la solution de conteneur div 20px est la seule qui fonctionne.
Bashevis
2

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;
}
MaxK
la source
2

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.

Shay Narang
la source
Si vous n'avez pas besoin de l'auditeur de l'événement, c'est la meilleure réponse officielle. Merci mec !!
Yahel
1

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>
Rafael
la source
Bien, c'était la meilleure solution que j'ai essayée depuis la page. Merci ENCORE @Rafael.
Stuart
1

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

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
Phạm Trực
la source
1

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.

Bill Pairaktaridis
la source
0

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.

tleo
la source
0

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.

jollyr0ger
la source
0

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);        
});
Stéphane Brillant
la source
Comment suis-je censé créer des règles CSS pour le contenu iframed sur un autre domaine? Sans parler des classes css dont les noms seront différents le mois prochain?
Amalgovinus
0

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

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

#fb_button{
overflow:hidden;
}
Akshat
la source
0

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.

Graham McLellan
la source