Facebook Like Button - как отключить комментарий?

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

Ответы

Ответ 1

Помещение iframe в div с соответствующим размером с переполнением, установленным для скрытой, разрешило эту проблему, хотя это только на самом деле скрывает проблему как таковую.

Ответ 2

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

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

Поместите стиль CSS в любой из ваших файлов CSS и увидите магию, он работает:)

Ответ 3

Я использую это в своем CSS:

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

и сделать кнопку Facebook с нормальным кодом HTML5, примерно так:

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

г -

Ответ 4

То, что я сделал, это ящик div для кнопки типа "like":

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

Ответ 5

Мне нравится решение Mohammed Arif, и я выбираю его как лучший ответ. Но в случае, если 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 id, держащий facebook как код кнопки

Ответ 6

очиститель, который работает (с май 2014) -

Прежде всего убедитесь, что свойство <div class="fb-like" имеет свойство data-layout как кнопка -
```
<div class="fb-like" data-layout="button"........></div>
```

Просто добавьте этот CSS -

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

Что это!

Демо

Ответ 7

Не быть Debby Downer здесь, но не скрывает окно комментариев, нарушающее политику Facebook?

IV. Точки интеграции приложений д. Вы не должны скрывать или охватывать элементы наших социальных плагинов, такие как кнопка Like или плагин Like box.

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

Ответ 8

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

Отбрасывание следующего в моем основном файле css делало трюк:

#fb_button{
    overflow:hidden;
}

Ответ 9

Согласитесь с BrynJ, лучшим решением в настоящее время является поместить подобную кнопку в контейнер с 20-кратным максимумом div и установить переполнение в скрытое (я где-то читал, что 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>

Ответ 10

Если подобная кнопка исчезает, когда вы нажимаете "like", и у вас есть контейнер div, чтобы скрыть всплывающее сообщение, используйте следующее решение:

создайте контейнер div, чтобы поместить fb-подобную кнопку, и дайте ей следующий css:

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

.fb_like iframe {
  left: 0 !important;
}

Ответ 11

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

Посетите https://developers.facebook.com/docs/plugins/like-button/
Измените URL-адрес на URL-адрес вашей страницы на странице
Выберите любые другие параметры (макет, тип действия и т.д.) по желанию.
Нажмите кнопку "Получить код"
Выберите версию IFRAME
Убедитесь, что вы выбрали приложение Facebook, где говорится: "Этот script использует идентификатор приложения вашего приложения"
Внедрить предоставленный код в вашем приложении

Из того, что я вижу, подобная кнопка с реализацией IFRAME не вызывает всплывающих окон. Он просто функционирует как кнопка. Это был мой желаемый результат.

Удачи.

Ответ 12

Давайте попробуем это:

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

Ответ 13

Вот код, в котором кнопка 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>

Ответ 14

Как я уже сделал, всплывающее окно комментариев будет отключено, если:

Показать лица: → снимите флажок
Получить код: → выбрать вариант IFRAME

Ответ 15

Если вы используете более новую кнопку HTML5, и вы должны, поскольку она пересылает совместимость и предлагает Facebook, легко, уходит от того, что говорили другие:

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

Второй класс является бонусом для тех, кто использует плагин AddThis.

Ответ 16

Скрытие поля комментария работает, но может создать проблему, если у вас есть элемент, который можно щелкнуть позади окна вывода комментария.

Вы должны скрыть его и удалить его из сообщения 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);        
});

Ответ 17

Параметры высоты переполнения, упомянутые выше, не должны использоваться, когда show-faces=true. В противном случае он скроет лица.

Ответ 18

Если вы хотите показать только кнопку типа, вы можете попробовать что-то вроде этого

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

Ответ 19

В моем случае (с версией 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>

Он корректно скрывает всплывающее окно комментария.

Ответ 20

Настройка переполнения в скрытое может помочь. Сделайте это в главном файле css..

#fb_button{
overflow:hidden;
}

Ответ 21

Как сделать так, чтобы iframe содержал подобную кнопку того же размера, что и кнопка:

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

Что это.