Кнопка «Мне нравится» на Facebook не отображается в Firefox

Question

Я использую следующий код для кнопки «Мне нравится»

<fb:like id="facebook-like" href="http://mysite.com/index.php" layout="button_count" width="450" show_faces="false" font=""></fb:like>

У некоторых пользователей кнопка «Мне нравится» не отображается.Отмечено в 3.6.17, но наблюдается в других версиях.Я немного знаком с ошибкой iframe в Firefox, но я был бешен, если у кого-нибудь есть обходные пути для кнопки «Нравится» на Facebook.

Answer 1

Как кнопки, отображаемые с помощью JavaScript (<div class="fb-like"/> и <fb:like/>), получают height = 0, если они изначально скрыты (display:none).

Чтобы обойти это, создайте элемент с javascript после отображения контейнера, а затем запустите:

FB.XFBML.parse();

Пример:

result.show();
var like_box = $(".fb-like-inactive", result);
like_box.removeClass("fb-like-inactive");
like_box.addClass("fb-like");
FB.XFBML.parse();

Answer 2

Этот CSS решил это для меня

.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}

Answer 3

Это все еще проблема, как можно увидеть здесь (также содержит исправление): http://codepen.io/wiledal/pen/cGnyq

Firefox не рисует, как Facebook, если div скрыт во время анализа. В приведенном выше примере я задерживаю показ div после разных времен. Вы можете видеть, что кнопка «Мне нравится», показанная после 500 мс, не отображается в Firefox.

Я справился с обходом, который не обрезает диалог комментариев после того, как он мне понравился, просто используя min-height и min-width вместо заданных значений, которые были ранее предложены.

.fb-like span, .fb-like iframe {
  min-width: 100px !important;
  min-height: 20px !important;
}  

Answer 4

У меня была такая же проблема только в Firefox (v.29.0.1), и это оказался AdBlock plus (v.2.6), блокирующий рендеринг кнопок Like и Share.

Answer 5

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

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=195243810534550&amp;xfbml=1"></script><fb:like href="http://mysite.com/index.php" send="false" width="450" show_faces="true" font=""></fb:like>

И дайте мне знать, если у вас все еще есть проблемы.

Answer 6

Я только что потратил час на это и на гораздо более базовом уровне, вам нужно знать, что кнопки Facebook не будут отображаться при локальном тестировании вашей страницы.

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

Answer 7

Оставив ответ, потому что я пока не могу оставлять комментарии ...

Хороший CSS-хак Оли выглядел так, как будто изначально работал:

.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}

но оно обрезало окно комментария, которое пыталось всплыть, когда мы фактически нажимали кнопку «Нравится».

Похоже, что решение для отложенного синтаксического анализа Пера делает эту работу; вот немного подробнее. В нашем случае в выпадающем меню была кнопка «Мне нравится», которая выглядела так:

<ul>
  <li class="control_menu">
    <span>menu name</span>
    <ul style="display: none;">
       <li><div class="fb-like-inactive" data-href=...></li>
       ...
    </ul>
  </li>
  ...
</ul>

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

$(document).ready(function() {
  $('.fb-like-inactive').closest('.control_menu').hover(function() {
    var inactive = $(this).find('.fb-like-inactive');
    if (inactive.length && (typeof FB != 'undefined')) {
      inactive.removeClass('fb-like-inactive').addClass('fb-like');
      FB.XFBML.parse(this);
    }
  });
});

Он находит кнопки fb-like-inactive, затем ищет дерево, чтобы найти содержащие элементы control_menu, затем присоединяет событие к элементам control_menu, чтобы определить, когда пользователь наводит на них курсор мыши. Когда он обнаруживает всплывающее окно для определенного элемента меню, он ищет неактивные подобные кнопки в этом элементе, помечает их как обычные fb-like, а затем анализирует только содержимое этого элемента.

Надеюсь, это сэкономит кому-то время.

Answer 8

Мое решение полностью отличается от любого из вышеперечисленного.

У меня есть анимация персонажа на моей странице, и один из элементов имеет id = "body" (что вполне разумно), однако это казалосьубить скрипт FB.

Как только я переименовал свой идентификатор, ресурс снова начал работать;Я могу только предположить, что произошел какой-то конфликт, поскольку на идентифицированные элементы можно ссылаться как на глобальные переменные.

Я узнал об этом в обычном процессе удаления элементов, пока все не заработало, поэтому я уверен, чтоэто было это.

Answer 9

У меня была та же проблема, но преступник устанавливал защиту отслеживания в about: config в true.

Этот совет первоначально привел меня к идее: Lifehacker: Включите защиту отслеживания в Firefox, чтобыЗагрузка страниц на 44% быстрее

Answer 10

Решение Per основано на XFBML-версии кнопки fb, и я не был уверен, как это сделать с «версией html5» или действительно ли это возможно, но я нашел решение CSS / JS, которое не обрезаетсодержание вместо этого, вот оно:

html

<button class="like-button">I like this stuff</button>

<!-- This is a hidden like-box -->
<div class="social-share aural">...stuff...</div>

CSS:

html body .aural {
    position: absolute;
    font-size: 0;
    left: -9999px;
}

jQuery:

$('body').on("click", '.like-button', function(e) {
    var $socialShare = $('.social-share');
    $socialShare.css({'font-size':'1em'});
    var sw = $socialShare.width();
    $socialShare.animate({left: sw-80}, 400);
});

Возможно, вам придется использовать! Важное правило (как в css, так и в js) или вложите класс .aural в зависимости от остальной части вашего css.Если это не сработает, я бы посоветовал попытаться изменить макет по умолчанию, чтобы он не перекрывал .aural или nest .aural, а также в качестве последнего средства! Важно ..