【2021年版】WordPressと Facebookを連携して投稿する!

WordPressからSNSへの投稿を可能にするプラグイン「NextScripts: Social Networks Auto-Poster」を使って、WordPressからFacebookページへの投稿にトライ。

色々な紹介記事を漁りながらやってみたものの、Facebookアプリレビューを含め、つまづく点がかなり多かったので、「これならいけた」というところをシェアします。


月々の電気の支払いでAmazonギフト券がもらえる!?東京ガスの新電力サービス【もらえる電気】


新規開通で45,000円キャンペーン実施中!下り最大2Gbpsの高速インターネット【NURO 光】

目指したい事

プラグイン「NextScripts: Social Networks Auto-Poster」を使って、WordPressで作成した投稿をFacebookページに簡単に投稿できるような環境を構築します。

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

「NextScripts: Social Networks Auto-Poster」をインストールします。
下記サイトからダウンロードして手動インストールするか、WordPressの管理画面からインストールして下さい。

NextScripts: Social Networks Auto-Poster

NextScripts: Social Networks Auto-Posterの2021/8/5現在のバージョンは4.3.20です。古いバージョンのものだと、FacebookアプリのAPIとの兼ね合いで、認証時にエラーになりますので、気をつけましょう。

こんな感じのエラーが出ちゃうので、少なくとも4.3.20より新しいバージョンのものを使うべし!

プラグインのインストールが出来たら、とりあえず有効にしておきましょう。
設定は、Facebookアプリの準備が出来たら進めます。

Facebookアプリの作成

「Facebook for Developers」のサイトでFacebookアプリを作ります。

Facebook for Developers

Facebookの開発者登録がまだという方は「Facebook 開発者 登録」あたりでググって開発者登録まで進めて下さい。

画面右上の「マイアプリ」をクリック

画面右上の「アプリを作成」をクリック

「ビジネス(※)」を選択して「次へ」をクリック。
※「ビジネス」でなくても良いのかもしれませんが、私は「ビジネス」でとりあえずアプリは正常に動いてます。

「アプリ表示名」と「アプリの連絡先メールアドレス」は任意のものを記入し、「アプリの目的」は「自分自身または自分のビジネス」をチェックして、「アプリを作成」をクリック。

アプリ設定前の準備|1.アプリアイコンを作成する

レビューで後々使う事になるので、アプリアイコンを作成します。
サイズは512ピクセル×512ピクセル 〜 1024ピクセル×1024ピクセルの範囲内で、ファイル形式はpng/jpg/gifのいずれかです。

ユーザーに見られる事は無いので、適当に作っちゃいましょう。

アプリ設定前の準備|2.プライバシーポリシーページを作成する

地味に面倒でした…

この後のアプリの設定で「プライバシーポリシーのURL」を入力するところがあり、最初はとりあえずトップページのURLを入れておいたのですが、そうしたらレビューで怒られましたので、作成するハメに…

Webサイトの利用規約」というサイトでプライバシーポリシーの雛形を入手し、結果、下記のページのようになりました。

プライバシーポリシーページ

とりあえず雛形のままだと、WEB上でユーザーにログインしてもらって、何かサービスを提供するようなサイトをイメージしてプライバシーポリシーが作られているようでした。私の場合は問い合わせフォームからお名前とメールアドレスの情報いただくくらいのものでしたので、結構カットする部分がありました。

ただ、法的にこれで大丈夫かは分かりません^^;
とりあえず、これでFacebookのレビューは通れました。

アプリ設定前の準備|3.レビューに使う動画を作る

Facebookアプリを作って、何をどうしたいの?という事を端的に説明するのに、動画を用意しなければならず、とりあえずこんな感じで作りました。(私はmacに入ってるiMovieを使いました。)

Facebookアプリの設定

ようやくアプリの設定です。

「設定」>「ベーシック」から設定していきます。

「アプリドメイン」には、自分のサイトのURLを入れます。(例:hogehoge.com)
「プライバシーポリシーのURL」には先ほど作成したプライバシーポリシーページのURLを入れます。
「アプリアイコン」には先ほど作成したアイコンを入れます。
「カテゴリ」には「ビジネス・ページ」を入れます。(これで良いのかは分かりませんが、ちゃんとアプリは動きます。)

ここまで入力できたら、このページの最下部までスクロールして…

「プラットフォームを追加」をクリック

「ウェブサイト」をクリック

「サイトURL」を入力して「変更を保存」をクリック

 

アプリにFacebookのログイン認証を追加する

画面左のサイドメニューから「商品を追加」をクリックし、
「Facebookログイン」の「設定」をクリック。

こんな画面になりますが、「クイックスタートを使用して…」は無視して左サイドメニューの「設定」をクリック。

「有効なOAuthリダイレクトURI」に「https://○○○(※)/wp-admin/admin.php?page=nxssnap」と記入して、画面右下の「変更を保存」をクリック。

※上記の「○○○」にはWordPressをインストールしたディレクトリを書き込みましょう。
hogehoge.comのルートディレクトリにWordPressが置いてあるのであれば、「hogehoge.com」と記入。
ルートディレクトに「wp」などのディレクトリを作成して、そこにWordPressが置いてあるのであれば、「hogehoge.com/wp」と記入すればOKです。

プラグインの準備

いよいよFacebookアプリのレビュー!に、進みたいところですが、その前にプラグインの準備が必要です。
まずは、Facebookアプリの「アプリID」と「app secret」を確認します。

左サイドメニューの「設定」>「ベーシック」をクリック。
「アプリID」と「app secret」をメモ帳などにメモします。
※「app secret」は、枠の右側にある「表示」をクリックすると表示されます。

「SNAP|AutoPoster」>「Accounts」をクリック。

「Add new account」をクリック。

「Please select network」>「Facebook」をクリック

先ほどメモした「アプリID」→「App ID」に入力、
「app secret」→「App Secret」に入力し、「Update Account Info」をクリック。

これでプラグインの準備は完了です。

Facebookアプリのレビュー

ここまで結構長いみちのりでしたが、いよいよアプリのレビューです。

左サイトメニューの「アプリレビュー」横の矢印をクリックすると表示される「アクセス許可と機能」をクリック。

「pages_read_engagement」「pages_show_list」「pages_manage_posts」それぞれの「アドバンスアクセスをリクエスト」をクリックし、左サイドメニューの「リクエスト」をクリックします。

「現在のリクエスト」欄内の「保留中のリクエスト」に、先ほど選択した
「pages_read_engagement」「pages_show_list」「pages_manage_posts」の3つがあるか確認した後、「編集」をクリック。

「認証情報を提供する」をクリック。

「ウェブサイト」にチェックを入れます。
大きい枠の中には後述の記載を入れて、「保存」をクリックします。

大きい枠の中には、WordPressの管理画面にログインし、プラグイン「NextScripts: Social Networks Auto-Poster」をFacebookで認証させ、プラグインからテスト投稿をし、その結果Facebookページに投稿されるまでの流れを事細かに記載していきます。

私は下記のように、記載しました。

1.サイトのWordPress管理画面にログインします。URLは「※WordPress管理画面のログインURLを記述※」。ユーザー名は「※ユーザー名を記述※」。パスワードは「※パスワードを記述※」
2.次にFacebookアクセス認証が必要な、WordPressプラグイン「Social Networks Auto-Poster」の設定画面に移動します。URLは「https://※WordPressの設置アドレスを記述※/wp-admin/admin.php?page=nxssnap」です。
3.画面に表示される「Auto-publish to Facebook (Facebook #0)」にマウスカーソルを合わせると表示される「Show Settings」をクリックします。
4.次の画面に表示されるリンク「Authorize Your Facebook Account」で、認証が必要になります。
5.次の画面に表示「○○で継続(continue as ○○)」をクリックします。
6.「Where to Post」に記載のあるFacebookページを確認します。
7.画面下部にある「Submit Test Post to Facebook」をクリックします。
8.「ok」をクリックします。
9.手順6で確認したFacebookページにログインし、手順8でPostした投稿がされているか確認します。

「リクエストするアクセス許可と機能」下部にある「アプリが○○○アクセス許可のアドバンスアクセスを利用する用途」をクリック。(上の図では1つしか枠がありませんが、本来は3つあるはずです。)

一番上の枠にはWordPressとFacebook連携により、実現させたい事を書きます。(入力内容は後述します)
「ファイルをアップロード」から、作成した動画をアップロードします。
「承認された場合、…」にチェックをつけて「保存」をクリック。

私は一番上の枠には、下記の内容を入力しました。

WordPressからFacebookページへの自動投稿の実現

これを3つのアクセス許可(pages_read_engagement・pages_show_list・pages_manage_posts)に対して同じように設定しましょう。

ここまでの入力ができていれば、「アプリ設定を完了」の欄内に青いチェックがついているはずですので、この工程は飛ばして構いません。
青いチェックがついていない場合は「アプリの設定を確認する」をクリック。

各種設定を確認して「保存」をクリック。

ここまでの設定ができていれば、あとは「審査を申請する」をクリックできるようになっているはずですので、クリック!

以上でレビューのリクエストは完了です!
大体半日もすればレビューの結果が返ってくると思います。

レビューが通ったら|1.FacebookのページIDを確認する

レビューが通ったら、いよいよWordPressとFacebookの連携を行います。まずは自身のFacebookページにアクセスして、FacebookのページIDを確認しておきましょう。

「その他」>「基本データ」をクリック

画面を下にスクロールしていくと「ページID」があるので、これをメモ。

これでページIDの取得は完了です。

レビューが通ったら|2.WordPressとFacebookを連携する

続いて、WordPressの管理画面を開いて、WordPressとFacebookページの連携を行います。
左サイドメニューの「SNAP|AutoPoster」をクリック。
「Show Settings」をクリック。

「Authorize Your Facebook Account」をクリック。

Facebookのこのような画面(私はリンク済みなので、厳密にいうと画面がちょっと違うはずですが)になるので、「○○としてログイン」をクリック。

「…Enter the Page ID」をクリックして、先ほどメモしたページIDを入力。
「Update Accont Info」をクリック。

これで、WordPressとFacebookページの連携は完了です!お疲れ様でした!

まとめ

これまで大変長い道のりだったかと思いますが、これで晴れてWordPressからFacebookへの投稿ができるようになったのではないでしょうか。もしかしたら、レビューリクエストの結果、エラーが返ってくるかもしれませんが、(私はかれこれ7回レビューに出しました^^;)私よりは少ない事を祈っております!

もし、このエラーって何?という事がありましたら、FundemicのFacebookページや当サイトのお問い合わせページからメッセージをお送りいただければ、ご対応できるかと思いますのでお問い合わせください。

Fundemic(ファンデミック) Facebookページ

お問い合わせページ

ここまでご覧いただき、ありがとうございました!

Fundemicの最新情報をチェック!
>Fundemicの最新情報

Fundemicの最新情報

FundemicのFacebookページでは、
制作実績とTECHブログの最新情報を掲載しております。

CTR IMG