FacebookのOGP設定に必要なfb:app IDの取得方法

Facebook App ID(アプリID)とは? FacebookのApp ID(アプリID)は、OGPの設定やFacebook用のアプリを作成する時に必要なIDです。Facebookデバッガーで調査した結果エラーと判定された後、当記事に辿り着いた方も多いのではないでしょうか。 FacebookのApp ID(アプリID)を発行することでウェブサイトだけでなく、iOS、Androidアプリと連携するアプリも作成できるようになる優れモノ。今回はウェブサイトのOGP設定のために使用します。 Facebookは、仕様や設定方法などいつの間にか変わっている…ということがあります。インターネット上にもに多くの記事がありますが、「今の設定画面・設定方法と違う」と感じた人も多いのではないでしょうか。当記事もしばらくすると古くなるでしょうから、その時は最新の情報を確認するようにしてください。 Facebook公式のアプリ登録ガイド Facebook App ID(アプリID)の取得方法 まずfacebook for developersページを開きましょう。 ※Facebookにログインした状態でアクセスするとスムーズです。 ※今回の作業には開発者アカウントが必要となりますのでまだ取得していない場合は個人アカウントを開発者アカウントにアップグレードする必要があります。 facebook for developers アプリID(Facebook App ID)の作成 右上の「マイアプリ」にマウスカーソルを乗せるとメニューが出てくるので「新しいアプリを追加」をクリック。 ※すでにApp ID(アプリID)を発行したことがある人ですと今まで作ったAppの表示名が出てきます。 ポップアップが出てくるので「表示名」「連絡先メールアドレス」を入力。 「アプリIDを作成してください」をクリックして次へ ※特に指定が無いようでしたら「表示名」には「サイト名+ogp」とでも入れておくと後々わかりやすいと思います。 ※今回は「tcddemo_ogp」としました。 セキュリティチェックを通過して ダッシュボードで早速アプリIDを確認することができます。アプリID(Facebook App ID)の取得できました。 アプリの設定とアプリID(Facebook App ID)の有効化 続いて、使用する用途を設定していきます。左側のメニューから設定をクリック(ベーシックというメニューが開きます) プライバシーポリシーを記載しているURLを記入して下部にある「プラットフォームを追加」をクリック プラットフォームの選択を行います。今回は「ウェブサイト」を選択します。 使用するウェブサイトのURLを入力して「変更を保存」します。 アプリの設定は以上となります。最後にアプリID(Facebook App ID)を有効化する操作を行いましょう。 左側にあるメニューの中から「アプリレビュー」をクリック 「アプリレビュー」ページを開き、赤枠の部分をクリック。(アプリ表示名)を公開しますか?いいえ→はいに変更します。 「アプリを公開しますか?」という質問が出てくるので「確認」ボタンを押しましょう。 これで作成したFacebook App IDが公開状態になり、使える状態になりました。 WordPress管理画面 TCDテーマオプションでの設定 あとはTCD Themeの TCDテーマオプション > 基本設定 「Facebook OGP アプリID」の項目に発行されたIDをコピー&ペーストするとサイトに反映することができます。 ※2018年1月現在TCDのOGP設定箇所についてはfb:admins idを入力するものとfb:app_idを入力するものが混在しています。 ※TCDテーマオプション内入力箇所については旧仕様(fb:admins id 使用)から順次新しい仕様(fb:app_id 使用)に順次バージョンアップしていきます。 旧:fb:admins id 入力 新:fb:app_id 入力 fb:admins idの確認は以下の記事を参考にしてください。 OGPの設定を行った後はこのように表示されます。 OGP設定を手動で行おうと思うと結構な労力です。TCDテーマのFacebook OGP/Twitter Cards設定機能(※一部テーマで実装、順次実装アップデート予定)では、テーマオプションから「fb:app … Continue reading FacebookのOGP設定に必要なfb:app IDの取得方法