Facebook Like Button - Làm cách nào để tắt bình luận bật lên?

Tôi muốn tắt Hộp bình luận bật lên khi người dùng nhấp vào nút Thích trên Facebook (fbml) mà tôi đã đặt trên trang web của mình. Đây có phải là có thể làm gì? Tôi không thể tìm thấy bất kỳ chi tiết nào trong tài liệu.

Cách khắc phục đơn giản nhất để ẩn hộp bình luận sau khi Thích Facebook (phiên bản XFBML không phải iframe) như đã cho:

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

Đặt kiểu CSS vào bất kỳ tệp CSS nào của bạn và thấy điều kỳ diệu, nó hoạt động :)

Đặt iframe trong một div có kích thước thích hợp với phần tràn được đặt thành ẩn đã giải quyết được vấn đề này - mặc dù điều này chỉ thực sự ẩn vấn đề như vậy.

Tôi sử dụng cái này trong CSS của mình:

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

và hiển thị nút Facebook bằng mã HTML5 bình thường, giống như sau:

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

gr-

Những gì tôi đã làm là đóng một div cho nút "thích" như thế này:

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

Và đây là CSS:

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

Tôi thích giải pháp của Mohammed Arif và tôi chọn nó là câu trả lời tốt nhất. Nhưng trong trường hợp FB đổi lớp, thì bên dưới sẽ luôn hoạt động ..

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

trong đó "like_button_holder" là id div "CỦA BẠN" giữ mã nút like facebook

Các giải pháp sạch hơn mà làm việc (tính đến tháng 5 năm 2014 ) -

1. Trước hết đảm bảo sự <div class="fb-like" có dữ liệu bố trí tài sản như nút -

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

2. Chỉ cần thêm CSS này-

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

Đó là nó!

Bản giới thiệu

Không làm Debby Downer ở đây mà không ẩn ô bình luận có vi phạm Chính sách của Facebook không?

IV. Điểm tích hợp ứng dụng d. Bạn không được che khuất hoặc che đậy các yếu tố của plugin xã hội của chúng tôi, chẳng hạn như nút Thích hoặc plugin hộp Thích.

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

Tôi không thể có display: nonetùy chọn để làm việc với phiên bản HTML 5 của nút. Thay vào đó, tôi đã nhắm mục tiêu div mà nút nút like được tạo và đặt phần tràn thành ẩn.

Bỏ thông tin sau trong tệp css chính của tôi đã thực hiện thủ thuật:

#fb_button{
    overflow:hidden;
}

Đồng ý với BrynJ, giải pháp tốt nhất hiện tại là đặt nút like trong vùng chứa div cao 20px và đặt phần tràn thành ẩn (Tôi đọc ở đâu đó rằng FB gần đây đã chuyển phần bình luận vào iFrame, vì vậy giải pháp điều chỉnh kiểu của . fb_edge_widget_with_comment có lẽ không còn hữu ích cho người dùng iFrame).

Sử dụng AddThis? Làm cái này:

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

Nếu nút thích biến mất khi bạn nhấp vào "thích" và bạn có một div vùng chứa để ẩn cửa sổ bật lên nhận xét, thì hãy sử dụng giải pháp sau:

tạo một div vùng chứa để đặt nút giống fb vào và cung cấp cho nó đoạn css sau:

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

.fb_like iframe {
  left: 0 !important;
}

Thay vào đó, tôi đã tránh được sự cố bật lên nhận xét nút like Facebook bằng cách triển khai phiên bản IFRAME. Tôi đã thực hiện các bước sau để làm như vậy:

1. Truy cập https://developers.facebook.com/docs/plugins/like-button/
2. Thay đổi 'URL thành Thích' thành URL trang Facebook của bạn
3. Chọn bất kỳ tùy chọn nào khác (Bố cục, Loại hành động, v.v.) như mong muốn
4. Nhấn nút 'Lấy mã'
5. Chọn phiên bản IFRAME
6. Đảm bảo bạn chọn ứng dụng Facebook của mình có dòng chữ 'Tập lệnh này sử dụng ID ứng dụng của ứng dụng của bạn'
7. Triển khai mã được cung cấp trong ứng dụng của bạn

Từ những gì tôi có thể thấy, nút thích với triển khai IFRAME không kích hoạt bất kỳ cửa sổ bật lên nào. Nó chỉ đơn giản có chức năng như một nút like. Đây là kết quả mong muốn của tôi.

Chúc may mắn.

Đây là mã để nút Thích hoạt động như một nút tiêu chuẩn cùng với Twitter và Linkedin. Hy vọng nó giúp.

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

Hãy thử cái này:

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

Như tôi đã làm ổn, cửa sổ bật lên nhận xét sẽ bị tắt khi:

1. Hiển thị khuôn mặt: -> bỏ chọn nó
2. Nhận mã: -> chọn tùy chọn IFRAME

Nếu bạn sử dụng nút HTML5 mới hơn, và bạn nên vì nó tương thích về phía trước và được Facebook đề xuất, thật dễ dàng, đi ngược lại những gì người khác đã nói:

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

Lớp thứ hai là phần thưởng cho những người sử dụng plugin AddThis.

Các tùy chọn chiều cao tràn được đề cập ở trên không nên được sử dụng khi show-faces=true. Nếu không, nó sẽ ẩn các khuôn mặt.

Trong trường hợp của tôi (với phiên bản XFBML), tôi đã thêm vào thẻ này:

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

Vì vậy, kết quả cuối cùng là:

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

Nó ẩn chính xác cửa sổ bật lên bình luận.

Ẩn hộp nhận xét hoạt động nhưng có thể tạo ra vấn đề nếu bạn có phần tử có thể nhấp phía sau hộp phát nhận xét.

Bạn phải ẩn nó và xóa nó khỏi bài đăng DOM như.

Đây là CSS để ẩn hộp nhận xét:

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

Đây là cách JQuery xóa phần tử DOM:

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

Đây là cách javascript thuần túy bằng cách sử dụng tiện ích con được cung cấp từ lệnh gọi lại:

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

Nếu bạn chỉ muốn hiển thị nút thích, bạn có thể thử một cái gì đó như thế này

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

Đặt tràn thành ẩn có thể hữu ích. Thực hiện việc này trong tệp css chính của bạn ..

#fb_button{
overflow:hidden;
}

Bạn chỉ cần làm cho khung nội tuyến chứa nút thích có cùng kích thước với nút:

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

Đó là nó.