Facebookでのページ表示を高速化させる「Instant Articles」をWordPressに導入してみた

以前から「Instant Articles」は気になっていたのですが、下記の「ICS MEDIA」さんの記事がとてもわかりやすく、よさそうだったので、参考にして当サイトでも導入することにしてみました。

ウェブページの読み込みを高速に！ FacebookのInstant Articlesの導入方法 - ICS MEDIA

Facebookアプリのニュースフィードに流れている記事を選択したものの、読み込みが遅く記事を読むのを諦めた経験はありませんか。記事を選択すると媒体側のサイトへアクセスしコンテンツを表示しますが、読み込み時間が遅いとせっかく良い記事を作成し...

手順は「ICS MEDIA」さんとほとんど同じですが、紹介していきます。

「Instant Articles」とは
「Instant Articles」を導入する
インスタント記事を確認する
まとめ

「Instant Articles」とは

Instant Articles | Facebook

「Instant Articles」はFacebookアプリでタイムライン上に表示される簡易的な記事のことで、表示速度は通常の記事と比べてはるかに高速です。

高速で簡易的という意味では、Googleが推し進める「AMP」と少し似ています。

「Instant Articles」を導入する

「Instant Articles for WP」プラグインをインストールする

まずは準備として、プラグインをインストールします。WordPress管理画面にあるプラグインのインストール画面で「Instant Articles for WP」と入力します。

インストール画面で「Instant Articles for WP」と入力

検索結果の一覧に「Instant Articles for WP」とプラグインが表示されるので、「今すぐインストール」をクリックします。

Instant Articles 「今すぐインストール」をクリック — 「今すぐインストール」をクリック

次に「有効化」をクリックします。

Instant Articles 「有効化」をクリック — 「有効化」をクリック

「Instant Articles for WP」の設定1

プラグイン有効化したあとメニューから「Instant Articles」を選択します。

Instant Articles メニューから「Instant Articles」を選択 — メニューから「Instant Articles」を選択

設定を行うために「Get Stared」をクリックします。

Instant Articles 「Get Stared」をクリック — 「Get Stared」をクリック

Facebookにログインしている状態で、「Get App ID」をクリックします。

Instant Articles Facebookにログインしている状態で「Get App ID」をクリック — Facebookにログインしている状態で「Get App ID」をクリック

右上にあるアカウント情報の一覧から、登録しているアカウント名をクリックします。

Instant Articles 登録しているアカウント名をクリック — 登録しているアカウント名をクリック

ダッシュボードに表示される「アプリID」と「app secret」を控えておきます。

Instant Articles 「アプリID」と「app secret」を控えておく — 「アプリID」と「app secret」を控えておく

「Instant Articles for WP」の設定画面に戻り、「App ID」と「App Secret」に先ほど控えた値を入力して「Log In」をクリックします。

Instant Articles 「App ID」と「App Secret」に控えた値を入力 — 「App ID」と「App Secret」に控えた値を入力して「Log In」をクリック

「Login with Facebook」をクリックします。

Instant Articles 「Login with Facebook」をクリック — 「Login with Facebook」をクリック

「許可するアクセスを選択」をクリックします。

Instant Articles 「許可するアクセスを選択」をクリック — 「許可するアクセスを選択」をクリック

許可するアクセスを確認し、よければ「OK」をクリックします。

Instant Articles 許可するアクセスを確認し、「OK」をクリック — 許可するアクセスを確認し、「OK」をクリック

Facebookにサインアップするアカウントを選択します。

Instant Articles Facebookにサインアップするアカウントを選択 — Facebookにサインアップするアカウントを選択

「Instant Articles」を利用するページを選択し、利用に合意した後、「インスタント記事ツールへのアクセス」をクリックします。

Instant Articles 「インスタント記事ツールへのアクセス」をクリック — 「インスタント記事ツールへのアクセス」をクリック

「Instant Articles」を利用するアカウントを選択し、「Select」をクリックします。

Instant Articles 利用するアカウントを選択し「Select」をクリック — 利用するアカウントを選択し「Select」をクリック

「Customize」をクリックします。

Instant Articles 「Customize」をクリック — 「Customize」をクリック

「Instant Articles」のデザイン設定

「Customize」をクリックすると、「Instant Articles」のデザインスタイルをカスタマイズする画面に遷移します。

Instant Articles 「Instant Articles」のデザインスタイルをカスタマイズするページ — 「Instant Articles」のデザインカスタマイズ画面

カスタマイズ画面ではフォントの色や、背景色などのスタイルを細かく指定できます。ロゴの選択は必須となるので、ロゴ画像を最初に決めておきます。

Instant Articles ロゴ画像を最初に決める — ロゴ画像を最初に決める

ロゴは透過PNG、サイズは横690px、縦132px以上のファイルを選択します。

Instant Articles ロゴは透過PNG、サイズは横690px、縦132px以上 — ロゴは透過PNG、サイズは横690px、縦132px以上

画面上部にあるフィールドにスタイル名を入力し、「作成する」をクリックします。

スタイル名を入力し、「作成する」をクリック

「インスタント記事」の設定

Facebookに移動し「投稿ツール」を選択すると、「インスタント記事」というカテゴリが作成されているので、「構成」をクリックします。

Instant Articles 「投稿ツール」から「インスタント記事」の「構成」をクリック — 「投稿ツール」から「インスタント記事」の「構成」をクリック

「ツール」にある「プロダクションRSSフィード」の「RSSフィードURL」に、登録したいサイトのRSSフィードを入力して、「保存」をクリックします。

Instant Articles 登録したいサイトのRSSフィードを入力して「保存」をクリック — 登録したいサイトのRSSフィードを入力して「保存」をクリック

問題なければ正常に更新された旨のメッセージが表示されるので、「OK」をクリックします。

Instant Articles 正常に更新された旨のメッセージが表示された後、「OK」をクリック — 正常に更新された旨のメッセージが表示された後、「OK」をクリック

次に「インスタント記事」にある「プロダクション関連の記事」をクリックします。

Instant Articles 「プロダクション関連の記事」をクリック — 「プロダクション関連の記事」をクリック

「プロダクション関連の記事」の一覧には「Instant Articles」に公開予定の記事が表示されます。「Instant Articles」のガイドラインに準拠していない記事がある場合、警告アイコンが表示されます。

Instant Articles 「Instant Articles」ガイドラインに準拠していない記事がある場合、警告アイコンが表示 — ガイドラインに準拠していない記事がある場合、警告アイコンが表示

警告アイコンが表示されている記事の編集アイコンをクリックします。

Instant Articles 警告アイコンが表示されている記事の編集アイコンをクリック — 警告アイコンが表示されている記事の編集アイコンをクリック

確認ページが表示され、ガイドラインに準拠していない箇所が強調されます。エラー内容を確認し修正した後、右上にある「Save」クリックすると、内容を更新することができます。

Instant Articles ガイドラインに準拠していない箇所が強調 — ガイドラインに準拠していない箇所が強調

「Instant Articles for WP」の設定2

「Instant Articles for WP」プラグインの画面に戻り、「Next」をクリックします。

Instant Articles 「Instant Articles for WP」プラグインの画面で「Next」をクリック — 「Instant Articles for WP」プラグインの画面で「Next」をクリック

「Instant Articles」の内容として問題がある場合、「Submit for Review」の一覧に表示されます。

Instant Articles 問題がある記事のタイトルが「Submit for Review」に一覧に表示 — 問題がある記事のタイトルが「Submit for Review」に一覧に表示

「Instant Articles」のガイドラインに沿って修正をするか、何らかの理由でどうしても修正できない、またはエラーが消えない場合は、警告があることを承知で該当の記事に行き、「Facebook　Instant Articles」にある「Submit this article even with warnings」のチェックを入れます。

Instant Articles 「Submit this article even with warnings」のチェックを入れる — 「Submit this article even with warnings」のチェックを入れる

次に「Open Advanced Settings now」をクリックし、Facebook側で設定した内容をプラグイン側にも反映させます。

「Open Advanced Settings now」をクリック

「Open Advanced Settings now」をクリックすると、詳細設定が同ページに表示されます。

Instant Articles 詳細設定が同ページに表示される — 詳細設定が同ページに表示

「Active Style」に「Instant Articles」で利用するスタイルを設定した時に決めた、デザインスタイル名を入力します。次に「Custom transformer rules」にある「Enable custom transformer rules」のチェックを入れて、「Instant Articles」の変換を定義します。記述内容は「Transformer Rules」に詳細な形式が記載されているので、参考にして設定します。設定が終わった後、「Save Changes」をクリックして設定を保存します。

Instant Articles デザインスタイルと「Transformer Rules」を設定する — デザインスタイルと「Transformer Rules」を設定する

「Instant Articles」の審査を申請する

全ての準備ができた後、「Instant Articles」の審査を申請します。Facebookの「投稿ツール」から「インスタント記事」の「構成」に行き、「ステップ2:審査を申請する」にある、「審査を申請する」をクリックします。

Instant Articles 「ステップ2:審査を申請する」から「審査を申請する」をクリック — 「ステップ2:審査を申請する」から「審査を申請する」をクリック

問題がなければ審査申請の送信がされた旨のメッセージが表示されるので、「OK」をクリックします。

Instant Articles 審査申請の送信がされた旨のメッセージが表示された後、「OK」をクリック — 審査申請の送信がされた旨のメッセージが表示された後、「OK」をクリック

「OK」をクリックした後、審査が完了するまでのおおよその期間が表示されます。

Instant Articles 審査が完了するまでのおおよその期間が表示される — 審査が完了するまでのおおよその期間が表示される

プラグインの画面に行くと、「Review Articles Submitted」と表示され、レビュー待ちのメッセージが表示されます。

Instant Articles レビュー待ちのメッセージが表示 — レビュー待ちのメッセージが表示

審査が通るまで、1～3営業日ほどかかるようなので待ちます。

審査後

審査後、問題がある場合インスタント記事の「構成」に下記のようなお知らせが来ることがあります。

私の場合は下記のような問題がありました。

Instant Articlesスタイルフォーマットの問題 — スタイルフォーマットの問題

Instant Articles メディア解像度の問題 — メディア解像度の問題

プラグイン側では下記のようなメッセージが出ます。

Instant Articles 審査後のプラグイン側の表示" — 審査後のプラグイン側の表示

内容を確認した後、修正していくことになります。

インスタント記事を確認する

インスタント記事は「Facebookページマネージャ」アプリで確認することができます。

ページマネージャ: 制作: Facebook
評価: 4.0 / 5段階中
価格: 無料 (2016/11/30 時点)
posted by: AndroidHTML v3.1

アプリトップの右下にあるメニューから、「インスタント記事」をタップして記事の一覧にいきます。

Facebookページマネージャ右下にあるメニューをタップ — 右下にあるメニューをタップ

Facebookページマネージャ「インスタント記事」をタップ — 「インスタント記事」をタップ

一覧から記事をタップすると詳細ページに遷移します。

まとめ

「Instant Articles for WP」プラグインをインストールして設定をする。
「Instant Articles」のデザイン設定をする。
「インスタント記事」の設定をする
再度「Instant Articles for WP」の設定をする。
「Instant Articles」の審査を申請する。
「Facebookページマネージャ」でインスタント記事を確認する。

手順としてはそこそこ数があるので、多少てこずるかと思いましたが、ロゴの選択以外はすんなりと出来ました。Facebookのインスタント記事の表示について気になった方は導入を検討してみてはいかがでしょうか。