Facebook Like-Button - masquer le compte?
Dans la boîte de dialogue setup du bouton Like, il n'y a que deux options pour la mise en page:
Malheureusement, les chiffres pour le site Web de mon employeur sont très proches de 22 000, aussi les pouvoirs en place ont-ils décidé de ne pas indiquer le nombre de "j'aime" tant que ce nombre ne nous est pas favorable. Pour autant que je sache, je n'ai pas accès à la disposition du bouton via Javascript ou CSS (c'est dans un iframe servi par facebook). Y a-t-il d'autres moyens de cacher le compte?
Le bouton J'aime codé pour afficher "Recommander" a une largeur de 84px et le bouton "J'aime" est de 44px, vous permettra d'économiser du temps pour les gars CSS comme moi qui doivent cacher à quel point ma page est impopulaire! Je mets ce code en haut de ma page d’accueil, donc au départ, je ne veux pas qu’il annonce le peu de «J'aime» que j’ai.
Si vous faites overflow:hidden, gardez à l'esprit qu'il masquera également la zone de commentaire qui apparaît dans la version XFBML ... après que l'utilisateur l'ait aimé. Donc mieux si vous faites cela ...
/* make the like button smaller */
.fb_Edge_widget_with_comment iframe
{
width:47px !important;
}
/* but make the span that holds the comment box larger */
span.fb_Edge_comment_widget.fb_iframe_widget iframe
{
width:401px !important;
}
La réponse acceptée est bonne, mais soyez prudent avec les pages multilingues. La longueur du texte est différente:
Anglais: comme
Néerlandais: Vind ik leuk
Allemand: Gefällt mir
Juste un heads-up.
Il suffit d’englober l’iframe dans un div en définissant la largeur sur celle du bouton, en définissant le débordement sur hidden.
<div style="width:52px;overflow:hidden;">
<fb:like layout="button_count"></fb:like>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR_APP_ID',
status: true,
cookie: true,
xfbml: true
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
</div>
Il est maintenant officiellement soutenu par Facebook. Il suffit de sélectionner la disposition 'Bouton'.
Si vous utilisez le bouton "J'aime" de Facebook (vous pouvez donc capturer des événements similaires), voici ce que nous devions faire:
En raison d'une modification apportée récemment par Facebook dans l'affichage des boîtes de dialogue de commentaires, nous avons dû modifier la manière dont nous la masquions. La façon dont ils affichent la boîte de dialogue de commentaire "déplace" le contenu à l'intérieur de l'élément my overflow: hidden, de sorte que le bouton ait un aspect vraiment étrange pour l'utilisateur qui a cliqué sur le bouton J'aime.
En plus d'ajouter un élément d'habillage avec un style 'débordement: aucun', vous devrez également masquer l'élément de commentaire que Facebook met sur votre page:
Modes:
span.no_overflow {
overflow: none;
width: 50px;
}
.no_overflow span.fb_Edge_comment_widget.fb_iframe_widget {
display: none;
}
Balisage:
<span class="no_overflow">
<fb:like></fb:like>
</span>
Nous utilisons toujours le fb: comme le balisage. Je n'ai pas testé cela avec le nouveau balisage basé sur les divs que Facebook fournit maintenant sur leur site.
Je sais que de nombreuses solutions ont déjà été affichées, mais la mienne est encore un peu différente. Cela fonctionne pour la version HTML5 du bouton "J'aime" et utilise uniquement CSS pour masquer la case de nombre. N'oubliez pas d'ajouter la variable appId à tester.
CSS:
<style type="text/css">
.fb-like span {
display: block;
height: 22px;
overflow: hidden;
position: relative;
width: 140px /* set this to fit your needs when support international sites */;
}
.fb-like iframe {
height: 62px;
overflow: hidden;
position: absolute;
top: -41px;
width: 55px;
}
</style>
FB comme bouton:
<div id="fb-root"></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_GB/all.js#xfbml=1&appId=xxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="true" data-layout="box_count" data-width="450" data-show-faces="false"></div>
La plupart des suggestions sont maintenant, ne sont plus valables.
La solution correcte à partir d’aujourd’hui consiste à utiliser la disposition «bouton».
par exemple. <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
Les documents FB ne semblent pas encore être complètement mis à jour. Si vous faites défiler l'écran vers le bas, vous verrez qu'ils ne disposent que de 3 dispositions disponibles, mais le menu déroulant suggère 4.
Cela signifie que vous pouvez maintenant utiliser une solution moins astucieuse!
On dirait que FaceBook a récemment changé de code - chaque fois que je cliquais sur "J'aime", le contenu sautait à gauche, gâchant ainsi l'interface utilisateur. Aucune astuce CSS/JS ne l'a fait fonctionner. Je suis allé avec une solution plus simple, en utilisant un iframe.
REMARQUE - Bien que certains appareils prennent déjà en charge les cadres iFrames, tous les appareils mobiles ne le font pas. Les iFrames sont en réalité vieux et pas du tout recommandés, mais cela a fait le tour pour moi.
Prenons le script par défaut de génération similaire de facebook et générons un iFrame like box;
Cliquez ici pour générer un bouton comme
Optez pour le style "Box_Count", avec un compteur en haut.
Lorsque vous appuyez sur "Saisir le code", optez pour le code iFrame. Vous obtiendrez quelque chose de similaire à ceci;
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&send=false&layout=box_count&width=45056&show_faces=false&font&colorscheme=light&action=like&height=90&appId=1234567891011" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:45056px; height:90px;" allowTransparency="true"></iframe>
Passons maintenant à une div.
<div class="like_wrap">
<iframe (...)></iframe>
</div>
Donnez-lui le CSS suivant:
.like_wrap {
width:55px;
height:25px;
overflow:hidden;
}
Maintenant, vous verrez probablement le coin supérieur gauche du comptoir. Maintenant, nous devons réparer l'iFrame. Donnez-lui une classe;
<iframe class="like_box" (...)> </iframe>
Et faites en sorte que ce soit toujours anglais, en ajoutant "& locale = en_US" à l'URL. Ceci afin d'éviter des mises en page étranges dans d'autres pays - en néerlandais, ce serait "Vind ik leuk" et en anglais "Like". Je suppose que tout le monde, dans toutes les langues, connaît un "J'aime", alors restons avec cela.
Nous allons maintenant ajouter un peu plus de CSS pour la like_box;
.like_box {
margin-top:-40px;
}
Donc tout le code ressemble à ceci (j'ai supprimé app_id car je n'en avais pas besoin)
HTML:
<div class="like_wrap">
<iframe class="like_box"
src="//www.facebook.com/plugins/like.php?href=CURRENT-URL-ENCODED&send=false&layout=box_count&width=45056&show_faces=false&font&colorscheme=light&action=like&height=90&locale=en_US"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:45056px; height:90px;"
allowTransparency="true"></iframe>
</div>
CSS:
.like_wrap {
width:55px;
height:25px;
overflow:hidden;
}
.like_box {
margin-top:-40px;
}
Et maintenant, j’ai une petite boîte décente qui fonctionne bien et ne saute pas. Faites-moi savoir comment cela fonctionne pour vous et s'il y a des problèmes que vous rencontrez.
Ma solution est un petit capot mais ça marche. Ce que je fais est simplement de détecter le numéro du numéro et d’utiliser css pour le recouvrir d’une boîte. Je suppose que vous pouvez également tromper le système et ajouter plus de résultats si vous le souhaitez. Voici mon code utilisant jquery mais il sera différent des autres en fonction de l'endroit où vous placez le bouton J'aime sur votre page.
Pas le plus glamour mais bon la sécurité est trop serrée pour manipuler le contenu dans le côté d'un cadre.
<script type="text/javascript">
var facebook_load = '';
$(document).ready(function() {
facebook_load = setInterval('checkIframeFacebookLoad()',100);
});
function checkIframeFacebookLoad() {
if($('iframe.fb_ltr').length) {
var parent = $('iframe.fb_ltr').parent();
var hide_counter = $('<div></div>').attr('id', 'hide_count');
parent.append(hide_counter);
clearInterval(facebook_load);
}
}
</script>
<style type="text/css">
#hide_count {
position:absolute;
top:-8px;
left:122px;
background:#becdd5;
padding:5px 10px;
}
</style>
cela a fonctionné pour moi:
.fb-like.fb_Edge_widget_with_comment.fb_iframe_widget {
height: 26px;
overflow: hidden;
width: 138px;
}
Ajouter ce qui suit à votre css devrait cacher l’élément de texte pour les utilisateurs et garder le FB heureux
.connect_widget_not_connected_text
{
display:none !important; /*in your stylesheets to hide the counter!*/
}
-- Mettre à jour
Essayez d'utiliser une approche différente.
Facebook prend maintenant en charge le masquage du nombre, utilisez ceci dans le balisage:
data-layout="button"