Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Спор с Facebook

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Svetlana (you can also view the original English article)

Вы когда-нибудь хотели узнать, как сделать ваши приложения более социальными с Facebook? Это намного проще, чем вы думаете!

В этом руководстве мы создадим приложение, которое считывает и публикует данные в Facebook и из Facebook с помощью API Graph Facebook. Заинтересованы? Присоединяйся ко мне после скачивания!


Краткое введение в протокол Open Graph

Facebook Open Graph

Протокол открытого графика

Изображение предоставлено http://ogp.me

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

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

Короче говоря, протокол Open Graph превращает любую веб-страницу в объект в виде огромного графика. Каждый объект, по крайней мере, в графических объектах Facebook, может иметь множество других объектов, связанных с ним. Например, страница Facebook может иметь несколько объектов в пост, которые являются сообщения сделанные этой страницы. В свою очередь, к каждому объекту Post может быть прикреплено несколько объектов Comment, ссылающихся на комментарии, написанные людьми в сообщении. Эта связь между графическими объектами является основой для Graph API Facebook, что, в свою очередь, позволяет нам выполнять CRUD-операции над этими объектами.

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


Шаг 1. Создайте приложение для Facebook

Первое, что вы должны сделать, когда планируете использовать API Graph Facebook, - это создать приложение Facebook. Это не обязательно означает, что мы будем размещать приложение на Facebook (хотя мы можем); нам просто нужно приложение Facebook (в частности, APP ID и APP SECRET) для доступа к API.

Откройте http://developers.facebook.com и нажмите ссылку «Приложения» на панели навигации.

Facebook's Developer Site

Сайт разработчика Facebook

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

Allow the Developer application access

Разрешить доступ приложения разработчика

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

Developer App homepage

Домашняя страница приложения разработчика

Вас встретит модальное окно, запрашивающее отображаемое имя приложения и пространство имен приложения. Укажите здесь все, что вы хотите, но для целей этого урока я буду использовать Nettuts + Page Manager и nettuts-page-manager соответственно. Нажмите на продолжить.

Birth of the Nettuts+ Page Manager

Рождение Nettuts + страницы менеджер

После некоторой обязательной проверки кода вы будете перенаправлены на страницу своего нового приложения. Здесь вы увидите APP ID и APP SECRET, которые нам нужны. Скопируйте и вставьте эти значения куда-нибудь для дальнейшего использования.

The APP ID and APP SECRET

APP ID и APP  SECRET

Когда это будет сделано, перейдите в нижнюю часть страницы и нажмите на поле «Веб-сайт», а под ним должна появиться форма, запрашивающая URL-адрес сайта. Поскольку я просто использую свою локальную машину для сборки приложения, я буду использовать http: // localhost / nettuts / pagemanager. Когда вы закончите, нажмите на кнопку Сохранить изменения ниже.

Nettuts+ Page Manager Settings

Настройки Nettut + Page Manager

Шаг 2. Загрузите и настройте PHP SDK для Facebook

Facebook's GitHub page

Страница GitHub на Facebook

Наша следующая задача - загрузить и настроить PHP SDK для Facebook. Лучшее место для его получения - страница GitHub на Facebook, поскольку именно здесь будет находиться последняя и самая лучшая версия PHP SDK.

Downloading Facebook's PHP SDK

Загрузка PHP SDK для Facebook

Направьте ваш браузер на https://github.com/facebook/php-sdk и нажмите на кнопку «ZIP». Это должно привести к загрузке последней версии SDK. Сохраните его где угодно.

Теперь извлеките это в PHP include_path, чтобы сделать его доступным для любого приложения. В качестве альтернативы, если вы просто используете это для одного приложения, извлеките его в папку приложения - просто обязательно отметьте, где, так как позже мы должны будем включить facebook.php в наш код.


Шаг 3: чтение из Facebook через Graph API

Давайте начнем создавать наш проект и использовать API Graph Facebook для чтения информации из Facebook. Для начала создайте файл index.php, в который пользователь может войти через Facebook. Файл index.php должен содержать следующий код:

Если вам интересно, reset.css - это просто стандартный сброс таблицы стилей, а bootstrap.min.css - это Twitter Bootstrap. Я также добавил jQuery в микс, чтобы упростить работу на стороне клиента. Теперь, если вы обновите страницу, она должна выглядеть примерно так:

Nettuts+ Page Manager First Run
Nettuts + Page Manager Первый запуск

Теперь давайте создадим наш файл connect.php, который позволит нам подключить учетную запись пользователя Facebook и страницы, которыми он управляет. Давайте начнем с включения библиотеки Facebook, которую мы скачали ранее. Создайте его, используя APP ID и APP SECRET:

Теперь переменная $ facebook может использоваться для вызова API в Facebook от имени приложения.

  • Параметр appID сообщает Facebook, какое приложение мы используем.
  • Секретная настройка «аутентифицирует» наши вызовы API, сообщая Facebook, что они поступили от кого-то, кто владеет приложением. Это никогда не должно показываться публике, поэтому оно называется «Секрет приложения».
  • Параметр cookie указывает библиотеке сохранять сеанс пользователя с использованием файлов cookie. Без этого мы не сможем узнать, вошел ли пользователь через Facebook или нет.

Теперь мы проверяем, разрешил ли текущий пользователь доступ к приложению. Если нет, приложение должно перенаправить их на страницу «Разрешить разрешения» Facebook.

По сути это все, что происходит здесь:

  • Приложение выполняет простой вызов API, чтобы получить идентификатор пользователя Facebook (также известный как FB UID) с помощью метода $ facebook-> getUser ().
  • Если переменная $ user имеет значение, это означает, что пользователь уже разрешил основные разрешения для приложения.
  • Если нет, то это означает, что пользователь еще не разрешил разрешения для приложения, и приложение должно перенаправить на страницу разрешений Facebook, чтобы получить необходимые разрешения.
  • Затем он генерирует URL-адрес для входа, куда приложение должно перенаправить пользователя, чтобы показать страницу разрешений Facebook для приложения. Метод getLoginUrl () принимает следующие параметры:
    • область действия - это список разделенных запятыми разрешений, необходимых приложению
    • fbconnect - это должно быть 1, чтобы сообщить Facebook, что приложение будет использовать Facebook для аутентификации пользователя
    • redirect_uri - это страница, на которую перенаправляет Facebook после того, как пользователь прошел страницу разрешений Facebook

    Вы можете прочитать больше о методе getLoginUrl () здесь: https://developers.facebook.com/docs/reference/php/facebook-getLoginUrl/

  • После этого приложение перенаправляет пользователя на URL-адрес для входа, и пользователь видит страницу разрешений Facebook.
Facebook's Permissions Page

Страница разрешения Facebook

Facebook разрешения

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

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

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

В приложении мы используем следующие разрешения:

  • publish_stream - позволяет приложению публиковать обновления в Facebook от имени пользователя
  • read_stream - позволяет приложению читать из новостной ленты пользователя
  • offline_access - конвертирует access_token в тот, который не имеет срока действия, позволяя приложению в любое время совершать вызовы API. Без этого access_token приложения истечет через несколько минут, что не идеально в этом случае
  • manage_pages - позволяет приложению получать доступ к страницам Facebook пользователя. Поскольку приложение, которое мы создаем, имеет дело со страницами Facebook, оно нам тоже понадобится.

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

Возвращаясь к приложению, теперь, когда пользователь разрешил разрешения, требуемые приложением, мы можем сделать несколько вызовов API в Facebook! Поместите это в блок if-else из кода выше:

Первое, что мы делаем, это получаем $ access_token для пользователя, который только что аутентифицировал приложение. Это очень важно, так как приложению понадобится этот токен доступа почти для всего, что мы делаем. Чтобы получить его, мы используем метод getAccessToken (). $ Access_token действует как «пароль» для пользователя. Он всегда уникален для каждого пользователя в каждом приложении, поэтому обязательно сохраняйте его при необходимости.

После этого мы увидим, как выполнять API-вызовы в Facebook с помощью метода api (). Этот метод принимает следующие параметры:

  • $ graph_path - это путь к графу Facebook, который по сути является «URL» к открытому объекту графа, к которому мы хотим получить доступ. Это может быть любой объект графа на Facebook, как пост (например «/<post_id>'), комментарий (например ' /<comment_id>'), или даже пользователю ('/ me' это ярлык для текущего пользователя, которому принадлежит $access_token.</comment_id> </post_id> Это также может быть '/ <имя_пользователя>' или '/ ', но используемый вами $ access_token должен иметь доступ к этому пользователю, иначе вы сможете получить только общедоступную информацию пользователя).
  • $ method - это метод, который вы хотите использовать. Обычно это GET, когда вы пытаетесь «получить» информацию, и POST, когда вы пытаетесь «публиковать» или обновлять информацию, и DELETE, если вы хотите удалить информацию. Если вы не уверены, в документации Graph API сообщается, какой метод использовать для конкретных вызовов API.
  • $ params - это параметры, которые поставляются с вашим запросом API. Обычно для методов GET вам нужно только указать $ access_token пользователя. Однако для методов POST вам также потребуется указать другие параметры. Например, если вы хотите опубликовать новое обновление статуса, вы предоставите здесь сообщение об обновлении статуса.

В качестве альтернативы, мы также можем использовать метод api () для выполнения запросов FQL (Facebook Query Language), что позволяет нам получать данные на языке SQL. Это отлично подходит для получения информации, недоступной в Graph API, а также для выполнения нескольких запросов за один вызов. Например, мы можем получить имя пользователя и другие данные с помощью этого вызова FQL API:

Нам это не понадобится в этом уроке, но хорошо иметь это в виду, когда вы сталкиваетесь с тем, что Graph API не может получить.

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

var_dump() of the $permissions_list variable

var_dump () переменной $ permissions_list

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

var_dump() of the $accounts variable

var_dump () переменной $ accounts

Путь к графу / me / accounts дает нам список страниц, на которые у пользователя есть права администратора. Это возвращает массив всех страниц плюс определенные $ access_tokens для каждой из этих страниц. С этими $ access_tokens мы также сможем выполнять вызовы API от имени страницы Facebook!

Сохраните их в массиве $ _SESSION и перенаправьте на страницу manage.php.

Давайте начнем работать с нашим файлом manage.php. Помните, что мы сохранили список $ accounts пользователя в массиве $ _SESSION, а также установили первую учетную запись в списке в качестве активной страницы по умолчанию. Давайте получим новостную ленту этого аккаунта и покажем ее:

Опять же, приложение выполняет инициализацию библиотеки Facebook, а затем еще один вызов api (), на этот раз в / me / feed. Обратите внимание, что вместо user's access token, использования  мы используем  active page's access token  (через $ _SESSION ['active'] ['access_token']). Это говорит Facebook, что мы хотим получать доступ к информации как к странице Facebook, а не как к пользователю.

var_dump() of the $page_feed variable

var_dump () переменной $ page_feed

Вау, это много информации о посте в Facebook. Давайте рассмотрим один объект Facebook Post и посмотрим, из чего он сделан.

Объект Post Facebook

Facebook Post Cheat Sheet

Facebook пост шпаргалка

  • ID - это пост ID
  • from - содержит информацию о пользователе, который разместил сообщение
  • message (красный) - компонент сообщения из сообщения
  • картинка (оранжевая) - ссылка на фото прикрепленная к посту
  • имя (синий) - «название» Facebook должности
  • ссылка (также синий) - ссылка где имя идет к щелчку
  • подпись (фиолетовая) - несколько слов для описания ссылки
  • Описание (розовый) - больше, чем несколько слов, чтобы описать связь
  • значок (серый) - ссылка на изображения значка, используемого
  • действия - действия на Facebook, которые вы можете выполнить с публикацией, например «Нравится» или «Комментировать».
  • конфиденциальность - конфиденциальности пост
  • Тип - тип поста. Сообщение может быть статус, ссылки, Фото или видео.
  • created_time - время, когда был создан пост
  • updated_time - время, когда пост был обновлен
  • Комментарии - замечания по должности

Было бы разумно сохранить копию шпаргалки выше, так как мы будем использовать ее снова, когда будем публиковать объекты Post в Facebook.

Двигаясь дальше, давайте отображать новостную ленту в более приятной форме. Добавьте следующий HTML-код PHP код ниже:

Здесь мы используем простой трюк Graph API: объект Picture Graph API. По сути, вы можете выбрать путь к графу любого объекта «Пользователь» или «Страница» (например, http://graph.facebook.com/293518907333589), добавьте / picture в конце, и вы получите 50x50 фото этого объекта. Например:

HTTPS://Graph.Facebook.com/293518907333589/Picture

Становится...

Объект API демо картину графа

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

Добавьте этот внутри <? php foreach ($page_feed ['данные'] как $post):? > для отображения канала со страницы:

Когда вы снова обновите страницу, она должна выглядеть примерно так:

Выглядит хорошо, правда? Мы должны поблагодарить Twitter Bootstrap CSS за это!

Теперь давайте добавим верхнюю панель навигации, чтобы помочь нам переключаться с одной страницы на другую. Добавьте следующий HTML-код после<body>тега и перед<div id="main" class="container">Тег:</div></body>

Не забудьте загрузить выпадающую библиотеку JavaScript со страницы JavaScript Bootstrap в Twitter. Вы можете скачать его здесь.

Наконец, давайте создадим файл switch.php, где мы установим другую страницу в качестве активной страницы:

Обновите страницу manage.php еще раз, и вы должны увидеть что-то вроде этого:

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


Шаг 4. Публикация в Facebook через Graph API

Теперь мы готовы публиковать новые обновления на нашей странице! Прежде всего, давайте создадим HTML-форму, в которой мы можем указать, что мы будем публиковать. Добавьте это ниже<h3>Разместить новое обновление</h3>HTML:

Обновить, чтобы увидеть, как это выглядит:

Любящие стили форм Bootstrap по умолчанию

Шпаргалка Post должна пригодиться, когда мы выясним, что положить в поля. Теперь давайте создадим файл newpost.php, в котором мы фактически будем использовать API Graph Facebook для публикации в фиде страницы.

Начните с создания файла и инициализации библиотеки Facebook, как мы делали для других страниц:

После этого давайте получим весь контент, который мы получили из запроса POST:

Давайте не забудем добавить $ access_token для страницы к параметрам:

Теперь, когда у нас есть массив $ parameters, давайте создадим и отправим наш запрос API Graph!

Обратите внимание на то, что может изменить метод $. Вызов API GET для / me / feed возвращает ленту новостей этого конкретного объекта, но вызов API POST для / me / feed опубликует новое обновление статуса объекта.

Чтобы опубликовать новый объект пост на Facebook, приложению необходимо сделать вызов /<page_id or="" e="">/feed граф путь, и он должен поставить в массиве $parameters следующее:</page_id>

  • access_token - токен доступа учетной записи, для которой мы публикуем
  • сообщение - сообщение для публикации
  • картинка (необязательно) - ссылка на фото поста
  • имя (необязательно) - «заголовок» поста
  • ссылка (необязательно) - ссылка, по которой имя будет переходить при нажатии
  • заголовок (необязательно) - несколько слов для описания ссылки / названия
  • описание (необязательно) - более нескольких слов для описания ссылки / имени

Вы можете видеть, что единственные обязательные параметры - это access_token и параметры сообщения. Предоставляя только эти два, мы можем опубликовать простое сообщение о состоянии, например так:

Пример обновления статуса

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

Наконец, давайте попробуем опубликовать в Facebook с помощью приложения! Вернитесь на страницу manage.php и заполните форму, затем нажмите Post:

После этого вы должны быть перенаправлены обратно на страницу manage.php, но в ленте должен быть новый пост!

Публикация в Facebook успешна!

Вы также можете проверить страницу Facebook. Вы должны увидеть новый пост там:

Публикация на странице Facebook


Заключение

К настоящему времени у вас уже должно быть четкое представление о том, как использовать API Graph Facebook для чтения и публикации в Facebook. В этом уроке мы рассмотрим только основы - вы можете сделать гораздо больше, используя Graph API. Такие вещи, как обновления в режиме реального времени, которые позволяют вам подписаться на события, которые происходят с пользователями вашего приложения (например, когда пользователь меняет свою фотографию профиля), или объект графика Insights, который позволяет получать статистику приложения, страницы или домен, к которому у пользователя есть доступ.

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

FBDevWiki.com

Кроме того, есть также специальная версия StackOverflow для Facebook, которую вы можете посетить по адресу http://facebook.stackoverflow.com. Все вопросы касаются Facebook и Facebook Development, поэтому стоит посетить, если вам нужна помощь или у вас есть вопросы по этому вопросу.

Facebook StackOverflow

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

Использовали ли вы API Graph Facebook в предыдущем проекте или планируете использовать его сейчас? Расскажите мне все об этом в комментариях ниже и большое спасибо за чтение!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.