Pulsante Mi piace di Facebook: come disabilitare la comparsa dei commenti?

Vorrei disabilitare la casella Commento che si apre quando un utente fa clic sul pulsante Mi piace di Facebook (fbml) che ho inserito nel mio sito. È possibile farlo? Non riesco a trovare alcun dettaglio nella documentazione.

La soluzione più semplice per nascondere la casella dei commenti dopo Facebook Like (versione XFBML non iframe) è quella fornita:

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

Metti lo stile CSS in uno qualsiasi dei tuoi file CSS e vedi la magia, funziona :)

Mettere l'iframe in un div di dimensioni appropriate con overflow impostato su nascosto ha risolto questo problema, sebbene questo in realtà nasconda il problema in quanto tale.

Lo uso nel mio CSS:

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

e renderizza il pulsante Facebook con il normale codice HTML5, qualcosa del genere:

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

GR-

Quello che ho fatto è creare un div per il pulsante "mi piace" in questo modo:

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

E questo è il CSS:

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

Mi piace la soluzione di Mohammed Arif e la scelgo come la migliore risposta. Ma nel caso in cui FB abbia cambiato classe, il seguito funzionerà sempre.

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

dove "like_button_holder" è il "TUO" div id che contiene il codice del pulsante Mi piace di Facebook

La soluzione più pulita che funziona (a partire da maggio 2014 ) -

1. Prima di tutto assicurati che <div class="fb-like" abbia la proprietà data-layout come pulsante -

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

2. Basta aggiungere questo CSS-

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

Questo è tutto!

dimostrazione

Non essere un Debby Downer qui, ma nascondere la casella dei commenti non viola la politica di Facebook?

IV. Punti di integrazione dell'applicazione d. Non devi nascondere o coprire elementi dei nostri plug-in social, come il pulsante Mi piace o il plug-in della casella Mi piace.

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

Non sono riuscito a ottenere l' display: noneopzione per lavorare con la versione HTML 5 del pulsante. Invece ho scelto come target il div in cui è stato creato il pulsante del pulsante Mi piace e ho impostato l'overflow su nascosto.

L'eliminazione di quanto segue nel mio file css principale ha fatto il trucco:

#fb_button{
    overflow:hidden;
}

D'accordo con BrynJ, la soluzione migliore attualmente è mettere il pulsante Mi piace in un contenitore div alto 20px e impostare l'overflow su nascosto (ho letto da qualche parte che FB ha recentemente spostato il riquadro a comparsa dei commenti nell'iFrame, quindi la soluzione che modifica lo stile di . fb_edge_widget_with_comment probabilmente non è più utile per gli utenti iFrame).

Usi AddThis? Fai questo:

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

Se il pulsante Mi piace scompare quando fai clic su "Mi piace" e hai un div contenitore per nascondere il popup del commento, utilizza la seguente soluzione:

creare un div contenitore per inserire il pulsante simile a fb e dargli il seguente css:

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

.fb_like iframe {
  left: 0 !important;
}

Sono riuscito a aggirare il problema del pop-up dei commenti del pulsante Mi piace di Facebook implementando invece la versione IFRAME. Ho seguito i seguenti passaggi per farlo:

1. Visita https://developers.facebook.com/docs/plugins/like-button/
2. Cambia l '"URL a cui piace" con l'URL della tua pagina Facebook
3. Selezionare qualsiasi altra opzione (layout, tipo di azione, ecc.) Come desiderato
4. Premi il pulsante "Ottieni codice"
5. Seleziona la versione IFRAME
6. Assicurati di selezionare la tua applicazione Facebook dove dice "Questo script usa l'ID app della tua app"
7. Implementa il codice fornito nella tua applicazione

Da quello che posso vedere, il pulsante Mi piace con l'implementazione IFRAME non attiva alcun popup. Funziona semplicemente come un pulsante simile. Questo era il mio risultato desiderato.

In bocca al lupo.

Ecco il codice per far funzionare il pulsante Mi piace come un pulsante standard insieme a Twitter e Linkedin. Spero che sia d'aiuto.

<!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>

Proviamo questo:

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

Come ho fatto bene, il popup dei commenti verrà disabilitato quando:

1. Mostra volti: -> deselezionalo
2. Ottieni codice: -> scegli l'opzione IFRAME

Se utilizzi il pulsante HTML5 più recente e dovresti, poiché è compatibile con le versioni successive e suggerito da Facebook, è facile, partendo da ciò che hanno detto gli altri:

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

La seconda classe è un bonus per coloro che utilizzano il plugin AddThis.

Le opzioni di altezza di overflow sopra menzionate non dovrebbero essere utilizzate quando show-faces=true . Altrimenti, nasconderà i volti.

Nel mio caso (con la versione XFBML) ho aggiunto al tag questo:

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

Quindi il risultato finale è:

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

Nasconde correttamente il popup dei commenti.

Nascondere la casella dei commenti funziona ma può creare problemi se si dispone di un elemento selezionabile dietro la casella a comparsa dei commenti.

Devi nasconderlo e rimuoverlo dal post DOM come.

Ecco il CSS per nascondere la casella dei commenti:

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

Ecco il modo JQuery di rimuovere l'elemento DOM:

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

Ecco il modo javascript puro utilizzando il widget fornito dalla richiamata:

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

Se vuoi mostrare solo il pulsante Mi piace, puoi provare qualcosa di simile

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

L'impostazione di overflow su nascosto potrebbe aiutare. Fallo nel tuo file css principale ..

#fb_button{
overflow:hidden;
}

Che ne dici di rendere l'iframe che contiene il pulsante Mi piace delle stesse dimensioni del pulsante:

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

Questo è tutto.