Новости Open Graph в Интернете

В этом документе рассматриваются основные шаги по публикации новостей Open Graph.

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

Из этого руководства вы также узнаете о возможных дальнейших действиях.

Создание ID приложения Facebook

Возможно, у вас уже есть ID приложения Facebook для своего проекта. Один и тот же ID приложения можно использовать для разных платформ, таких как iOS, Android, а также для сайта.

Для начала создайте ID приложения Facebook, если у вас его еще нет.

Создать ID приложения

 
Появится всплывающее окно с предложением ввести следующую информацию:

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

После этого появится панель со статистикой пользователей и API. В этом окне на панели навигации слева нажмите Настройки.

Заполните соответствующие поля, как показано на снимке экрана ниже.

  • Эл. адрес для связи: адрес электронной почты разработчика.
  • Домены приложений: домен, в котором будет размещено приложение (без префикса «http://» или «https://»).

В этом примере используется базовая веб-страница, поэтому в качестве платформы потребуется добавить Интернет. Для этого нажмите Добавить платформу в нижней части страницы и выберите Сайт.

Введите путь к файлу, который будет предоставлен ниже.

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

Настройка приложения

Поместите указанный ниже файл по URI, который вы указали в настройках выше.

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

<html>
<head>
<title>Open Graph Getting Started App - og.likes</title>
<style type="text/css">
div { padding: 10px; }
</style>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
  // You probably don't want to use globals, but this is just example code
  var fbAppId = 'replace me';
  var objectToLike = 'http://techcrunch.com/2013/02/06/facebook-launches-developers-live-video-channel-to-keep-its-developer-ecosystem-up-to-date/';

  // This check is just here to make sure you set your app ID. You don't
  // need to use it in production. 
  if (fbAppId === 'replace me') {
    alert('Please set the fbAppId in the sample.');
  }

  /*
   * This is boilerplate code that is used to initialize
   * the Facebook JS SDK.  You would normally set your
   * App ID in this code.
   */

  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : fbAppId, // App ID
      status     : true,    // check login status
      cookie     : true,    // enable cookies to allow the
                            // server to access the session
      xfbml      : true,     // parse page for xfbml or html5
                            // social plugins like login button below
      version     : 'v2.7',  // Specify an API version
    });

    // Put additional init code here
  };

  // Load the SDK Asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

  /*
   * This function makes a call to the og.likes API.  The
   * object argument is the object you like.  Other types
   * of APIs may take other arguments. (i.e. the book.reads
   * API takes a book= argument.)
   *
   * Because it's a sample, it also sets the privacy
   * parameter so that it will create a story that only you
   * can see.  Remove the privacy parameter and the story
   * will be visible to whatever the default privacy was when
   * you added the app.
   *
   * Also note that you can view any story with the id, as
   * demonstrated with the code below.
   *
   * APIs used in postLike():
   * Call the Graph API from JS:
   *   https://developers.facebook.com/docs/reference/javascript/FB.api
   * The Open Graph og.likes API:
   *   https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes
   * Privacy argument:
   *   https://developers.facebook.com/docs/reference/api/privacy-parameter
   */

  function postLike() {
    FB.api(
       'https://graph.facebook.com/me/og.likes',
       'post',
       { object: objectToLike,
         privacy: {'value': 'SELF'} },
       function(response) {
         if (!response) {
           alert('Error occurred.');
         } else if (response.error) {
           document.getElementById('result').innerHTML =
             'Error: ' + response.error.message;
         } else {
           document.getElementById('result').innerHTML =
             '<a href=\"https://www.facebook.com/me/activity/' +
             response.id + '\">' +
             'Story created.  ID is ' +
             response.id + '</a>';
         }
       }
    );
  }
</script>

<!--
  Login Button

  https://developers.facebook.com/docs/reference/plugins/login

  This example needs the 'publish_actions' permission in
  order to publish an action.  The scope parameter below
  is what prompts the user for that permission.
-->

<div
  class="fb-login-button"
  data-show-faces="true"
  data-width="200"
  data-max-rows="1"
  data-scope="publish_actions">
</div>

<div>
This example creates a story on Facebook using the
<a href="https://developers.facebook.com/docs/reference/ogaction/og.likes">
<code>og.likes</code></a> API.  That story will just say
that you like an
<a href="http://techcrunch.com/2013/02/06/facebook-launches-developers-live-video-channel-to-keep-its-developer-ecosystem-up-to-date/">
article on TechCrunch</a>.  The story should only
be visible to you.
</div>

<div>
<input
  type="button"
  value="Create a story with an og.likes action"
  onclick="postLike();">
</div>

<div id="result"></div>

</body>
</html>

Публикация новости

После загрузки приложения появится следующий диалог:

Войдите в приложение, разрешите ему публиковать новости в Хронике, а затем нажмите кнопку «Создать новость...». После этого диалог будет выглядеть так:

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

Необходимо отметить ряд важных моментов, касающихся действия на Facebook:

Конфиденциальность

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

Действия и объекты

Центральная часть новости имеет большое значение. В ней указывается, что «[человеку] нравится статья в [приложении]». За действие «Нравится» отвечает API, который вы использовали. Отметки «Нравится» для новостей создает og.likes. Если вместо него использовать API book.reads, в новости было бы указано что-то вроде: «...читает...» или «...прочел...» По сути, API отметки «Нравится», который мы называем действием, представляет собой глагол.

Часть «article» также имеет важное значение. На рассматриваемой странице имеются теги, описывающие материалы и порядок их показа на Facebook. Если обратиться к источнику страницы, то можно увидеть, что на ней имеется тег, указывающий Facebook на тип материалов:

<meta property="og:type" content="article" />

С помощью этого тега Facebook отличает статьи от других материалов (например, от книг).

<meta property="og:type" content="book" />

Мы используем эти теги для описания объектов. Объекты можно назвать существительными. Объекты тесно связаны с действиями, которые вы используете. Например, books.reads может принять аргумент book. fitness.runs требует объект course. og.likes может принимать любой объект.

Отправка действий на проверку

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

Нажмите кнопку Подать заявку. Появится следующий экран:

На шаге 3 мы рассматривали структуру новостей, которые состоят из действий и объектов. В нашем случае в новости используется действие like, которое необходимо утвердить. (Отправьте заявку в Центр приложений, если хотите, чтобы ваше приложение было размещено в центре приложений Facebook. Центр приложений — это место, где люди выбирают для себя интересные приложения, поэтому после разработки своего приложения вам стоит подумать над тем, как повысить его популярность в Центре приложений.)

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

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

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

Дальнейшие действия

Ниже перечислены дальнейшие действия по изучению Open Graph: