Facebook Instant Articles を実装から運用まで紹介
こんにちは、オールアバウトの@k_shiotaです。
今回はcitrusサイトを Facebook Instant Articles に対応しましたのでご紹介します。
Instant Articlesへの記事反映はAPIとRSSの2種類の方法がありますが、今回はRSSで反映しています。
そもそも Facebook Instant Articles とは
ニュースサイトなどの記事コンテンツを直接ニュースフィードに配信するサービスです。
サイトに飛ばさずFacebookアプリ内に表示されるので表示は早いです。ただしPCは対象ではありません。
Facebook側で記事情報を持っていることになるので、基本的には同じ記事が2か所で管理されていることになります。
利用開始までの流れ
Facebook Instant Articles を使えるページにする
まずは下記のページの「Sign up」から、記事を選択してインスタント記事の利用を開始します。
ドメイン登録
「投稿ツール」ページで左カラムの「インスタント記事/構成」を選択
「ツール」のブロックで「Connect Your Site」に記載のmetaタグを<head>内に追加
URL欄にmetaタグを取得できるURLを入力して「URLの取得」をクリックして、ドメインが許可されたかを確認しましょう
プロダクション・開発RSSフィード
ここには作成したRSSが設置されているURLを入力します。（上記のドメイン登録で登録したドメイン以下のURL）
取得自体は5分に1回程度で行われているようです。（7/1現在）
RSSの中に使われていURLもドメインのチェックをしております。
「canonical」のドメインが登録されているドメインでないと、記事が登録されないので注意しましょう。
スタイル
最低限ロゴ画像を登録しなければなりません。
初期スタイルの「default」をクリックしてロゴをアップロードしましょう。
確認方法
RSSで登録された記事はFacebook page managerアプリで確認ができます。
※右下の「・・・」をタップして「インスタント記事」を選択することで確認ができます。
RSSの構成
基本は下記の構成でRSSを作成することで、記事が登録されます。
今回は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/
