Facebook Like Button - як відключити спливаюче коментар?

Я хотів би вимкнути вікно «Коментар», яке з’являється, коли користувач натискає кнопку Facebook (fbml), як кнопку, яку я розмістив на своєму сайті. Чи можливо це зробити? Я не можу знайти жодної інформації в документації.

Найпростіший виправлення, щоб приховати поле для коментарів після Facebook Like (версія XFBML, а не рамка), як зазначено:

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

Помістіть стиль CSS у будь-який свій CSS-файл і побачите магію, він працює :)

Встановлення iframe у відповідний розмір div із переповненням, встановленим на прихований, вирішило цю проблему - хоча це лише фактично приховує проблему як таку.

Я використовую це у своєму CSS:

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

і візуалізуйте кнопку Facebook із звичайним кодом HTML5, приблизно так:

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

гр-

Що я зробив, це створити поділ для кнопки "подобається", як це:

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

А це CSS:

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

Мені подобається рішення Мухаммеда Аріфа, і я вибираю це як найкращу відповідь. Але у випадку, якщо ФБ змінить заняття, то нижче буде завжди працювати ..

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

де "like_button_holder" - "ВАШ" div id, що тримає facebook як код кнопки

Чисте рішення , яке працює (за станом на травень 2014 року ) -

1. Перш за все , переконайтеся , що <div class="fb-like" має дані макет властивість , як кнопка -

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

2. Просто додайте цей CSS-

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

Це воно!

Демо

Не бути тут Дебі Даунер, але не приховує, що поле коментарів порушує політику Facebook?

IV. Точки інтеграції додатків d. Ви не повинні затемнювати або прикривати елементи наших соціальних плагінів, наприклад, кнопка «Подобатися» або «Плагін подобається».

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

Не вдалося отримати display: noneможливість працювати з версією кнопки HTML 5. Натомість я націлив діва на те, що створена кнопка «подобається кнопка» і встановив переповнення прихованим.

Видаляючи наступне в моєму головному файлі CSS, це зробило трюк:

#fb_button{
    overflow:hidden;
}

Погодьтесь з BrynJ, найкращим рішенням на даний момент є поставити подібну кнопку в контейнер з високою роздільною здатністю 20 пікселів і встановити переповнення прихованим (я десь читав, що FB нещодавно перемістив макет коментарів у iFrame, тому рішення, яке модифікує стиль стилю . fb_edge_widget_with_comment , ймовірно, вже не корисний для користувачів iFrame).

Використовуючи AddThis? Зробити це:

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

Якщо подібна кнопка зникає, коли ви натискаєте "подобатися", і у вас є контейнер div, щоб приховати спливаючі вікна коментарів, тоді використовуйте таке рішення:

створіть div контейнер, щоб помістити кнопку, подібну fb, і надати їй такий css:

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

.fb_like iframe {
  left: 0 !important;
}

Мені вдалося обійти Facebook, як спливаюче питання щодо коментарів до кнопки, замість цього застосувавши версію IFRAME. Я зробив наступні кроки для цього:

1. Відвідайте https://developers.facebook.com/docs/plugins/like-button/
2. Змініть "URL-адресу на подобається" на URL-адресу вашої Facebook
3. Виберіть будь-які інші параметри (макет, тип дії тощо) за бажанням
4. Натисніть кнопку "Отримати код"
5. Виберіть версію IFRAME
6. Переконайтесь, що ви вибрали свою програму Facebook, де написано "Цей скрипт використовує ідентифікатор додатка вашого додатка"
7. Реалізуйте наданий код у своїй програмі

Як я бачу, подібна кнопка з реалізацією IFRAME не викликає спливаючих вікон. Він просто функціонує як подібна кнопка. Це був мій бажаний результат.

Удачі.

Ось код, щоб кнопка «Like» працювала як звичайна кнопка разом із Twitter та Linkedin. Сподіваюся, це допомагає.

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

Давайте спробуємо це:

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. Показати обличчя: -> зніміть його
2. Отримати код: -> вибрати варіант IFRAME

Якщо ви користуєтеся новою кнопкою HTML5, і вам слід, оскільки вона сумісна вперед та запропонована Facebook, це легко, виходячи з того, що сказали інші:

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

Другий клас - це бонус для тих, хто використовує плагін AddThis.

Згадані вище параметри висоти переповнення не слід використовувати, коли show-faces=true. В іншому випадку це приховає обличчя.

У моєму випадку (з версією XFBML) я додав до тегу це:

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

Отже, кінцевий результат:

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

Це правильно приховує спливаюче коментар.

Приховування роботи коробки для коментарів, але може створити проблему, якщо за полем вильоту коментаря є елемент, який можна натиснути

Ви повинні сховати його та видалити з домену DOM, як.

Ось CSS, щоб приховати поле для коментарів:

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

Ось JQuery спосіб видалення елемента DOM:

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

Ось чистий спосіб JavaScript за допомогою наданого віджета з зворотного дзвінка:

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

Якщо ви хочете показати лише подібну кнопку, ви можете спробувати щось подібне

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

Налаштування переповнення прихованим може допомогти. Зробіть це у своєму головному файлі css ..

#fb_button{
overflow:hidden;
}

Як щодо просто зробити рамку iframe, що містить подібну кнопку, такого ж розміру, як і кнопка:

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

Це воно.