Przycisk Lubię to na Facebooku - jak wyłączyć wyskakujące okienko komentarza?

Chciałbym wyłączyć pole komentarza, które pojawia się, gdy użytkownik kliknie przycisk „Lubię to” Facebooka (fbml), który umieściłem na mojej stronie. Czy to się da zrobić? W dokumentacji nie mogę znaleźć żadnych szczegółów.

Najprostsza poprawka polegająca na ukryciu pola komentarza po polubieniu na Facebooku (wersja XFBML, a nie iframe) jest taka, jak podano:

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

Umieść styl CSS w dowolnym pliku CSS i zobacz magię, działa :)

Umieszczenie elementu iframe w elemencie div o odpowiednim rozmiarze z ustawieniem przepełnienia ustawionym na ukryty rozwiązało ten problem - chociaż tak naprawdę tylko ukrywa problem jako taki.

Używam tego w moim CSS:

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

i wyrenderuj przycisk Facebooka z normalnym kodem HTML5, coś takiego:

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

gr-

Utworzyłem element div dla przycisku „Lubię to” w ten sposób:

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

A to jest CSS:

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

Podoba mi się rozwiązanie Mohammeda Arifa i wybieram je jako najlepszą odpowiedź. Ale w przypadku, gdy FB zmienił klasy, to zawsze zadziała poniższe.

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

gdzie „like_button_holder” to „TWÓJ” identyfikator div z kodem przycisku Facebooka

Roztwór czyszczący , który działa (od maja 2014 ) -

1. Przede wszystkim upewnij się, że właściwość <div class="fb-like" has data-layout jako przycisk -

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

2. Po prostu dodaj ten CSS-

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

Otóż ​​to!

Próbny

Nie być tutaj Debby Downerem, ale czy ukrywanie pola komentarzy nie narusza Polityki Facebooka?

IV. Punkty integracji aplikacji d. Nie wolno zasłaniać ani zakrywać elementów naszych wtyczek społecznościowych, takich jak przycisk „Lubię to” czy wtyczka „Lubię to”.

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

Nie mogłem uzyskać display: noneopcji pracy z wersją HTML 5 przycisku. Zamiast tego nakierowałem na element div, w którym utworzono przycisk „Lubię to”, i ustawiłem przepełnienie na ukryte.

Upuszczenie następujących elementów w moim głównym pliku css załatwiło sprawę:

#fb_button{
    overflow:hidden;
}

Zgadzam się z BrynJ, obecnie najlepszym rozwiązaniem jest umieszczenie podobnego przycisku w kontenerze div o wysokości 20px i ustawienie przepełnienia na ukryty (czytałem gdzieś, że FB niedawno przeniósł wysuwany komentarz do iFrame, więc rozwiązanie, które modyfikuje stylizację . fb_edge_widget_with_comment prawdopodobnie nie jest już przydatny dla użytkowników iFrame).

Korzystasz z AddThis? Zrób to:

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

Jeśli przycisk „Lubię to” znika po kliknięciu „Lubię to” i masz kontener div, aby ukryć wyskakujące okienko komentarza, użyj następującego rozwiązania:

utwórz element div kontenera, w którym umieścisz przycisk podobny do fb i nadaj mu następujący CSS:

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

.fb_like iframe {
  left: 0 !important;
}

Udało mi się obejść problem z wyskakującym okienkiem komentarza na Facebooku, wprowadzając zamiast tego wersję IFRAME. W tym celu wykonałem następujące kroki:

1. Odwiedź https://developers.facebook.com/docs/plugins/like-button/
2. Zmień adres URL do polubienia na adres URL swojej strony na Facebooku
3. Wybierz dowolne inne opcje (układ, typ akcji itp.)
4. Naciśnij przycisk „Uzyskaj kod”
5. Wybierz wersję IFRAME
6. Upewnij się, że wybrałeś aplikację Facebook, w której jest napisane „Ten skrypt używa identyfikatora Twojej aplikacji”
7. Zaimplementuj podany kod w swojej aplikacji

Z tego co widzę, podobny przycisk z implementacją IFRAME nie wywołuje żadnego wyskakującego okienka. Po prostu działa jak podobny przycisk. To był mój upragniony rezultat.

Powodzenia.

Oto kod, dzięki któremu przycisk Lubię to działa jako zwykły przycisk wraz z serwisem Twitter i Linkedin. Mam nadzieję, że to pomoże.

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

Spróbujmy tego:

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

Jak już zrobiłem, okienko z komentarzem zostanie wyłączone, gdy:

1. Pokaż twarze: -> odznacz to
2. Pobierz kod: -> wybierz opcję IFRAME

Jeśli używasz nowszego przycisku HTML5 i powinieneś, ponieważ jest on zgodny z przyszłymi wersjami i sugerowany przez Facebooka, jest to łatwe, wychodząc od tego, co powiedzieli inni:

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

Druga klasa to bonus dla osób korzystających z wtyczki AddThis.

Wspomniane powyżej opcje wysokości przelewu nie powinny być używane, gdy show-faces=true. W przeciwnym razie ukryje twarze.

W moim przypadku (z wersją XFBML) dodałem do tagu to:

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

Wynik końcowy to:

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

Prawidłowo ukrywa okienko komentarza.

Ukrywanie pola komentarza działa, ale może spowodować problem, jeśli za polem wysuwanym komentarza znajduje się klikalny element.

Musisz go ukryć i usunąć z postu DOM, np.

Oto CSS do ukrycia pola komentarza:

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

Oto sposób usuwania elementu DOM w JQuery:

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

Oto czysty sposób javascript przy użyciu widżetu dostarczonego z wywołania zwrotnego:

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

Jeśli chcesz pokazać tylko przycisk „Lubię to”, możesz spróbować czegoś takiego

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

Pomocne może być ustawienie przepełnienia na ukryte. Zrób to w swoim głównym pliku css ..

#fb_button{
overflow:hidden;
}

Co powiesz na to, aby element iframe zawierający podobny przycisk miał taki sam rozmiar jak przycisk:

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

Otóż ​​to.