Кнопка «Нравится» в Facebook - как отключить всплывающее окно с комментариями?

Я бы хотел отключить поле для комментариев, которое появляется, когда пользователь нажимает кнопку «Нравится» в Facebook (fbml), которую я разместил на своем сайте. Возможно ли это сделать? Я не могу найти подробностей в документации.

Простейшее исправление, позволяющее скрыть поле комментария после лайка Facebook (версия XFBML, а не версия iframe):

.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 для кнопки «Нравится» следующим образом:

<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 изменил классы, то всегда будет работать следующее ..

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, содержащий код кнопки Like 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. Вы не должны скрывать или скрывать элементы наших плагинов социальных сетей, такие как кнопка Like или плагин Like box.

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

Я не мог получить display: noneвозможность работать с версией кнопки HTML 5. Вместо этого я нацелился на div, в котором создается кнопка Like, и установил переполнение как скрытое.

Удаление следующего в моем основном файле css помогло:

#fb_button{
    overflow:hidden;
}

Согласитесь с BrynJ, лучшим решением в настоящее время является размещение кнопки Like в контейнере div высотой 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. Реализуйте предоставленный код в своем приложении

Насколько я могу судить, кнопка Like с реализацией 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;
}

Вот способ удаления элемента DOM с помощью JQuery:

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

Вот и все.