先日のFacebookカンファレンスであるF8にて発表された、Facebook Instant Articles。あらかじめ記事のデータをFacebookに提供することで、シェアされた記事をモバイルユーザーが選択した時に最大10倍と、ほぼ瞬時に表示される仕組みですが、日本語では「インスタント記事」となっていますが、Wordpressでサイト運用を行なっている場合に、これに対応する方法をまとめてみました。
facebook-instant-articles-1

まずは、Instant Articlesのサインアップページへ登録作業を行います。管理しているページが表示されるかと思いますので、Instant Articles対応を希望するページを選択して「Enable Instant Articles」をクリックします。

facebook-instant-articles-2

そうすると、今までのページ管理にある「設定」の中に「インスタント記事」が追加されています。ここで幾つかの事前設定を行うことが必要になってきます。

facebook-instant-articles-3

事前設定

今回特に対応が必要なのは下記になります。

Claim your URL:自分のサイトの所有者であることを証明します。

Create Articles:申請する記事をどのように登録するのか、ですが、今回はRSSフィード経由で登録をします。

Styles:Instant Articlesのヘッダー部分に表示されるサイトのロゴを設定します。

Claim your URL

この部分で表示されるメタタグを自サイトのヘッダーに追加し、「Claim URL」のボタンを押すことで、サイトの所有者であることが証明されます。

facebook-instant-articles-4

Create Articles

Instant Articlesでは、2種類のRSSを登録することができ、一つは公開向け、もう一つは開発向けになります。例えば、開発向けの記事などで細かなレイアウトの調整や新しいタグなどを試して、安定してきてから公開向けに反映するといった使い方ができます。

今回のInstant Articles向けのRSSですが、既に別の記事にて紹介しているWordpress向けプラグイン「Facebook Instant Articles & Google AMP Pages by PageFrog」の機能を利用します。

WordPressの管理画面に戻り、「Mobile Formats」の「Setup」にあるFacebook Instant Articles欄にある「Begin Setup」をクリックすると、下記のようなダイアログが表示されるかと思いますので、⑤にあるURLをコピーします。

facebook-instant-articles-5

このURLを、先ほどのFacebookにある「インスタント記事」の「Tools」「Production RSS Feed」に貼り付けます。「Save」を押して保存をし、自動的にFacebookより先ほどのRSSフィードへアクセスをして記事の追加を行う形になります。

facebook-instant-articles-6

この状態でしばらくすると、「投稿ツール」内の「インスタント記事」にある「プロダクション」内に、先ほどRSSで追加された記事一覧が表示されるようになります。記事の中でも問題になるタグやフォーマットなどが指摘される場合は下記のような「▲」マークがタイトルの横に表示されます。

facebook-instant-articles-7

編集ボタンをクリックすることで、指摘されている部分のタグがコメント付きで表示されています。このエラーメッセージに従って、マニュアルで記事のコードを修正します。

facebook-instant-articles-8

ロゴの設定

FacebookのInstant Articlesのヘッダー部分に表示されるロゴを指定します。「Tools」-「Styles」にある「default」を選択すると、下記のようなデザインオプションが表示されます。ここでは取り急ぎ、ヘッダー部分に表示されるロゴをアップロードします。

facebook-instant-articles-9

これで申請完了!

これで無事に記事が最低10個登録された状態になると、「Step 2」の「Submit for Reviews」がクリックできるようになります。Facebookページによれば、審査は24時間〜48時間の間に行われるということ。ワクワクしながら吉報を待つようにしましょう!

関連お勧めアイテム

[amazonjs asin=”4774173800″ locale=”JP” title=”WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)”]

[amazonjs asin=”4797381078″ locale=”JP” title=”本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版”]

[amazonjs asin=”4798130931″ locale=”JP” title=”一歩先にいくWordPressのカスタマイズがわかる本”]

この記事が気に入ったら
いいね ! しよう