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


107

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


2
Не могу найти для вас ответа. Рассматривали ли вы «Like Box» как временное решение? developers.facebook.com/docs/reference/plugins/like-box . Вы можете отключить «Показать поток» и «Показать заголовок» и установить для параметра «Подключения» значение 0, и это сделает итоговую разметку разумного размера.
зомбат

Я добавил ответ, который нашел как временное решение.
BrynJ

Ответы:


125

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

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

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


Спасибо, Джонатан, хотя я не лучший :) Я боролся с тем же самым и просто попытался решить эту проблему с помощью CSS, ища причудливые решения, и это сработало «как шарм» :)
Мохаммад Ариф

8
Неужели никто не думает, что ответ BrynJ может быть лучшим? Если facebook изменит свои классы в разметке, этот метод сломается.
tybro0103 07

Удивительно, но пока нет возможности отключить всплывающее окно с комментариями. Прекрасно работает.
Messing

@tybro, если имена классов случайно меняются с конца Facebook, тогда, конечно, можно легко изменить правило и из CSS, это не требует каких-либо функциональных изменений, это самое простое исправление, чтобы скрыть всплывающее окно с комментарием до время FB не делает его настраиваемым.
Мохаммад Ариф,

14
Это не сработало для меня с 12 февраля 2013 года. Пришлось использовать решение Котзиллы
Башевис

81

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


5
Мне смешно, что все голоса достались другому парню. Возможно, его метод сэкономит три минуты, но если facebook изменит свои классы, он сломается.
tybro0103 07

@tybro Вы можете добавить класс в тег fb и стилизовать его, чтобы изменение его класса fb не повлияло на ваш код.
Gangesh

1
@ Гангеш Эм нет, ты не можешь. Разметка поступает непосредственно из Facebook, над которым вы не можете контролировать.
tybro0103

@ tybro0103, я добавил метод, который не сломается, даже если FB изменит свои классы
Zorox

Большое спасибо @BrynJ
Abhishek

69

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

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

и отобразите кнопку Facebook обычным кодом HTML5, примерно так:

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

гр-


4
После тестирования других решений это сработало лучше всего. Iframe не подходит, потому что мне нужно подписаться на событие edge.create. Повторный рендеринг тега div в обработчике событий edge.create имел небольшую задержку. Другое решение CSS, использующее ".fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr", также не сработало для меня.
CodeWarrior

Это единственное, что сработало и у меня. Я использую метод вставки без iframe.
TK123 01

4
На самом деле не работает (январь 2014 г.). Он не отключает поле для комментариев, он просто скрывает его. Если вы нажмете кнопку « Нравится» (будьте осторожны, обновите страницу после того, как сняли лайк с проверяемой ссылки), а затем начнете вводить текст, <div>размер останется того же размера, но отобразится текстовое поле, затем нажмите вкладку, и кнопки « Закрыть» и « Опубликовать» станут видимыми. . Не хорошо. Я тестировал Firefox.
Аннабель

yeeeaaahh, это решение действительно работает, спасибо !!
Майкл

14

Я создал блок 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;
}

4
На самом деле это лучший обходной путь, который я нашел. Если вы используете макет подсчета боксов, используйте следующий CSS: .fb-like {overflow: hidden; высота: 61 пикс; } Вы увидите небольшую выемку над кнопкой «Мне нравится», но это глупое всплывающее окно вас больше не будет раздражать.
NicolasBernier

Для минимальной темы shopify это использование обертывающего div работало как в Интернете, так и на мобильных устройствах, в то время как просто переопределение класса, подобного fb, напрямую работало в Интернете, но не на мобильных устройствах (из-за включения дополнительных классов, специфичных для мультимедиа)
gamozzii

9

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


4
Я использовал это решение, потому что со стилями css я не могу скрыть div внутри iframe.
Pons

это действительно умно, однако поле для комментариев можно было увидеть очень короткое время
pinkdawn

1
Я бы не назвал это «действительно умным» хорошим решением - оно включает в себя удаление разметки кнопки Like (но с лишением некоторого кода обработки событий), внесение нового дополнения в DOM, повторный анализ DOM всей страницы для XFBML и регенерацию новая кнопка Like, что означает больше обработчиков событий, перерисовку и перекомпоновку, несколько новых запросов и т. д. Я бы на самом деле назвал это плохим решением или, возможно, не решением вообще, поскольку то, что вы делаете, похоже на обновление вашего браузера с помощью покупка нового компьютера.
AndrewF

1
Есть идея получше? Иначе это проклятое поле для комментариев не исчезнет.
Амальговинус

@AndrewF - тогда получше?
Джереми Хейл,

5

Более чистое решение, которое работает (по состоянию на май 2014 г. ) -

  1. Прежде всего , убедитесь , что <div class="fb-like" имеет данные макет свойство , как кнопка -

    <div class="fb-like" data-layout="button"........></div>
    
  2. Просто добавьте этот CSS-

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

Это оно!

Демо


4

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

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

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


1
Это не дает ответа на вопрос. Пожалуйста, дополнительные замечания в качестве комментария.
Trinimon

2
Это иронично - это чертово поле для комментариев скрывает мою кнопку «Нравится» !!
Амальговинус

3

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

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

#fb_button{
    overflow:hidden;
}

3

Согласитесь с 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 20px является единственным работающим.
Bashevis

2

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

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

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

.fb_like iframe {
  left: 0 !important;
}

2

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

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

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

Удачи.


Если вам не нужен прослушиватель событий, это лучший официальный ответ. Спасибо чувак !!
Yahel

1

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

Хорошо, это было лучшее решение, которое я пробовал на этой странице. Еще раз спасибо @Rafael.
Стюарт,

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.


0

Упомянутые выше параметры высоты перелива не следует использовать, когда 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;
}

Вот способ удаления элемента 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);        
});

Как мне создать правила CSS для содержимого iframed в другом домене? Не говоря уже о классах css, имена которых в следующем месяце будут другими?
Амальговинус

0

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

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, который содержит похожую кнопку, того же размера, что и кнопка:

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

Вот и все.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.