Кнопка Facebook Connect не отображается в Safari / Chrome

Question

Моя реализация Facebook Connect (простая кнопка входа, fb: кнопка входа ) отлично работает в Firefox и IE.

Но эта же кнопка не отображается в Safari / Chrome (Webkit).

Вот в чем ирония. В процессе отладки я сохранил страницу (которая содержит fb: login-button ) как статическую страницу и затем загрузил ее в Safari. И кнопка появляется, все работает!

Точно такая же страница (с точно таким же исходным кодом HTML), отображаемая моим PHP, не может вызвать кнопку.

Я очень стараюсь поддержать Webkit здесь, но я близок к тому, чтобы сдаться. Кто-нибудь может помочь?

Answer 1

Я нашел еще один способ, которым это может произойти (способ винить себя за глупость); это, вероятно, не часто, но в случае, если кто-то еще избавляет от хлопот, вот оно:

Этот симптом также может быть вызван различными инструментами безопасности, блокирующими ресурсы Facebook.

В моем случае я установил Facebook Disconnect много лет назад в Chrome как плагин и забыл все об его установке. У меня также была вторая установка Chrome, которая, казалось бы, была идентична (но не имела Facebook Disconnect). Первый будет правильно загружать кнопку fb: login, а другой нет; у меня ушло много времени, прежде чем я посмотрел на плагины, потому что у Facebook Disconnect не было значка, и поэтому его присутствие было довольно легко пропустить.

Вот что вы увидите, если какой-нибудь плагин безопасности препятствует загрузке ресурсов Facebook. Просто посмотрите на HTML, который отображается в браузере с помощью инструментов разработчика.

В обычной сессии Chrome вы получите что-то вроде этого:

<fb:login-button><a class="fb_button fb_button_medium"><span class="fb_button_text">Your text here</span></a></fb:login-button>

Но в версии с отключенными ресурсами Facebook вы получите следующее:

<fb:login-button>Your text here</fb:login-button>

Как я уже сказал, довольно очевидно в ретроспективе.

Answer 2

Была такая же проблема, но она не была связана с чем-то вроде плагина или некорректного контента. Кажется, если вы включили фильтрацию по странам на своей странице в Facebook, у нее есть проблема с кнопкой «Мне нравится», это должно быть довольно очевидно. Facebook получает ваше местоположение из вашего профиля, а не ваш IP-адрес.

Обязательно отключите блокировку страны, если вы планируете использовать социальные плагины.

Answer 3

У меня была проблема с тем, что кнопка Facebook вообще не отображалась, и мне понадобилось целое время, чтобы понять, что это было. К счастью, после нескольких дней потянув за волосы, я поделюсь ответом со всеми. В моей ситуации я просто не включил xfbml. В моем FB.init было установлено значение false:

    FB.init({
        appId       : 'app_id', // App ID
        status      : true, // check login status
        cookie      : true, // enable cookies to allow the server to access the session
        xfbml       : false,  // parse XFBML
        oauth       : true // enable OAuth 2.0
    });

Я изменил это на " true " (xfbml), и кнопки входа теперь отлично работают! : P Удачи!

Answer 4

Мы обнаружили, что Safari (и, возможно, некоторые более старые версии Chrome или других браузеров WebKIT) имеют проблемы с кодом Facebook, используя функцию innerHTML JS, если ваша страница приходит с заголовком ответа XHTML ( приложение / XHTML + XML ). Использование text / html решает проблему.

В случае JSF2, который мы используем, реализация исправления была такой же простой, как завертывание кнопки FB следующим образом:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:fb="http://www.facebook.com/2008/fbml"
    xmlns:f="http://java.sun.com/jsf/core">

...

    <f:view contentType="text/html">
        <fb:login-button>Login using Facebook</fb:login-button>
    </f:view>

Отчет об ошибке Facebook здесь:
http://bugs.developers.facebook.net/show_bug.cgi?id=5545

Answer 5

Это может быть связано с установкой ClickToFlash. Либо отключите его, либо установите флажок «Автоматически загружать невидимые виды Flash» в настройках ClickToFlash.

Answer 6

Я перепробовал каждое предложенное решение, и оно не сработало для меня. Но теперь я наконец нашел решение.

Facebook теперь требуется защищенный (https) для Canvas (URL защищенного холста). Необеспеченный будет объявлен устаревшим в ближайшее время.

В этом главное отличие: Chrome не нравится https-соединения с недействительными сертификатами. На локальном хосте очень вероятно, что у вас установлен stunnel, чтобы разрешить соединение https для локального хоста. Firefox в порядке с самостоятельно созданным сертификатом SSL и позволяет добавлять исключение при попытке доступа к этому сайту. Chrome не позволяет делать это из коробки.

Когда я загружаю свое приложение в Chrome, страница становится пустой, и я не вижу никакой кнопки входа в систему.

Нажмите F12 и перейдите на вкладку Netwrok в Chrome:

Вы видите, что почтовый запрос на ваш локальный хост отменен. ДВОЙНОЙ Нажмите на нее.

Теперь вы увидите, что chrome блокирует локальный хост из-за сертификата:

в любом случае нажмите продолжить.

Теперь вернемся к другой вкладке и перезагрузим страницу:

Chrome теперь работает как Firefox и показывает кнопку входа.

Answer 7

У меня была та же проблема, но я решил ее, убедившись, что URL в настройках моего приложения точно такой же, как и для моего сайта (т.е. он не работал, когда я зашел на свой сайт без www.).

Answer 8

Это произошло, когда у меня был неправильный домен в callback_url в config / facebooker.yml. Очевидно, он использует это для загрузки файлов js.