Ответ 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();

Ответ 2

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

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

Ответ 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;
}  

Ответ 4

У меня была такая же проблема только в Firefox (v.29.0.1), и оказалось, что AdBlock plus (v.2.6) блокирует кнопки "Имени" и "Поделиться" из рендеринга.

Ответ 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>

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

Ответ 6

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

Oli nice CSS hack выглядел так, как будто он работал изначально:

.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, а затем анализирует только содержимое этого элемента.

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

Ответ 7

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

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

Ответ 8

В основе решения лежит версия 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 или гнездо .sural и в качестве последнего средства использования! Important..

Ответ 9

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

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

Ответ 10

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

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

Как только я переименовал свой id, share снова начал работать; Я могу только предположить, что существует какой-то конфликт, так как id'ed элементы могут ссылаться как глобальные переменные.

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