Кнопка "Вход"

Кнопка "Вход" — это простой способ запустить процесс входа через Facebook на сайте или в веб-приложении.

Если человек еще не входил в ваше приложение, он увидит эту кнопку и, нажав ее, вызовет диалог "Вход", что инициирует процесс входа. Люди, которые уже вошли в приложение, не увидят эту кнопку, но вы также можете отобразить для них кнопку выхода.

Если вы отображаете кнопку выхода и люди используют ее, чтобы выйти, они выходят и из вашего приложения, и из Facebook.

Кнопка "Вход" работает только совместно с SDK для JavaScript — если вы создаете мобильное приложение или не можете использовать наш SDK для JavaScript, следуйте рекомендациям по созданию процесса входа для данного типа приложений.

Кнопка Продолжить с Facebook заменяет предыдущие версии кнопки "Вход". Дополнительную информацию см. в разделе Миграция.

Конфигуратор плагина

Кнопка "Продолжить как {Name}"

Если вход на Facebook был выполнен через тот же браузер, на кнопке Продолжить как {Name} отображается текст "Продолжить как {persons' name}" а также (возможно) фото профиля этого человека на Facebook. Чтобы использовать кнопку Продолжить как {Name}, вам в первую очередь необходимо загрузить SDK для JavaScript. Инструкции по настройке SDK для JavaScript смотрите Краткое руководство: Facebook SDK для JavaScript. Включите кнопку Продолжить как {Name}, добавив data-use-continue-as="true" в настройки вашей кнопки.

Высоту кнопки Продолжить как {Name} изменить нельзя.

Если вы выберете значение больше максимального, по умолчанию будет использоваться кнопка максимальной ширины.

Рекомендации по использованию кнопки Продолжить как {Name}

Кнопка Продолжить как {Name} может быть отличным способом увеличить вовлеченность и количество кликов. Она позволяет пользователю видеть свое фото профиля и имя на нашей кнопке "Вход" и персонализировать ваше приложение.

Однако если пользователь не ожидает увидеть свое фото и имя в контексте вашего приложения, это может сбить его с толку. Рекомендуем учитывать следующее, чтобы понять, уместно ли использовать кнопку Продолжить как в вашем приложении.

Даже если кнопка Продолжить как {Name} не подходит для вашего приложения, вы можете воспользоваться новыми кнопками "Продолжить с Facebook" из SDK для JavaScript.

Рекомендации по использованию

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

Используйте эту кнопку, если

• В вашем приложении есть социальные функции:
  когда люди используют социальные приложения, они хотят общаться с друг с другом. В таких случаях кнопка Продолжить как {Name} работает очень хорошо.

• Люди на целевом рынке могут вместе пользоваться одним телефоном:
  если один телефон используют несколько человек, кнопка Продолжить как {Name} поможет им выбрать нужный аккаунт.

Не используйте эту кнопку, если

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

• Люди на целевом рынке уделяют большое значение конфиденциальности:
  во многих странах фото профиля считается глубоко личной информацией. Возможно, в этом случае кнопку Продолжить как {Name} лучше не использовать, поскольку на ней отображается фото человека, который вошел в систему.

Рекомендации по использованию кнопки "Вход"

Следуйте общим рекомендациям по использованию функции "Вход через Facebook". В частности, при использовании кнопки Продолжить как {Name} важно соблюдать следующие два условия:

• Предоставьте пользователям возможность выйти из системы (этого требует наша политика)
• Протестируйте и определите — выясните, каким образом это влияет на восприятие вашего продукта пользователями и на количество конверсий

Другие возможные рекомендации:

• Четко поясните пользователям, что происходит при входе в систему
• Используйте заполнитель или индикатор загрузки, который будет отображаться, пока кнопка входа загружается, и исчезнет после загрузки. Пример такого кода:

<script>
var finished_rendering = function() {
  console.log("finished rendering plugins");
  var spinner = document.getElementById("spinner");
  spinner.removeAttribute("style");
  spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
    style="
        background: #4267b2;
        border-radius: 5px;
        color: white;
        height: 40px;
        text-align: center;
        width: 250px;">
    Loading
    <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="large"
    data-button-type="continue_with"
    data-use-continue-as="true"
    ></div>
</div>

Настройки

Вы можете задать следующие настройки помимо указанных выше:

Миграция

Старые кнопки будут заменены на новые. В таблице ниже указаны соответствия при замене.

У новых кнопок Продолжить как {Name} есть параметр button_type, который не используется в старых кнопках. С его помощью можно задать тип кнопок Продолжить с Facebook или Вход через Facebook. Если вы не укажете тип кнопки, она будет отображена как новая маленькая кнопка. Этот размер является средним по сравнению со старыми кнопками. Кнопка типа x-large немного уменьшится. Если же вы укажете параметр button_type, ваши кнопки будут отображаться в соответствии с этим значением.

Вы можете ускорить загрузку кнопок, если запустите SDK для JavaScript как можно быстрее. Однако система не в состоянии загрузить кнопки, пока не закончится загрузка веб-страницы и JavaScript, потом она создает окно iframe и загружает ресурсы для отображения кнопки.

 <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="<medium, large>"
    data-button-type="continue_with"
    data-width="<100% or px>"
    data-scope="<comma separated list of permissions, e.g. public_profile, email>"
></div>
}

Локализация:

Чтобы загрузить кнопку с текстом на другом языке, необходимо загрузить SDK для JavaScript для этого языка. Подробнее о локализации SDK для JavaScript см. в разделе Локализация с помощью социальных плагинов и SDK для JavaScript.

Часто задаваемые вопросы

Как использовать кнопку "Вход" для входа пользователей?

Когда кто-то нажимает кнопку "Вход" и принимает диалоговое окно — в результате чего будет выполнен процесс входа — ваше приложение сможет использовать Facebook SDK для JavaScript, чтобы выполнять вызовы API от имени этого человека.

Какие-то дополнительные настройки здесь не требуются, но вы можете использовать настройку onlogin для кнопки, чтобы запускать собственную функцию JavaScript после выполнения входа.

Можно ли использовать кнопку "Вход" с кодом регистрации на стороне сервера?

Можно, но вам все же придется частично использовать SDK для JavaScript. После завершения процесса входа, запущенного нажатием кнопки "Вход", SDK получит доступ к объекту authResponse с помощью FB.getLoginStatus(). Эта функция позволяет передать объект ответа вашему коду на стороне сервера для завершения регистрации.

Можно ли использовать кнопку "Вход" для повторного запроса разрешения, отклоненного человеком?

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

Кнопка не отображается.

Чтобы теги <div> отображались в виде кнопок, применяется технология XFBML, которая использует JavaScript, содержащийся в SDK, для анализа страницы и выполнения замен. Если вы динамически изменяете контент страницы, чтобы добавить эти теги div после того, как метод init SDK был запущен (например, при использовании динамических диалоговых окон), вам необходимо повторно вызвать функцию FB.XFBML.parse() для отображения изменений.