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.
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.
Réponses:
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-
<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.
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 ) -
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>
Ajoutez simplement ce CSS-
.fb-like{
overflow: hidden !important;
}
C'est tout!
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.
Je n'ai pas pu avoir la display: none
possibilité 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:
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&send=false&layout=button_count&width=45&show_faces=false&font&colorscheme=light&action=like&height=21&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();
});
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.
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;
}
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.