WebサイトとFacebookを連携させる際などに必要となるFacebookアプリID(app_id)。

以前当記事では、OGPの設定にアプリIDの取得が必須とご案内しておりましたが、現在はアプリID無しでもOGP画像は正常に表示されます(サイト側で設定は必要)。

ただし、WordPressで制作しているサイトであれば、プラグインの利用のために「FacebookアプリID」を求められる場合もあります。また、FacebookはUIの変更の頻度が高く、アプリIDの取得方法に迷う方が多いのも実情です。

というわけで当記事では、2022年10月現在最新版のFacebookアプリID(app_id)の取得方法を詳しく解説いたします。取得方法がわからない方は、ぜひ参考にしていただけますと幸いです。手順通りに操作いただければ、10分あれば取得できます。

FacebookアプリID(app_id)の取得方法

それでは早速、FacebookアプリID(app_id)の取得する手順を解説していきます。通常のFacebookアカウントが必要ですので先にアカウントを作成しておいてください。
>>Facebook | 新規アカウントを作成

大まかな手順は次の通りです。

  1. Meta for Developersを開く
  2. アプリの作成
  3. アプリを設定してID取得

Meta for Developersを開く

まずは「Meta for Developers」にアクセスします。次の画面が開きますので、画面右上の「My Apps」をクリックします(ログアウトしている方は「Log In」と表示されます)。

Meta for Developersの画面

Meta for Developers

Facebookの社名変更に合わせて、「Meta for Developers」となっています。

アプリの作成

次の画面では、「アプリを作成」というボタンが表示されます。

アプリを作成

アプリを作成といってもボタンを操作するだけでOKです。これから何かを開発するわけではありません。「アプリを作成」をクリックすると下記画面が表示されます。

アプリのタイプを選択する画面

アプリのタイプは最下部の「なし」を選択して、「次へ」をクリックします。

最下部の「なし」を選択

他のタイプを選択すると一部の機能が制限されますが、「なし」を選択した場合は制限はありません。

次に表示される画面で「表示名」と「メールアドレス」を確認して「アプリを作成」をクリックします。

「表示名」と「アドレス」を確認

すると下記画面が開きます。

アプリ完成の画面

上部にアプリIDが表示されていることが確認できたら、「アプリの作成」は完了です。

アプリを設定してID取得

この設定を飛ばすとアプリIDを正常に取得できないので、必ずご確認ください。

画面の左側のメニューにある「設定」を押して、「ベーシック」を選択します。

アプリの設定を行う箇所

次の画面が開きます。

要確認の設定箇所

赤枠で囲まれている3箇所の項目を確認して、未設定の箇所は正確に設定します。

  1. 表示名には、アプリの表示名と同じものが表示されているはずです。
  2. あなたのサイトのプライバシーポリシーページのアドレスを入力します。
  3. 連絡先のメールアドレスが正しいか確認します。

❷の項目が空白だと、アプリIDを取得できませんのでご注意ください。
ここまで確認できたら、ページの最下部までスクロールします。

ページの最下部へスクロール

「プラットフォームを追加」という横長のボタンをクリックしてください。「データ保護責任者の連絡先」の項目は空白で構いません。

Websiteを選択

「Website」を選択して、「次へ」で進みます。

WebサイトのURLを入力する箇所

↑の赤枠箇所にFacebookと連携するWebサイトのURLを入力して、「変更を保存」します。

アプリのモードを「ライブ」に

最後に必ずアプリのモードを「ライブ」にしてください。

上記のようにボタンが青色になれば完了です。後はアプリIDをコピペして必要な箇所に貼り付ければ、そのまま活用できます。

【TCDテーマ向け】FacebookアプリIDの設定箇所について

TCDテーマをお使いの方は、テーマオプション内にある「Facebook OGP」にて、アプリIDの入力欄が設けられています。

TCDテーマのアプリID登録箇所

※一部の古いテーマでは設定箇所が異なることもあります。

上記箇所にアプリIDをコピペして、OGP用画像を設定すれば、OGPの設定は完了です。

ちなみに冒頭で申し上げた通り、アプリIDが未設定でもOGP画像を登録さえすれば、正常に表示されます。

ただし、シェアデバッガーで確認した際に次のようなエラーメッセージが表示されますので、アプリIDが登録されていないことが原因と覚えておきましょう。※このエラーはOGP画像の表示には影響しません。

app_idが存在しない場合のエラーメッセージ

TCDテーマでは、アイキャッチ画像がそのままOGP画像として利用される仕様ですが、アイキャッチ画像が未設定のブログ記事や、その他のページ(トップページ、アーカイブページ、固定ページなど)では、次のように「No Image」と表示されてしまう可能性があります。

OGP画像無し OGP画像有り
OGP画像無し OGP画像有り

このように画像が表示されるとイメージが湧きやすく、サイトやページの内容も伝わりやすくなります。どのページがシェアされてもいいようにOGP画像は登録しておくのがオススメです。

まとめ

FacebookアプリIDの取得方法をご紹介いたしました。

Meta for Developers」へアクセスして「アプリを作成する」となると少し難しそうですが、手順通りに進めれば、問題なくクリアできると思います。

プライバシーポリシーページのアドレスが未入力だと、開発中ボタンを押すことができないので、その点だけ注意しておけばOKです。FacebookのUIはコロコロ変わりますが、最新版を解説した当記事を参考に設定してみてください(2022年10月現在)。