本日FacebookのF８（Facebookの開発者会議。便利な機能をたくさん発表してくれる会です。）で「Instant Articles」の機能が一般向けに公開されたので弊社のサイトに実装してみました。
公式の記事はコチラ※英語です。
通常はシャアされた記事をタップすると、そのサイトを読み込むので表示されるまでロードするストレスがあるのですが、この機能を実装すると投稿した時点で記事をFacebook側にキャッシュしてくれるため、ロード時間がなくサクサク記事を読むことができるようになります。
Facebookの発表では、実装したことによってクリックは20％向上し、離脱率は70％も低くなり、さらにシェア数が30％も増加したそうです。
「Instant Articles」とは、Facebookのスマホアプリから記事が簡単に見ることができるようになる機能なのですが、詳しくは下記動画で動きをご覧ください。
注意点
導入を検討される前に大事な注意事項を。
・Facebookの開発者登録が必要です。
・Facebookの審査があります（しかも現在記事が50個ないと審査してくれません。弊社のサイトはまだ１０個程度しか記事がないので、テスト環境でしかみれないorz）
・本記事はWordpressのプラグインを活用しています。
・スマホからの表示のみで対応となります。PCだと今のところならないようです。（まぁモバイル対応みたいなので。）
それ以外にも実装に手間取ったことがいくつかあるので、それは下記の実装手順に記載します。
大きな問題は記事が50個以上ないと審査してもらえない（4/13時点ですが）ということでなので、せっかく実装してみたのに、弊社のように審査に回せないというところが要注意です。
WordPressのプラグイン「Instant Articles for WP」をインストール
まずは、Wordpress上で、プラグインの「Instant Articles for WP」を探してインストールしてください。
上記文字で検索してもらえれば一番上に表示されます。
「有効」にするのを忘れないようにしてくださいね。
WordPress上でFacebookのApp IDとApp Secretを入力
上記画像にApp IDとApp Secretコードの入力が必要なります。これは前述でお伝えした、Facebookの開発者登録が必要となります。
こちらから登録可能です。
Facebookにログインします
上記画面が出てきたら「Login with Facebook」ボタンを押して、ログインしてください。クリックするとログイン画面が表示されます。
Facebook上でInstant Articlesを有効にする
Start using Instant Articleのページが表示されるので、自分のアカウントを選択した上で「Enable Instat Articles」をクリックして利用可能な状態にします。その際「Terms」※規約のチェックも忘れないようにしてくださいね。
WordPress側でアカウントを選択にし、有効にする
画像のように、Wordpress上に戻って、アカウントを選択して「NEXT」をクリックしてください。
ここでハマったのですが、最後に一番下にある「Save Changes」を必ずクリックしてください。
そうしないと設定が保存されていないので、ページ移動してしまうと１から再設定が必要になります。
また、最後の作業として、必ず記事個別での再更新が必要となります。自動ではならないのでご注意ください。（これもはまりました。）
Facebook page manegerアプリで表示を確認する
表示の確認はFacebook page manegerアプリで確認可能です。前述の動画（Gifアニ）はそこからキャプチャしたもので。
Facebook for developersから申請をして審査にだす。
最後にFacebookサイトに「Instant Articles」を本番環境にできるように申請をします。
これがどうやら記事が50個以上ないと審査ボタンが押せないようです。
弊社はがんばって記事を書いて早めに申請してみようと思います。
日本語のガイドラインはこちらに記載してあります。
なお、簡単なHTMLをプラグインで自動変換して、Facebook側にキャッシュをするので複雑なHTMLを記載している場合は、エラーが出ることがあります。
弊社は、Listをショートコードにして画像をスクロールさせていたのですが、そういったのものは無視されてします。HTMLの厳密な規則に沿ってコーディングしてない場合は、表示不具合がでることもあるようです。
以上となります。なにか質問あれば下記よりお問い合わせくださいね。
