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

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

107 голосов
/ 14 июля 2010

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

Ответы [ 21 ]

2 голосов
/ 05 июля 2013

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

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

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

.fb_like iframe {
  left: 0 !important;
}
1 голос
/ 13 ноября 2013

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

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

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

1 голос
/ 21 августа 2013

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

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

Вот код для кнопки «Нравится», работающей как обычная кнопка вместе с 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 голос
/ 04 марта 2013

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

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();
 });
0 голосов
/ 15 июня 2016

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

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

Вот и все.

0 голосов
/ 26 июня 2012

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

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

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

#fb_button{
overflow:hidden;
}
0 голосов
/ 07 июня 2013

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

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

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;
}
Страница:
...