読者です 読者をやめる 読者になる 読者になる

オールアバウトTech Blog

株式会社オールアバウトのエンジニアブログです。

Facebook Instant Articles を実装から運用まで紹介

こんにちは、オールアバウトの@k_shiotaです。

今回はcitrusサイトを Facebook Instant Articles に対応しましたのでご紹介します。
Instant Articlesへの記事反映はAPIRSSの2種類の方法がありますが、今回はRSSで反映しています。

そもそも Facebook Instant Articles とは

ニュースサイトなどの記事コンテンツを直接ニュースフィードに配信するサービスです。
サイトに飛ばさずFacebookアプリ内に表示されるので表示は早いです。ただしPCは対象ではありません。
Facebook側で記事情報を持っていることになるので、基本的には同じ記事が2か所で管理されていることになります。

利用開始までの流れ

Facebook Instant Articles を使えるページにする

まずは下記のページの「Sign up」から、記事を選択してインスタント記事の利用を開始します。

instantarticles.fb.com

ドメイン登録

「投稿ツール」ページで左カラムの「インスタント記事/構成」を選択
「ツール」のブロックで「Connect Your Site」に記載のmetaタグを<head>内に追加
URL欄にmetaタグを取得できるURLを入力して「URLの取得」をクリックして、ドメインが許可されたかを確認しましょう

f:id:allabout-techblog:20160704153246p:plain

プロダクション・開発RSSフィード

ここには作成したRSSが設置されているURLを入力します。(上記のドメイン登録で登録したドメイン以下のURL)
取得自体は5分に1回程度で行われているようです。(7/1現在)
RSSの中に使われていURLもドメインのチェックをしております。
canonical」のドメインが登録されているドメインでないと、記事が登録されないので注意しましょう。

f:id:allabout-techblog:20160704154451p:plain

スタイル

最低限ロゴ画像を登録しなければなりません。
初期スタイルの「default」をクリックしてロゴをアップロードしましょう。

f:id:allabout-techblog:20160704154522p:plain f:id:allabout-techblog:20160704154532p:plain

確認方法

RSSで登録された記事はFacebook page managerアプリで確認ができます。

f:id:allabout-techblog:20160704160214p:plain
※右下の「・・・」をタップして「インスタント記事」を選択することで確認ができます。

RSSの構成

基本は下記の構成でRSSを作成することで、記事が登録されます。

developers.facebook.com

今回はRSS作成時に気づいたことやつまずいたことを記載します。

canonicalドメインが登録されているドメインと違うと反映されない

これはテストしている最中になかなか反映されない現象があり気づいたのですが、
テストで作成したドメインと本番で運用するドメインが違う場合にあるかも知れないので注意が必要です。

関連記事について

RSSで関連する記事も指定はできますが、指定しなかった場合はFacebook側が関連する記事を持ってきてくれます。
関連する記事は、Instant Articles以外の投稿も含まれます。

広告の自動配置

広告は自動配置と手動配置があり、自動配置にするとFacebook側で記事の長さに応じて広告表示位置を決めてくれます。

Instant Articlesの投稿

Instant Articlesの編集が完了して「公開」の流れになりますが、Instant Articles側で「公開」しても記事を投稿しないといけません。

記事が更新される判定

RSS上の<op-modified>の指定が更新されていた場合に、記事は更新されます。
Instant Articles側のみで編集した場合はすべて上書きされてしまうので注意が必要です。

記事のタグをそのままRSSに入れられない

利用できるタグが限られているため、記事中のタグを特定のタグに置換しなければならず、この部分で導入の敷居が高くなっていると思われます。
最低限10件の審査が通過すれば、Facebookページ管理から新しく「作成」や「編集」が可能ですので、自動化はできなくともとりあえず運用することは可能です。

PHPでしたら下記のSDKが利用できるかもしれません。 github.com

実際に運用してみて

上記の気になることの中にも出てきましたが、広告についてはFacebook側が自動で挿入してくれる仕組みもあります。ですが記事自体が長くなった場合広告数を制御できないため、広告の数が多いと感じる場合があります。
そのためcitrusでは広告タグを表示位置に書き出しています。

タグやデザインに制限があるものの、広告やGAタグ・その他独自の集計タグも入れられるのでサイトにアクセスする事とあまり変わりがありません。
表示される速度も段違いでInstant Articlesは早いので、表示が遅いなどのストレスなく記事を読めます。

現在はFacebookアプリにのみ対応しているので、スマホからのアクセスが多いサイトは導入してみてはいかがでしょうか?

関連リンク

https://hyper-text.org/archives/2016/04/facebook_instant_articles_quick_start.shtml
http://qiita.com/kay/items/bbc6c2e35db3370b787b
http://jp.techcrunch.com/2015/05/13/20150512facebook-instant-articles/