4. 記事をFacebookへ配信する

媒体側の記事をFacebookに配信する方法は、RSS方式とAPI方式の2つの方法がありますが、WordPressを利用している場合は、RSS形式がオススメです。

手順3で行ったInstant Articlesの利用登録が完了するとFacebookページのメニューから「投稿ツール」へアクセスできるようになっています。「投稿ツール」へアクセスし左メニューからインスタント記事の「構成」を選択してください。

次に「ツール」のブロックから「プロダクションRSSのフィード」を選択し、媒体のRSSフィードのURLを指定し保存します。Facebookは指定したURLから1時間に数回程度、自動的に記事を取得します。

5. 配信する記事の確認・手直し

記事がFacebookに収集されると、「プロダクション関連の記事」に取得された記事の一覧が表示されます。この時Instant Articlesのポリシーやガイドラインへの準拠していない記事があると、下記の画面のように記事タイトルの横に警告マークが表示されます。

警告マークが表示された記事を選択すると、ガイドラインに準拠していない箇所に分かりやすくエラーが表示されています。この画面では記事の確認だけでなく、直接修正することもできます。エラーが表示される箇所を適宜修正し「Save」ボタンを押すと配信する記事の内容を更新できます。

6. 広告、計測タグ、変換ルールの設定

手順5では警告が出ている箇所を手動で修正しましたが、記事を公開する度に手動で修正するのはとても手間がかかります。Instant Articlesでは使用できないタグもあるため、記事によってはどうしてもエラーが発生してしまいます。

WordPressのプラグインを使用すると、RSSで記事を配信する際に指定したタグに対して変換ルールを作成できるため、記事配信時にガイドラインに準拠したフォーマットで配信できます。

変換ルールの設定は、プラグインの設定画面の「Open Advanced Settings now」のリンクで表示される詳細設定から設定できます。広告表示や、計測タグもこの画面から設定できます。

「Custom transformer rules」欄の「Enable custom transformer rules」にチェックを入れるとテキストフィールドが表示されるため、こちらに変換ルールを定義します。記述形式に関しては、公式ページのドキュメントに記載がありますので、こちらを参考に設定してください。当サイトでは次の変換ルールを設定しています。

{
  "rules": [
    {
      "class": "PassThroughRule",
      "selector": "html"
    },
    {
      "class": "PassThroughRule",
      "selector": "div"
    },
    {
      "class": "PassThroughRule",
      "selector": "dl"
    },
    {
      "class": "PassThroughRule",
      "selector": "dt"
    },
    {
      "class": "PassThroughRule",
      "selector": "dd"
    },
    {
      "class": "BlockquoteRule",
      "selector": "pre"
    },
    {
      "class": "ItalicRule",
      "selector": "code"
    },
    {
      "class": "PassThroughRule",
      "selector": "small"
    },
    {
      "class": "PassThroughRule",
      "selector": "code br"
    },
    {
      "class": "SocialEmbedRule",
      "selector": "iframe",
      "properties": {
        "socialembed.url": {
          "type": "string",
          "selector": "iframe",
          "attribute": "src"
        },
        "socialembed.height": {
          "type": "int",
          "selector": "iframe",
          "attribute": "height"
        },
        "socialembed.width": {
          "type": "int",
          "selector": "iframe",
          "attribute": "width"
        },
        "socialembed.iframe": {
          "type": "children",
          "selector": "iframe"
        },
        "socialembed.caption": {
          "type": "element",
          "selector": "figcaption"
        }
      }
    }
  ]
}

次のページでは、審査の申請手順について説明します。