WordPressをFacebook Instant Articlesに対応させる手順

福田です。このブログの一部記事においてFacebook Instant Articles(インスタント記事)に対応させました。今回は対応させる手順をざっくり書いていきます。その中で遭遇したエラーへの対処法も書いておきます。

　　　　　　　　　　　　　　　　　　　　　　　

雷

Instant Articles(インスタント記事)はざっくりいうとGoogleのAMPと似たようなものです。というか使えるHTMLを少なくしている時点でほぼ一緒。さらに自由度を下げてさらなる高速化が見込めることがメリットといったところでしょうか。Facebook流入が多いサイトはオススメです。

必要なもの

  • 記事が5つ以上あるWordPress
  • Facebookページ
  • Facebook API

このうち、Facebookページの作成方法とWordPressのインストール方法については端折ります。
あと、WordPressの記事が5つ以上あるというのも頑張れば1日~1週間ぐらいでできると思いますので端折ります。

Instant Articlesを有効にする

まずはInstant Articlesをページで使えるようにしましょう。
インスタント記事に関する登録に飛び、対応させたいFacebookページを選びます。選んだら、「手順を進めることで、Instant Articles Termsに合意したとみなされます。」の横のチェックをクリック、「インスタント記事ツールへアクセス」を押すことでこの手順は完了です。

Facebookのアプリを作る

Instant Articles for WPプラグインというのをこのあと利用するのですが、その際にアプリケーションAPIが必要になるので、FacebookのアプリケーションAPIが使えるように、まずはすべてのアプリ – 開発者向けFacebookにアクセスし、アプリを作ります。右にある「新しいアプリを追加」をクリック。
すると、次のような画面が出てきます。

アプリ追加画面

これらは指示通りに普通に入力するだけです。カテゴリは「ページ用アプリ」を選びます。
このあと、キャプチャが出てきます。読みにくいことが多いので、何度か「読めません」をクリックして読みやすいやつが出てくるのを待つ方がいいかもしれません。

そして、アプリができるのでそうしたらアプリケーションIDとアプリケーションシークレットをコピーします。
アプリの画面を開いて、アプリIDをまずどこかメモ帳などにコピー。そのあと、app secretの部分の右にある「表示」をクリックしてFacebookのパスワードを入力、表示させてコピーします。

その次に「設定」をクリック。下にある「プラットフォームを追加」をクリックし、「ウェブサイト」を選びます。すると「サイトURL」の入力画面が出てきます。そこに、今回インスタント記事を対応させるサイトのURL(このサイトであればhttps://otya.me/)と入力します。
そして忘れないでいただきたいのは「アプリドメイン」。ここには先ほどのURLと同じURLを入力します。

これでアプリの準備は完了です。次は、WordPressにプラグインをインストールします。

プラグインのインストール

プラグインはWordPressの管理画面からプラグイン→新規追加と進みます。検索窓に「Instant Articles for WP」と入力します。

Instant Articles for WP

製作者がAutomatticとFacebookが入っている↑のやつです。これを「今すぐインストール」を押してインストール、「有効化」を押して機能を有効にします。

有効にしたあとは設定など

左側にFacebookのロゴとともに「Instant Articles」の項目が出てくると思います。それをクリックします。

すると、APIキーとシークレットの入力が要求されるので先ほどのものを入力し、FacebookのOAuth認証を通します。その際、権限が云々言ってくる可能性がありますが、特に使う分には問題ないので無視して許可します。
そのあとは対象とするFacebookページを選択、さらにFacebook Instant Articlesで表示した際の見た目を決めます。必須なのは表示するロゴのみです。まあ、これに関してはざっくりイラレとかペイントとか使って、ロゴを左に、ブログのタイトルを右につけておけばいいでしょう。むしろ背景つけるとキモい感じになります。透過PNGでないと受けつけないようです。最小のサイズは690×132とちょっと大きめです。将来的なことを考えると2倍~4倍サイズで作っておくといいでしょう。個人的には容量は100KB以下がオススメです。せっかくのInstant Articleなんですから、無駄に画像サイズがでかいのはどうかと。

保存時はデフォルトで作成される「default」だとなぜかエラーが発生するので、別名で保存します。その名前は控えておいてください。保存したらウィンドウを閉じて、「Already set up? Open Advanced Settings now」を開きます。

Article Styleに先ほど保存したスタイルの名前を入れます。これでスタイルが変更されました。
それから、しばしば発生しやすいのがInstant Articles対応記事への自動変換時に変換できないというエラー。あなたの記事内で使っているプラグインなどによりますが大多数のエラーは潰せるコードをご紹介(少なくとも自前で用意した画像とGoogle Maps、コードぐらいならばエラーが発生しません。Getty ImagesのEmbedについてはちょっとうまく動かないようです)します。これはPublishing Settings内のCustom transformer rulesで、Enable custom transformer rulesにチェックを入れてから以下のコードをコピペして使います。

{
    "rules": [
        {
            "class": "PassThroughRule",
            "selector": "//a[descendant::img]"
        },
        {
            "class": "PassThroughRule",
            "selector": "html"
        },
        {
            "class": "PassThroughRule",
            "selector": "div"
        },
        {
            "class": "PassThroughRule",
            "selector": "dl"
        },
        {
            "class": "PassThroughRule",
            "selector": "dt"
        },
        {
            "class": "PassThroughRule",
            "selector": "dd"
        },
        {
            "class": "BlockquoteRule",
            "selector": "pre"
        },
        {
            "class": "ItalicRule",
            "selector": "code"
        },
        {
            "class": "PassThroughRule",
            "selector": "code br"
        }
    ]
}

これを追加したら、下にある「Save changes」をクリックして保存します。
上に行って、Reviewの部分で表示されているエラーがある記事は一旦非公開(下書き)にするか、あるいは該当記事に飛んで編集画面下部にあるInstant Articlesの部分でエラーを確認します。そのエラーを検索して、先ほどの変換ルールに追加するかします。
最後に、エラーを全部潰せたら(WordPressのInstant Articles for WPの設定画面でレビュー依頼のボタンを押せるようになったら)レビュー依頼をします。

レビュー依頼をする

Review依頼のボタンはなぜかダッシュボードから使おうとすると「Permission Error」とでて動かないので、一回押してダメなら次の通りにします。
まずは対応させるFacebookページにアクセス、上部の投稿ツールをクリック。インスタント記事の項目に飛びます。

Instant Articlesの設定画面

この中の、「ステップ2: 審査を申請する」をクリック、Review~のボタンをクリックするととりあえず申請できます。あとはウッキウキしながら待つだけです。基本的にまともなコンテンツであって、ここにある手順を無視しなければ審査は通るはずです(通るとは言っていない)。
特段通っても何も返事来ません。

使えるようになったら?

そして使えるようになったら、該当Facebookページの「投稿ツール」から「プロダクション関連の記事」をクリック。一番上のやつにチェックを入れると全選択になるので「アクション」をクリック、「公開」をクリックしてみんなが見れるようにします。基本的にタイトルの横にビックリマークが出てなければ変換はほとんどの場合うまく行っているので、問題ないです。ビックリマークが出ているものは鉛筆マークをクリックして様子を見た方がいいでしょう。僕の場合は改行をしすぎてエラーが出ていました。どうやら1段落の中に3行以上改行を入れると変換がうまくいかないようですので、その点注意した方がいいです。
もしエラーが出ていることに対する警告などのメールを受領したければ、「構成」をクリック。ツール内の「メールでの通知」をクリックしてFeed errors and alertsにチェックを入れて保存を押せばオッケーです。

動作の確認は、スマホから適当に対応記事のURLをポストしてみて、その横にかみなりマークが出てるかどうかでチェックできます。わからなければ、タップしてみていつもとは違うデザインで表示されればそれがInstant Articlesに対応しているということです。

以上で完了です。

アクセス解析はいらない!

アクセス解析は不要です。先ほどのところの、編集ボタン(鉛筆マーク?)の横に棒グラフみたいなボタンがあります。これがインサイトというもので、これを使えば閲覧数なども把握できるのでアクセス解析を特段追加する必要性はないようです。ただ、一元化できないという面倒はありますが。
AdSenseは要検証です。個人的にはFacebook オーディエンスネットワークの方がせっかくFacebookプラットフォームを使うならということでオススメです。多分クリック単価も高いのではと思います(未検証)

Facebook オーディエンスネットワークについてはまた後日

Instant Articles内に表示できるFacebook オーディエンスネットワークはW-8BENの提出や追加認証が必要になり、大変記事が長くなるのでまた後日とさせていただきます。もしかしたら公開しない可能性もありますが。

まとめ

特にエラーなどがなければ最短30分ぐらいで対応できるでしょう。広告を入れないと収入は下がりますが、後日解説するかもしれない「Facebook オーディエンスネットワーク」を入れると収益化できるので大丈夫だと思います。
似たようなアプローチのAMPは有名ですが、こちらはあまり熱い内容ではまだない感じですね。徐々に広まることでクソ重いサイトがなくなることを期待しています。

この記事は最終編集から一年以上経過しております。この記事に書かれた内容をご利用・実践される際は十分ご注意ください。

Sponsored link

コメントは受け付けていません。