FacebookとWordPressをAll in One SEOを使用して連携する
今回はAll in One SEOを使用してFacebookとWordPressとの連携を行います。
動作環境
以下の環境で動作を確認しました。
WordPress 5.7.2
All in One SEO 4.1.1.1
Facebook Graph API v10.0連携について
どうすれば連携扱いとなるのか
最終的にブログ記事の<head> に下記のようなタグを挿入することができれば、
連携できたことになります。
Facebook 管理者 ID
<meta property="fb:admins" content="" />
Facebook App ID
<meta property="fb:app_id" content="" />content="" には固有のIDが入ります。
このIDの取得にはFacebookデベロッパーツールへの登録が必要となります。
取得したIDをAll in One SEOを使用してmetaタグに変換し、ブログ記事に動的な挿入を行います。
必ずしも2つ必要なわけではない
ブログ記事をシェアする際にOGPタグを有効にしたいだけであれば、
「Facebook 管理者 ID」のみを埋め込むだけでも問題はありません。
連携しないとどうなるのか
ブログ記事をシェアする際にOGPタグが正常に読み込まれません。
URLを挿入しても、以下のようにドメインとページ名の表示しか行われません。
連携ができている場合は以下のような表示となります。
アイキャッチ画像、記事名、本文から抜粋したテキストが正常に表示されています。
Facebookデベロッパーツールでアプリを作成する
Facebookデベロッパーツールに登録する
Facebook個人用アカウントから登録を行います。
Facebookデベロッパーツール
具体的な登録方法については下記の記事が参考になります。
特に難しいことはなく、画面の指示に従っていけば問題ありません。
Facebookデベロッパーツール（Facebook for developers）の登録手順と使い方
新しいアプリを作成する
登録が完了すれば、アプリ一覧画面へアクセスが可能となります。
画面右上の「アプリを作成」をクリックしてください。
クリックするとこのようなモーダルウインドウが表示されるため、
「ビジネス」を選択して「次へ」をクリックしてください。
アプリ表示名を入力します。ここでは「WordPress用」にしました。
2つ下にあるアプリの目的を選択し、「アプリを作成」をクリックしてください。
以下のようなページに移動します。左上に「アプリID」をメモしてください。
ヘッダーの「ツール」をクリックし、「グラフAPIエクスプローラ」をクリックしてください。
以下のようなページに移動します。右の「Generate Access Token」をクリックしてください。
パスワード入力のウインドウがポップアップで表示されるため、入力して認証を行ってください。
認証完了後、アクセストークンに文字列が入力されるため、
右上の「送信」をクリックしてください。
画面中央に「id」が表示されるためメモしてください。
これが管理者IDとなります。
これでFacebookデベロッパーツールでの操作は終了です。
次はWordPressの操作に移ります。
プラグインをインストールする
WordPress管理画面から行ってください。
サイドバーの「プラグイン」> 画面右上の「新規追加」> 画面右上の検索ボックスから
「All in one」などのキーワードで検索を行い、インストールを行います。
初回インストールの場合、セットアップウィザードが始まります。
環境に応じて設定を行ってください。私はデフォルトのままにしておきました。
セットアップが終了後、サイドバーの「 All in One SEO」>「ソーシャルネットワーク」をクリックし、
画面上部の「Facebook」をクリックします。以下のようなページに移動します。
スクロールすると「高度な設定」があり、
「Facebook 管理者 ID」と「Facebook App ID」にメモしたIDを入力してください。
完了後はブログ記事のソースを確認しましょう。
以下のタグが追加されていれば設定は完了です。
<meta property="fb:admins" content="" />
<meta property="fb:app_id" content="" />
以上となります。お疲れさまでした。