Tombol Suka Facebook - bagaimana cara menonaktifkan pop up Komentar?

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.

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

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

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-

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

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

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

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/

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

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>

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

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.

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>

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

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

1. Tampilkan wajah: -> hapus centang
2. Dapatkan Kode: -> pilih opsi IFRAME

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.

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

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.

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

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

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

#fb_button{
overflow:hidden;
}

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

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

Itu dia.