Кнопка "Мне нравится" в Facebook на странице, управляемой AJAX - ошибка Firefox

У меня есть кнопка, похожая на Facebook, которая загружается с помощью ajax. Кнопка работает, но, как ни странно, в Firefox она не появляется.

<fb:like href="@Model.Url" show_faces="true" height="30" width="400" ></fb:like>

В Firefox html создается с высотой = 0px. Зачем?

<span style="height: 0px; width: 400px;">
<iframe id="f2b3cbcbf388e" class="fb_ltr " scrolling="no" name="f3cdf7e205a545e" style="border: medium none; overflow: hidden; height: 0px; width: 400px;" ....

Это не происходит в Chrome.

Связано с facebook У меня есть только это, прежде чем закрыть тег

<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/pt_PT/all.js#xfbml=1&appId=00000";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));</script>

4 ответа

Решение

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

Я все еще исследую причину, но в моем случае, я думаю, это потому, что содержащийся div скрыт во время синтаксического анализа XFBML. Все еще ищем лучшее решение, но это можно исправить, очистив вручную добавленную высоту css следующим образом:

FB.XFBML.parse(document, function(){
    $('.fb_button_container iframe').css('height','');
    $('.fb_button_container .fb-like > span').css('height','');
}); 

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

У меня такая же проблема. Кнопка была правильно отображена во всех других распространенных браузерах, кроме Firefox. Каким-то образом встроенный стиль диапазона был установлен в Firefox на 0 пикселей. Благодаря theozero мне наконец удалось правильно отобразить кнопку. Как и theozero, у меня была кнопка "Мне нравится" в Facebook внутри div, который скрыт с помощью JS при загрузке страницы. С ответом theozero я нашел в Facebook документацию по FB.XFBML.parse и поместил их функцию повторного анализа точно в конце первоначально предоставленного Facebook JavaScript SDK (последняя строка):

(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/de_DE/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.XFBML.parse();

И вуаля кнопка была оказана!


РЕДАКТИРОВАТЬ: слишком счастлив, слишком рано. Это только сработало, потому что сразу при загрузке страницы я показал div, содержащий кнопку. Затем я поместил функцию разбора в JS, которая показывает div. Это работает. Оно делает. Но теперь элемент больше не плавно переключается... Аааа! Facebook! Отверстие!


РЕДАКТИРОВАТЬ: Так! Теперь это сделано. Пришлось вызывать повторный анализ как функцию обратного вызова для функции slideToggle, чтобы повторно проанализировать элемент, когда действие переключения было завершено. .slideToggle('slow', function(){ FB.XFBML.parse(); }); Конечно, кнопка "лайк" вдруг неожиданно появляется, но я могу с этим смириться, хотя я мог позволить кнопке как-то исчезнуть.

Мне потребовался целый день, чтобы понять это, но после входа в систему на Facebook с "тестовым пользователем" кнопка "Мне нравится" становится невидимой. В моем случае, я всегда входил в систему с моим тестовым пользователем в Firefox, в то время как выходил из системы / входил в систему с моим обычным пользователем Facebook в Chrome (и я изначально думал, что это проблема браузера).

Тем не менее, решение было так же просто, как выйти из тестового пользователя.

В документации FB указано, что не все функции включены для тестовых пользователей (и кнопка "Мне нравится" - одна из этих функций), но я подумал, что она будет по крайней мере визуализирована. Во всяком случае, я надеюсь, что это кому-то поможет.

Другие вопросы по тегам