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


107

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.


2
Nie mogłem znaleźć odpowiedzi. Czy rozważałeś „Like Box” jako obejście? developers.facebook.com/docs/reference/plugins/like-box . Możesz wyłączyć „Pokaż strumień” i „Pokaż nagłówek” i ustawić „Połączenia” na 0, co sprawi, że wynikowe znaczniki będą miały rozsądny rozmiar.
zombat

Dodałem odpowiedź, którą znalazłem jako obejście.
BrynJ

Odpowiedzi:


125

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


Dzięki Jonathanowi, chociaż nie jestem najlepszy :) Walczyłem z tym samym i po prostu próbowałem rozwiązać za pomocą CSS, raczej szukając fantazyjnych rozwiązań i zadziałało `` jak urok '' :)
Mohammad Arif

8
Czy nikt nie uważa, że ​​odpowiedź BrynJ może być najlepsza? Jeśli Facebook zmieni swoje klasy w znacznikach, ta metoda się zepsuje.
tybro0103

Niesamowite, nie ma jeszcze żadnej opcji, w której faktycznie można wyłączyć wyskakujące okienko komentarza. Działa świetnie.
Messing,

@tybro, jeśli nazwy klas zmieniają się przypadkowo z Facebooka, to oczywiście można łatwo zmienić regułę również z poziomu CSS, nie wymaga to żadnej zmiany funkcjonalnej, to najłatwiejsza naprawa, aby ukryć okienko komentarza do czas FB nie czyni go konfigurowalnym.
Mohammad Arif,

14
To nie zadziałało od 12 lutego 2013 r. Musiałem użyć rozwiązania Kotzilli
Bashevis

81

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.


5
Zabawne dla mnie, że ten drugi facet dostał wszystkie głosy. Być może jego metoda oszczędza trzy minuty, ale jeśli facebook zmieni ich zajęcia, to się zepsuje.
tybro0103

@tybro Możesz dodać klasę do tagu fb i nadać mu styl, więc zmiana klasy fb nie wpłynie na twój kod.
Gangesh

1
@Gangesh Um nie, nie możesz. Znaczniki pochodzą bezpośrednio z Facebooka, nad którym nie masz kontroli.
tybro0103

@ tybro0103, dodałem metodę, która nie zepsuje się, nawet jeśli FB zmieni ich klasy
Zorox

Dziękuję bardzo @BrynJ
Abhishek

69

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-


4
Po wypróbowaniu innych rozwiązań ten działał najlepiej. Element iframe nie jest odpowiedni, ponieważ muszę zasubskrybować zdarzenie edge.create. Ponowne renderowanie znacznika div w procedurze obsługi zdarzeń edge.create powodowało pewne opóźnienie. Inne rozwiązanie CSS wykorzystujące „.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr” też nie działało.
CodeWarrior

To jedyny, który też działał dla mnie. Używam metody osadzania innej niż iframe.
TK123

4
Naprawdę nie działa (styczeń 2014). Nie wyłącza pola komentarza, po prostu je ukrywa. Jeśli naciśniesz przycisk Lubię to (pamiętaj, aby odświeżyć stronę po usunięciu polubienia linku, z którym testujesz), a następnie zaczniesz pisać, <div>pozostanie ten sam rozmiar, ale pokaże pole wprowadzania tekstu, a następnie naciśnij klawisz Tab oraz Zamknij i Opublikuj staną się widoczne . Niedobrze. Testowałem w przeglądarce Firefox.
Annabel

yeeeaaahh, to rozwiązanie, które naprawdę działa, dziękuję !!
Michael

14

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

4
To właściwie najlepsze obejście, jakie znalazłem. Jeśli używasz układu liczby pudełek, użyj następującego kodu CSS: .fb-like {overflow: hidden; wysokość: 61px; } Zobaczysz tylko małe nacięcie nad podobnym przyciskiem, ale nie będziesz już zirytowany tym głupim wyskakującym okienkiem.
NicolasBernier

W przypadku motywu Shopify minimal to użycie opakowującego elementu div działało zarówno w Internecie, jak i na urządzeniach mobilnych, podczas gdy po prostu zastępowało klasę podobną do fb, która działała bezpośrednio w Internecie, ale nie na urządzeniach mobilnych (z powodu uwzględnienia dodatkowych klas specyficznych dla mediów)
gamozzii

9

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


4
Użyłem tego rozwiązania, ponieważ w stylach css nie mogę ukryć elementu div w ramce iframe.
Pons

to naprawdę sprytne, jednak pole komentarza można było zobaczyć przez bardzo krótki czas
pinkdawn

1
Nie nazwałbym tego „naprawdę sprytnym” dobrym rozwiązaniem - polega na usunięciu znacznika przycisku Like (ale osieroceniu kodu obsługi zdarzenia), dodaniu nowego dodatku do DOM, ponownym przeanalizowaniu DOM całej strony pod kątem XFBML i odtworzeniu nowy przycisk Lubię to, co oznacza więcej programów obsługi zdarzeń, ponowne malowanie i ponowne wlanie, kilka nowych żądań itp. Właściwie nazwałbym to złym rozwiązaniem, a może wcale nie, ponieważ to, co robisz, jest jak aktualizowanie przeglądarki przez kupno nowego komputera.
AndrewF

1
Masz lepszy pomysł? W przeciwnym razie to przeklęte pole komentarza nie zniknie.
Amalgovinus

@AndrewF - to lepszy pomysł?
Jeremy Haile

5

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


4

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/


1
To nie daje odpowiedzi na pytanie. Prosimy o dodatkowe uwagi jako komentarz.
Trinimon

2
To ironiczne - to pieprzone pole komentarza ukrywa mój przycisk polubienia !!
Amalgovinus

3

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

3

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>

Potwierdza, że ​​kontener div 20px jest jedynym działającym rozwiązaniem.
Bashevis

2

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

2

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.


Jeśli nie potrzebujesz słuchacza wydarzeń, to jest najlepsza oficjalna odpowiedź. Dzięki !!
Yahel

1

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>

Fajnie, to było najlepsze rozwiązanie, które wypróbowałem ze strony. Dzięki PONOWNIE @Rafael.
Stuart

1

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

1

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

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

1

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.


0

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


0

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.


0

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

Jak mam utworzyć reguły css dla zawartości iframe w innej domenie? Nie mówiąc już o klasach css, których nazwy zmienią się w przyszłym miesiącu?
Amalgovinus

0

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

0

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

#fb_button{
overflow:hidden;
}

0

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.