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

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

21 107
facebook facebook-like fbml

21 ответ:

самое простое исправление, чтобы скрыть поле комментариев после Facebook, Как (xfbml версия не iframe один), как указано:

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

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

125

помещение iframe в div соответствующего размера с переполнением, установленным в hidden, разрешило эту проблему-хотя это только фактически скрывает проблему как таковую.

81

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

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

и сделать кнопку Facebook с обычным кодом HTML5, что-то вроде этого:

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

gr -

69

то, что я сделал, это ящик 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;
}
14

Мне нравится решение Мохаммеда Арифа, и я выбираю его как лучший ответ. Но в случае, если 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 like

9

The более чистое решение это работает (как мая) -

  1. прежде всего убедитесь, что<div class="fb-like" и data-layout имущество в виде -

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

  2. просто добавьте этот CSS -

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

вот именно!

демо

5

не быть Дебби Даунер здесь, но не скрывая поле комментариев нарушает политику Facebook?

раздел IV. Точки Интеграции Приложений д. Вы не должны скрывать или покрывать элементы наши социальные плагины, такие как кнопка "Нравится" или как плагин окно.

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

4

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

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

#fb_button{
    overflow:hidden;
}
3

согласен с BrynJ, лучшим решением в настоящее время является поместить кнопку like в контейнер 20px high div и установить переполнение в hidden (я где-то читал, что 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>
3

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

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

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

.fb_like iframe {
  left: 0 !important;
}
2

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

  1. посещение https://developers.facebook.com/docs/plugins/like-button/
  2. измените "URL to Like" на свой URL страницы Facebook
  3. выберите любые другие параметры (расположение, тип действия и т. д.) По желанию
  4. Нажмите кнопку "Получить код"
  5. выберите IFRAME версия
  6. убедитесь, что вы выбрали приложение Facebook, где говорится: "этот скрипт использует идентификатор приложения вашего приложения"
  7. реализовать предоставленный код в вашем приложении

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

удачи.

2

вот код, чтобы кнопка 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>
1

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

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

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

  1. показать лица: -> снимите ее
  2. получить код: - > выберите опцию IFRAME
1

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

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

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

1

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

0

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

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

0

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

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

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

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

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

#fb_button{
overflow:hidden;
}
0

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

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

вот и все.

0