Как интегрировать Facebook с WordPress

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

1. Интеграция WordPress блог в Facebook

Интеграция WordPress блог в Facebook на самом деле довольно просто достигнуто через API Facebook. Facebook API делает программирование приложений, которые могут быть распространены через Facebook почти кусок пирога. Много интерактивных браузерных игр на Facebook, таких как популярные в настоящее время “Войны мафии”. Эта игра позволяет пользователям начать мафиозную семью со своими друзьями, с целью стать важной фигурой в виртуальном подпольном месте преступления. Чтобы начать клан, вы приглашаете других друзей в сети присоединиться. Это стратегия роста любого приложения на Facebook: простой эффект снежного кома.

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

Подключаемый модуль и конфигурация

Джон Экман разработал WordPress плагин Wordbook в начале 2009 года. Этот плагин позволяет владельцам блогов WordPress интегрировать свой блог в Facebook. Это дает блог две жизни: один в качестве приложения на Facebook (например, мой частный FreigeistBlog) и один на оригинальный URL(http://freigeist.devmag.net).

Чтобы получить доступ к блогу через Facebook, необходимо сначала предоставить доступ к приложению. Для этого перейдите на так называемую “холст” страницу, которая является, где Facebook близнец блог живет(мой пример). Тем не менее, предоставление доступа к приложению блога означает, что администратор блога также имеет доступ к информации о вас как пользователе (это то, что большинство приложений стремятся: информация, такая как дата рождения, пол и образовательный статус позволяет им отображение довольно целевой рекламы).

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

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

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

Create a new Facebook application
Создание нового приложения Facebook

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

Settings for a Facebook application
Настройки для приложения Facebook. Большой вид.

Затем необходимо отправить так называемый “поставторифицировать URL-адрес обратного вызова”. Это адрес на вашем сервере, на который Facebook будет отправлять уведомления всякий раз, когда пользователь разрешает доступ к приложению. По той же логике, есть также “пост-удалить обратный URL”, который получает уведомление, когда пользователь удаляет приложение. Оба эти события обрабатываются плагином Wordbook. Вам просто нужно написать адрес корневого каталога блога с задней чертой.

Callback URLs definieren
Настройки приложения Facebook: Определите URL-адреса обратного вызова. Большой вид.

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

Define canvas page
Настройки приложения Facebook: Определите страницу холста. Большой вид.

Теперь у вас есть несколько вариантов, чтобы сделать, а именно, как настроить страницу холста. У вас есть выбор между iFrame и FBML. FBML — это схема Facebook XML, с помощью которой можно использовать определенные теги Facebook (например, теги для отображения профилей пользователей). Вы также можете использовать его для доступа к определенным процедурам Facebook. Тем не менее, плагин Wordbook работает с iFrames, которые позволяют Javascript и другие теги, и которые FBML не поддерживает.

Чтобы отличить их довольно грубо, можно сказать, что iFrames дают разработчику больше гибкости, но, в отличие от FBML, ограничивают доступ к процедурам Facebook. Еще одним преимуществом iFrames является то, что код, который Facebook получает из URL-адреса обратного вызова холста, не должен быть разобран parsin FBML, что может привести к прибавке в производительности. С iFrames, только внутренние ссылки на блоге должны быть скорректированы. А опция «изменяемая» опция позволяет коду JavaScript Facebook регулировать размер iFrame в макет ЕСхо.

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

Settings for the Wordbook plug-in
Корректировка настроек плагина Wordbook

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

Browsing through a blog via Facebook
Просмотр блога через Facebook. Большой вид.

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

2. Интеграция Facebook в WordPress блог

Для начала нужен небольшой урок истории. Многие пользователи не любят того, чтобы зарегистрироваться для каждого блога, где они хотели бы разместить комментарии, особенно если они уже имеют счета на столь многих других социальных сетей, таких как Facebook и MySpace. Таким образом, один онлайн ID для нескольких целей будет идеальным, не так ли? Такова идея протокола OpenID, который начался в 2005 году. Он децентрализует идентификацию пользователей для различных поставщиков и услуг. В сущности, вы можете создать учетную запись на Facebook и подключить его к таким услугам, как MySpace или даже личный блог. Если вы хотите изменить свой профиль для всех этих служб, это тоже децентрализовано: вы просто измените настройки в своей учетной записи Facebook. OpenID — это шанс сделать Интернет и его услуги более доступными. Есть разумные риски и проблемы, но и много возможностей.

Facebook объявил в 2007 году, что он будет осуществлять OpenID, и другие следуют, что объясняет, почему мы сейчас находим все больше и больше кнопок, которые говорят: “Связь с Facebook” или “Google Friend Connect”. Это приводит нас к нашему второму плагину, Facebook Connect WordPress плагин, который почти бесшовно интегрирует Facebook в свой блог.

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

Плагин интегрирует множество функций Facebook: например, пользователи могут отправлять приглашения и делиться историями и комментариями на Facebook, что дает вашему блогу преимущество маркетинга из уст в уста. Для этого необходимо активировать опцию плагина, которая публикует активность пользователя в ленте активности. И последнее, но не менее, вы можете включить гаджет, который отображает фотографии профиля последних посетителей вашего блога, по аналогии с “Google Friend Connect”.

Facebook Connect Implementation as seen on Sociable.es
Facebook Connect реализован на sociable.es (на испанском языке)

Этот плагин по существу делает противоположность Wordbook (которая интегрирует facebook функциональность в вашем блоге).

Подключаемый модуль и конфигурация

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

Create a new Facebook Application
Создание нового приложения Facebook. Большой вид.

Вы также должны определить обратный вызов URL-адреса, которые указывают на корень вашего блога.

Defining callback URLs for the new application
Определение URL-адресов обратного вызова для нового приложения. Большой вид.

Опять же, большая часть работы в настоящее время сделано, и вы можете вскоре начать получать удовольствие и быть творческим. Осталось всего несколько шагов. Во-первых, скачать плагин с веб-сайта (см. ссылку выше) и загрузить и включить его. Большая часть плагина состоит из библиотеки “Facebook Connect”, которая предоставляется Facebook. Вы можете наткнуться на два xd’reciever файлов, один в HTML и один в PHP. Они играют ключевую роль: включение так называемого кросс-домена связи (отсюда и XD) между вашим блогом и Facebook.

Так зачем это нужно? Как правило, запросы HTTP отправляются с объектом XMLHttpRequest. Однако типичные настройки безопасности в браузерах позволяют XMLHttpRequest отправлять запросы только в домен, куда был отправлен исходный запрос. В нашем случае запросы отправляются в Facebook и из facebook. Эта междоменочная коммуникация достигается с помощью кросс-доменной связи iFrame. При этом приложение открывает iFrame на facebook.com с соответствующими запросами; например, для получения информации о том, входит ли пользователь в Facebook.

Эти запросы отправляются на Facebook через iFrame через URL-адрес, с помощью которого открывается iFrame. Запрос проверяется, и теперь скрипт Facebook, который был вызван через iFrame, открывает iFrame на странице приложения, где отправляется результат запроса, опять же со строкой запроса URL. Результат любых запросов попадает в строку запроса файла xd’receiver.htm на вашем собственном сервере. Это обходит проблему невозможности использовать XMLHttpRequest.

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

Settings for Facebook Connect WordPress plug-in
Настройки для Facebook Подключите WordPress плагин. Большой вид.

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

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

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

Alter Facebook Connect template settings
Отрегулируйте настройки шаблонов Facebook Connect. Большой вид.

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

Including the Facebook Connect Widget into the sidebar
Включая виджет Facebook Connect в боковой панели

Опять же, у вас есть некоторый выбор по сравнению с конфигурацией, особенно в отношении изменения языка, показывая большой или маленький “Подключитесь к Facebook” кнопку и т.д. После установки плагина, вы можете увидеть, что еще вы можете сделать с ним. Реализация на sociable.es довольно хорошая.

Дополнительные ресурсы

Эти два плагина довольно специфичны в том, что они делают. Тем не менее, широкий спектр плагинов Facebook доступны для платформ других WordPress. Вот список, конечно, не всеобъемлющий:

Источник: smashingmagazine.com

Великолепный Журнал

Великолепный, сокрушительный, разящий (см. перевод smashing) независимый журнал о веб-разработке. Основан в 2006 году в Германии. Имеет няшный дизайн и кучу крутых авторов, которых читают 2 млн человек в месяц.

Добавить комментарий

%d такие блоггеры, как: