Tombol Suka Facebook - bagaimana cara menonaktifkan pop up Komentar?

107

Saya ingin menonaktifkan kotak Komentar yang muncul saat pengguna mengklik tombol Suka Facebook (fbml) yang saya tempatkan di situs saya. Apakah ini mungkin dilakukan? Saya tidak dapat menemukan detail apa pun di dokumentasi.

BrynJ
sumber
2
Tidak dapat menemukan jawaban untuk Anda. Apakah Anda menganggap "Like Box" sebagai solusi? developers.facebook.com/docs/reference/plugins/like-box . Anda dapat mematikan "Show Stream" dan "Show Header", dan mengatur "Connections" ke 0, dan itu membuat markup yang dihasilkan berukuran wajar.
zombat
Saya telah menambahkan jawaban yang saya temukan sebagai solusi.
BrynJ

Jawaban:

125

Perbaikan paling sederhana untuk menyembunyikan kotak komentar setelah Facebook Suka (versi XFBML bukan yang iframe) adalah seperti yang diberikan:

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

Letakkan gaya CSS di salah satu file CSS Anda dan lihat keajaibannya, berhasil :)

Mohammad Arif
sumber
Terima kasih Jonathan meskipun saya bukan yang terbaik :) Saya berjuang dalam hal yang sama dan hanya mencoba menyelesaikan menggunakan CSS daripada mencari solusi mewah dan itu bekerja 'seperti pesona' :)
Mohammad Arif
8
Tidak ada yang mengira jawaban BrynJ mungkin yang terbaik? Jika facebook mengubah kelasnya di markup, metode ini akan rusak.
tybro0103
Luar biasa belum ada pilihan, di mana Anda benar-benar dapat menonaktifkan pop-up komentar. Bekerja dengan baik.
Messing
@tybro, jika nama kelas berubah secara kebetulan dari Facebook berakhir maka tentu saja seseorang dapat mengubah aturan dengan mudah dari CSS juga, itu tidak memerlukan perubahan fungsional apa pun, itu cara termudah untuk menyembunyikan popup komentar hingga waktu FB tidak membuatnya dapat dikonfigurasi.
Mohammad Arif
14
Ini tidak berhasil untuk saya sejak 12 Feb 2013. Harus menggunakan solusi Kotzilla
Bashevis
81

Menempatkan iframe dalam div berukuran tepat dengan overflow disetel ke hidden menyelesaikan masalah ini - meskipun ini sebenarnya hanya menyembunyikan masalah seperti itu.

BrynJ
sumber
5
Lucu bagi saya bahwa orang lain mendapatkan semua suara. Mungkin metodenya menghemat tiga menit, tetapi jika facebook mengubah kelas mereka, itu akan rusak.
tybro0103
@tybro Anda dapat menambahkan kelas ke tag fb dan menatanya, jadi fb mengubah kelasnya tidak akan mempengaruhi kode Anda.
Gangesh
1
@ Gangesh Um tidak, kamu tidak bisa. Markup datang langsung dari Facebook yang tidak dapat Anda kendalikan.
tybro0103
@ tybro0103, saya menambahkan metode yang tidak akan rusak bahkan jika FB mengubah kelas mereka
Zorox
Terima kasih banyak @BrynJ
Abhishek
69

Saya menggunakan ini di CSS saya:

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

dan render tombol Facebook dengan kode HTML5 normal, seperti ini:

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

gr-

Elmer
sumber
4
Setelah mencoba solusi lain, solusi ini bekerja paling baik. Iframe tidak cocok karena saya perlu berlangganan acara edge.create. Merender ulang tag div di event handler edge.create mengalami sedikit jeda. Solusi CSS lain yang menggunakan ".fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr" juga tidak berhasil untuk saya.
CodeWarrior
Ini adalah satu-satunya yang berhasil untuk saya juga. Saya menggunakan metode semat non iframe like.
TK123
4
Tidak benar-benar berfungsi (Jan 2014). Itu tidak menonaktifkan kotak komentar itu hanya menyembunyikannya. Jika Anda menekan tombol Suka (hati-hati untuk menyegarkan halaman Anda setelah tidak menyukai tautan yang Anda uji) dan kemudian mulai mengetik, <div>ukurannya tetap sama tetapi menampilkan kotak entri teks, lalu tekan tab dan tombol Tutup dan Poskan menjadi terlihat . Tidak baik. Saya menguji dengan Firefox.
Annabel
yeeeaaahh, solusi ini benar-benar berfungsi, terima kasih !!
Michael
14

Yang saya lakukan adalah membuat div untuk tombol "suka" seperti ini:

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

Dan inilah CSS-nya:

.fb_like {  
  overflow: hidden;
  width: 90px;
}
Kotzilla
sumber
4
Ini sebenarnya adalah solusi terbaik yang saya temukan. Jika Anda menggunakan tata letak hitungan kotak, gunakan CSS berikut: .fb-like {overflow: hidden; tinggi: 61px; } Anda hanya akan melihat takik kecil di atas tombol suka tetapi Anda tidak akan terganggu oleh sembulan bodoh ini lagi.
NicolasBernier
Untuk tema minimal shopify, penggunaan div pembungkus ini bekerja di web dan seluler, sementara hanya menimpa kelas seperti fb yang langsung berfungsi di web tetapi tidak seluler (karena kelas khusus media tambahan disertakan)
gamozzii
9

Saya menyukai solusi Mohammed Arif dan saya memilihnya sebagai jawaban terbaik. Tetapi jika FB mengubah kelas, maka perintah di bawah ini akan selalu berfungsi ..

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

di mana "like_button_holder" adalah id div "ANDA" yang menahan kode tombol suka facebook

Zorox
sumber
4
Saya telah menggunakan solusi ini karena dengan gaya css saya tidak dapat menyembunyikan div di dalam iframe.
Pons
ini sangat cerdas, namun, kotak komentar dapat dilihat dalam waktu yang sangat singkat
pinkdawn
1
Saya tidak akan menyebut ini sebagai solusi yang "benar-benar cerdas" - ini melibatkan penghapusan markup tombol Suka (tetapi menghilangkan beberapa kode penanganan acara), membuat tambahan baru pada DOM, mem-parsing ulang seluruh halaman DOM untuk XFBML, dan membuat ulang tombol Like baru, yang berarti lebih banyak event handler, pengecatan ulang dan perubahan posisi, beberapa permintaan baru, dll. Saya akan menyebutnya sebagai solusi yang buruk, atau mungkin bukan solusi sama sekali karena apa yang Anda lakukan seperti mengupgrade browser Anda dengan membeli komputer baru.
AndrewF
1
Punya ide yang lebih baik? Kotak komentar sialan itu tidak akan hilang jika tidak.
Amalgovinus
@AndrewF - ide yang lebih baik?
Jeremy Haile
5

The solusi bersih yang bekerja (pada Mei 2014 ) -

  1. Pertama-tama pastikan properti <div class="fb-like" memiliki data-layout sebagai tombol -

    <div class="fb-like" data-layout="button"........></div>
    
  2. Tambahkan saja CSS ini-

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

Itu dia!

Demo

Sahil Mittal
sumber
4

Bukan menjadi Debby Downer di sini, tetapi tidak menyembunyikan kotak komentar melanggar Kebijakan Facebook?

IV. Titik Integrasi Aplikasi d. Anda tidak boleh mengaburkan atau menutupi elemen plugin sosial kami, seperti tombol Suka atau plugin kotak Suka.

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

Daniel Krueger
sumber
1
Itu tidak memberikan jawaban atas pertanyaan itu. Mohon komentar tambahan sebagai komentar.
Trinimon
2
Itu ironis - itu adalah kotak komentar sialan yang menyembunyikan tombol suka saya !!
Amalgovinus
3

Saya tidak bisa mendapatkan display: noneopsi untuk bekerja dengan tombol versi HTML 5. Sebagai gantinya saya menargetkan div tempat tombol tombol suka dibuat dan mengatur overflow menjadi tersembunyi.

Menjatuhkan perintah berikut di file css utama saya berhasil:

#fb_button{
    overflow:hidden;
}
simpulasi
sumber
3

Setuju dengan BrynJ, solusi terbaik saat ini adalah meletakkan tombol suka dalam wadah div tinggi 20px, dan mengatur overflow ke tersembunyi (saya membaca di suatu tempat bahwa FB baru-baru ini memindahkan flyout komentar ke iFrame, jadi solusi yang mengubah gaya . fb_edge_widget_with_comment mungkin sudah tidak berguna lagi untuk pengguna iFrame).

Menggunakan AddThis? Melakukan hal ini:

<div class="container" style="height: 20px; overflow: hidden;">
  <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like"></a>
  </div>
</div>
Gerbus
sumber
Dapat mengonfirmasi bahwa solusi wadah div 20px adalah satu-satunya yang berfungsi.
Bashevis
2

Jika tombol suka menghilang saat Anda mengeklik "suka" dan Anda memiliki div kontainer untuk menyembunyikan pop-up komentar, gunakan solusi berikut:

buat div kontainer untuk menempatkan tombol seperti fb dan berikan css berikut:

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

.fb_like iframe {
  left: 0 !important;
}
MaxK
sumber
2

Saya berhasil menghindari masalah pop-up komentar tombol suka Facebook dengan menerapkan versi IFRAME sebagai gantinya. Saya mengambil langkah-langkah berikut untuk melakukannya:

  1. Mengunjungi https://developers.facebook.com/docs/plugins/like-button/
  2. Ubah 'URL menjadi Suka' ke URL halaman Facebook Anda
  3. Pilih opsi lain (Tata Letak, Jenis Tindakan, dll) sesuai keinginan
  4. Tekan tombol 'Dapatkan Kode'
  5. Pilih versi IFRAME
  6. Pastikan Anda memilih aplikasi Facebook yang bertuliskan 'Skrip ini menggunakan ID aplikasi dari aplikasi Anda'
  7. Terapkan kode yang disediakan dalam aplikasi Anda

Dari apa yang saya lihat, tombol suka dengan penerapan IFRAME tidak memicu sembulan apa pun. Ini hanya berfungsi sebagai tombol suka. Ini adalah hasil yang saya inginkan.

Semoga berhasil.

Shay Narang
sumber
Jika Anda tidak membutuhkan pendengar acara, ini adalah jawaban resmi terbaik. Terima kasih sobat !!
Yahel
1

Berikut adalah kode agar tombol Suka berfungsi hanya sebagai tombol standar bersama dengan Twitter dan Linkedin. Semoga membantu.

<!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>
Rafael
sumber
Bagus, ini adalah solusi terbaik yang saya coba dari halaman. Terima kasih LAGI @Rafael.
Stuart
1

Ayo coba yang ini:

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();
 });
Aamir Afridi
sumber
1

Seperti yang sudah saya lakukan, popup komentar akan dinonaktifkan ketika:

  1. Tampilkan wajah: -> hapus centang
  2. Dapatkan Kode: -> pilih opsi IFRAME
Trực Phạm
sumber
1

Jika Anda menggunakan tombol HTML5 yang lebih baru, dan Anda harus seperti itu kompatibel ke depan dan disarankan oleh Facebook, itu mudah, keluar dari apa yang orang lain katakan:

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

Kelas kedua adalah bonus bagi mereka yang menggunakan plugin AddThis.

Bill Pairaktaridis
sumber
0

Opsi ketinggian luapan yang disebutkan di atas tidak boleh digunakan saat show-faces=true. Jika tidak, itu akan menyembunyikan wajah.

tleo
sumber
0

Dalam kasus saya (dengan versi XFBML) saya telah menambahkan ke tag ini:

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

Jadi hasil akhirnya adalah:

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

Itu menyembunyikan dengan benar popup komentar.

jollyr0ger
sumber
0

Menyembunyikan kotak komentar berfungsi tetapi dapat menimbulkan masalah jika Anda memiliki elemen yang dapat diklik di belakang kotak flyout komentar.

Anda harus menyembunyikannya dan menghapusnya dari postingan DOM seperti.

Berikut adalah CSS untuk menyembunyikan kotak komentar:

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

Berikut adalah cara JQuery untuk menghapus elemen DOM:

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

Berikut adalah cara javascript murni menggunakan widget yang disediakan dari callback:

FB.Event.subscribe('edge.create', function (href, widget) {
    widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);        
});
Stephane Brillant
sumber
Bagaimana cara membuat aturan css untuk konten iframed di domain lain? Apalagi kelas css yang namanya akan berbeda bulan depan?
Amalgovinus
0

Jika Anda hanya ingin menampilkan tombol suka, Anda dapat mencoba sesuatu seperti ini

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;
}
pengguna0000001
sumber
0

Mengatur overflow ke hidden mungkin membantu. Lakukan ini di file css utama Anda ..

#fb_button{
overflow:hidden;
}
Akshat
sumber
0

Bagaimana kalau iframe yang berisi tombol like berukuran sama dengan tombolnya:

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

Itu dia.

Graham McLellan
sumber