Как подключить facebook к сайту

Интеграция входа через Facebook для веб-приложения с помощью JavaScript SDK

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

Прежде чем начать

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

1. Ввод URL перенаправления на панели приложений

Выберите свое приложение на панели приложений, прокрутите страницу до раздела Добавить продукт и нажмите Настроить в карточке Вход через Facebook. На панели навигации слева выберите Настройки и в разделе Клиентские настройки OAuth введите URL перенаправления в поле Действительные URI для перенаправления OAuth для получения разрешения.

2. Проверка статуса входа человека

При загрузке веб-страницы прежде всего нужно проверить, не вошел ли уже человек на нее, используя вход через Facebook. Вызов FB.getLoginStatus отправляет вызов к Facebook для получения статуса входа. Затем Facebook отправляет полученные данные вашей функции обратного вызова.

Пример вызова

Пример ответа JSON

Параметр status определяет статус входа данного человека на странице. Возможные значения параметра status :

Человек вошел в Facebook и на вашу веб-страницу.

Человек вошел в Facebook, но не вошел на веб-страницу.

Человек не вошел в Facebook, поэтому нельзя узнать, вошел ли он на веб-страницу. Другая причина: вызов FB.logout() уже был сделан раньше, поэтому подключиться к Facebook не удается.

Маркер доступа для пользователя на странице.

Отметка времени в формате UNIX для истечения срока действия маркера. Когда срок действия маркера истечет, пользователю придется заново войти.

Время до окончания сессии входа в секундах. После этого пользователю потребуется заново войти.

Параметр подписи, содержащий сведения о пользователе страницы.

ID пользователя страницы.

SDK для JavaScript автоматически отслеживает статус входа, поэтому не потребуется это делать вручную.

3. Вход пользователя

Если человек открыл вашу страницу, но не вошел на нее либо не вошел в Facebook, с помощью диалога «Вход» вы можете предложить оба варианта входа. Пользователю сначала будет предложено войти в Facebook, если он этого ещё не сделал, а затем — войти на страницу.

Выполнить вход можно двумя способами:

А. Вход с помощью кнопки «Вход»

Чтобы использовать кнопку «Вход через Facebook», настройте ее с помощью конфигуратора плагина и получите код.

READ  Как подключить роутер ростелеком к ттк

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

Б. Вход с помощью диалога входа из SDK для JavaScript

Запрос дополнительных разрешений

Пример вызова

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

Обработка ответа из диалога входа

Пример вызова

4. Выход пользователя

Чтобы обеспечить выход пользователя со страницы, прикрепите к кнопке или ссылке функцию FB.logout() из SDK для JavaScript.

Пример вызова

Примечание. Вызов этой функции может также повлечь за собой выход человека из Facebook.

Возможные сценарии

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

Пример полного кода

Источник

Как установить виджет страницы от Facebook на сайт

Привет дорогие друзья! Все чаще я на других проектах замечаю в сайдбаре и иных разделах сайта социальные виджеты от 3-х популярнейших порталов: ВКонтакте, Одноклассники и Facebook.

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

Я тоже наряду с другими блоггерами стараюсь не отставать и постепенно наращиваю темпы по раскрутке блога seoslim.ru в общественных сетях.

Как вы помните из прошлых статей я дал подробную инструкцию по установки виджета группы от Вконтакте, обязательно ознакомьтесь с данным руководством по вышеприведенной ссылке, а сегодня у меня дошли руки и до популярнейшего сообщества Марка Цукерберга Facebook.

Ниже я приведу подробное руководство, как установить виджет страницы Фейсбук на сайт, а пока давайте разберемся, зачем вообще создавать подобные фан-страницы.

Зачем нужна страница на Facebook

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

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

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

Как происходит раскрутка страницы

Первым делом создаем фан-страницу, для этого вы меню «Страницы» выбираете ссылку «Создать новую».

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

Встает вопрос, а как о ней будут узнавать другие пользователи, ведь здесь же нету друзей, которых можно приглашать в группу?

READ  Как подключить новый пульт к телевизору филипс

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

Так вот если кто-то лайкнет вашу фан-страницу, то подобное сообщение попадает на его стену аккаунта в Фейсбуке. Как итог его друзья будут созерцать кому их друг отдает симпатии и тоже захотят посмотреть ваше сообщество. В итоге такой процесс может повториться и так множество раз. По такому принципу и работает вирусная реклама.

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

Нечто, похоже, вы сможете создать и у себя на площадке, если прочитаете статью до конца. Ну что поехали.

Как создать виджет Facebook страницы для сайта

Переходим на главную страницу аккаунта Фейсбука и нажимаем «Редактировать профиль».

Спускаемся в самый низ страницы вашего аккаунта и находим там ссылку «Разработчикам».

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

На следующей странице отыскиваем виджет «Социальные плагины» и переходим.

Затем останется выбрать плагин для страниц «Like Box».

Перед вами появится конструктор для создания виджета для сайта.

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

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

Facebook Page URL — адрес страницы Фейсбка, которую желаете прикрутить к сайту. У меня это https://www.facebook.com/seoslim.ru Жду всех в гости!

Width — ширина блока в пикселях.

Height — высота блока в пикселях.

Color Scheme — цвет фона блока. Есть два варианта: белый или черный.

Show Friends’ Faces — показывать лица тех, кому понравилась страница.

Show Header — заголовок блока «Найдите нас на Facebook».

Show Posts — отображать в блоке последние записи страницы.

Show Border — рамка виджета.

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

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

Это код нужно вставлять для того, чтобы подключить скрипты к страницам сайта. Если вы уже устанавливали, какие-нибудь плюшки от Фейсбука (например социальные кнопки), то это код второй раз добавлять не нужно. У меня был как раз такой случай.

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

Далее я перешел в административную панель блога, выбрал виджет «Текст» и вставил в него полученный код (Рисунок под номером 2). Результат работы вы можете наблюдать в сайдбаре этой площадки.

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

Если кто-то с умел решить этот вопрос, обязательно поделитесь со всеми в комментариях.

READ  Как подключить печку ваз 21083

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

P. S. Скоро мой блог обретет второе дыхание в лице нового дизайна. Дизайн уже готов, сейчас идет стадия верстки, еще пару дней и все заработает.

Жду с нетерпением, чтобы показать всем свою задумку. Уверен, оцените! 🙂 До скорых встреч!

Источник

Виджет группы Facebook на свой сайт

Многие компании уже имеют свои представительства в социальных сетях. Чем больше площадок, где вы представлены, где люди смогут вас найти, тем лучше для вашего бизнеса. Все это нужно, чтобы увеличивать охват аудитории, чтобы было как можно больше каналов, по которым вы сможете донести информацию до клиентов. И желательно, чтобы эти каналы перекликались, их аудитория перемешивалась (главное, чтобы все знали о вашем сайте, т.к. сайт — основная продающая площадка и принадлежит только вам).

Сегодня рассмотрим как поставить виджет группы Facebook на сайт. Виджет группы с участниками одновременно повышает доверие к вашей компании и дает возможность присоединиться к группе.

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

Сначала, разберемся где взять код для виджета сообщества Facebook. Для этого переходим в раздел для разработчиков на страницу плагины: https://developers.facebook.com/docs/plugins/ (даже если эта инструкция устареет, там всегда будет актуальный плагин и пошаговый план установки) и выбираем типа плагина Page Plugin или Follow Button:

Далее настройки могут отличаться, но разобраться будет просто:

После того, как указали все настройки, нажимаем кнопку Get Code.

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

Самый простой способ — это выбрать вариант IFRAME, тогда вам будет нужно просто вставить этот код в нужное место. Мой клиент, который попросил поставить ему виджет, использует сайт на бесплатном конструкторе sebesite.ru и редактирование страниц там происходит прямо на сайте (что видишь, то и редактируешь, вообщем конструктор), так что IFRAME был самый простой и быстрый способ.

Я просто вставил код, сохранил и обновил страницу:

Вот так очень легко можно вставить виджет. Намного быстрей, чем рассказать всё это. Если что-то не получается, задавайте вопросы в комментариях.

Источник

Поделиться с друзьями
Как подключить и установить...
Adblock
detector