OGPやAMPに必須!Facebook App IDの取得方法を画像付きで徹底解説します。[2021年11月版]


サイト構築

Facebook App IDの取得方法_014

Facebook App ID(アプリID)を取得するまでの流れをまとめました。

フェイスブックで自分のサイトをシェアしてもらった時にOGPで画像などの情報を表示するためにはFacebook App IDというアプリケーションが必要です。

このAPP IDはFacebook Developersというサービスにアカウントを登録し、必要な設定を済ませると誰でも無料で使うことができます。FacebookのOGP対応には必須の作業となりますので、ぜひ本記事を参考に取得して下さい。

Facebook App IDの取得にはフェイスブックのアカウントが必要です。

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

最近はWordpressなどのCMSでブログのOGP設定が簡単に出来るようになりました。

  • SNS設定にFacebook App IDの入力欄があるけどどこで取得できるの?
  • OGP設定してみたけどFacebookだけアイキャッチ画像が表示されない!
  • AMPページのFacebookシェアボタンでアプリIDが無効とエラーが出る!

そんな問題を解決すべく当記事を書きました。

TwitterやLineでのOGP設定はサイトヘッダーにメタタグを設定するだけで行えますが、Facebookに関してはメタタグ内にFacebook App IDという15桁の数字を指定しなければOGPに対応することが出来ません。

Facebookとサイトを連携するには専用のAPPを使用する必要があるという事です。

各SNSでシェアされた時の設定は初心者ブロガーの方でも設定しておきたい内容ですが、FacebookのOGPは開発者向けのサービスを使用するという点で、特にこのApp IDの取得方法がややこしく多くの方を悩ませる内容かと思います。

ポイント

Facebook Developersのページは頻繁に変更されます。
ページが変更されても当記事の作業手順は大きく変わらないはずです。

Facebook App IDとは?

ID取得の前にFacebook App IDとは何なのか?を簡単に確認しておきましょう。
Facebook App ID(アプリID)はその綴りを省略して「fb:app_id」や「fbappid」と書かれることもあります。

これで何が出来るのかというと、Facebookに関する機能(いいね!やOGP表示、SNS認証など...)を自分のWebサイト、アプリなどで使用することでFacebookと連携させることができます。

フェイスブックの機能を使いやすくパッケージ化したAPPを使用するために取得する必要があるのがApp IDという感じ。

サイト運営者やアプリ開発者向けに用意されているもので、Facebook Developersという開発者向けのサービスに登録し、自分用のApp IDを発行(取得)して使います。

Facebook App ID取得までの流れ

では早速Facebook App IDを発行しましょう!
具体的な手順は以下です。

  1. Facebook Developersにアクセス
  2. Facebookアカウントにログイン
  3. Developersで開発者用のアカウント登録
  4. アプリの作成
  5. アプリをWebサイトとして登録
  6. サイトのプライバシーポリシーページを登録
  7. ステータスをライブに変更しApp IDを使用

事前準備としてFacebookのアカウントが必要です。
アカウントに連携されるのではなく、取得時にアカウントの情報が使われます。
(Facebook App IDからアカウントがバレる可能性は無いとみて良いです。)

またサイトで使う場合はサイトのプライバシーポリシーページが必要です。
プライバシーポリシーページのURLが未設定の場合、アプリを公開できません。
面倒ですが、アプリのモードをライブ状態に変更できないようなので必須です。

長くなりますのでFacebookの登録、ポリシーページの作成方法は割愛します。

プライバシーポリシーは面倒ですが、個人ブログでも作成しておきましょう。
Googleアドセンスの使用に必要であったり、SEO評価が上がる可能性があるとのことで作成しておいた方が何かとメリットがあります。

Facebook Developers‐アカウントの作成

ここまで長くなったのでサクッとやりましょう!
まず開発者向けのサービス「Facebook Developers」へのアカウント登録です。

外部リンク

【公式サイト】
Facebook for Developers

上記公式サイトにアクセスし、ログインに進みます。
ログイン画面が出るので、自分のFacebookアカウントでログインしましょう。

ログインしている状態で再度「Facebook for Developers」にアクセスします。
するとFacebook for Developersのメニューあたりに「利用を開始する」があると思いますので、そちらに進みます。

Facebook App IDの取得方法_001

アカウント作成1-ようこそ

ウェルカムページからスタートします。
規約や開発者ポリシーを確認したら「次へ」をクリック。

Facebook App IDの取得方法_002

アカウント作成2-メールアドレスの確認

自分のメールアドレスを入力します。
入力したら「メールアドレスを認証」に進む。

Facebook App IDの取得方法_003

アカウント作成2-関連する役割を選ぶ

Developersを使用する人(自分)に最も当てはまる役割を選ぶびます。
ブログ運営者はゴリゴリの開発者ではないので、当サイトはその他を選びました。

「登録完了」を押せばFacebook for Developersのアカウント登録は完了です!
いざやってみると案外簡単にすぐ終わります・w・

Facebook App IDの取得方法_004

Facebook for Developersから届いたメール

ここで補足です。届いたメールには以後の手順や案内があるだけでした。
先ほど「メールアドレスを認証」というボタンをクリックして進みましたが、受信したメールを開いて認証ボタンを押して...という作業は今回は必要ありませんでした。

Facebook Developers‐アプリの作成

アカウント作成が済んだら続いてアプリの作成に進みましょう!
アプリという名になっていますが、Facebook App IDをどこで使うかの設定です。
もっと具体的に言うとOGPに使う場合はWebサイトの登録&設定です。

Facebook App IDの取得方法_005

アプリの作成を始める

早速「アプリの作成」に進みましょう!

アカウント登録した後、アプリ作成画面になっていると思います。
なっていない場合は届いたメールから「アプリを作成」を開けばOK!

Facebook App IDの取得方法_006

アプリの作成-アプリタイプの選択

アプリタイプの選択画面です。
ここではFacebook APPが提供する機能を制限することができます。

”アプリの作成後にアプリタイプを変更することは出来ません。”
とあるので迷いますが、分からない方は「なし」で進めて下さい!

ヘルプページを確認すると詳細があります。

タイプがなしのアプリは、ほかのどのアプリタイプにも当てはまらないアプリです。「なし」と指定されたアプリは、すべての製品、アクセス許可、機能を使用できます。

今回はOGPに使いたいだけですが、全機能が使える「なし」を選択しました。
後から変更できないようなので大は小を兼ねる、備えあれば患いなしで!・w・

Facebook App IDの取得方法_007

アプリの作成-詳細を追加

進めると、詳細を追加という画面に進みます。
ここでは「表示名」と「アプリの連絡先メールアドレス」の2つを入力します。
「ビジネスマネージャアカウント」はそのまま。選択されていませんでOK!

表示名はFacebook for Developersの管理画面内に表示されるアプリ名なので、自分が分かりやすい名前にすればOKです。
メールアドレスは数年に1回程度アプリについての重要な確認メールが届くこともあるので、使っているアドレスにしておいた方が良いと思います。

入力が終わったら「アプリを作成」をクリック。
これで管理画面にFacebook App IDが表示されていることかと思います。

やったー!App IDゲットー!と言いたいところ...
しかし、このままではまだAPPを使うことが出来ません。
アプリステータスを開発中→ライブに変更して初めて使うことができるのです…

サイトでApp IDを使用可能にするための設定

やっとFacebook App IDが確認できるところまで来ました!
あとはアプリのステータスをライブ(公開)に変更するだけです。

始めの方で少し触れましたが、WebサイトのOGPなどでFacebook App IDを使いたい場合は、アプリを使用するWebサイトのプライバシーポリシーページへのURLを設定しておかないとステータスの変更が出来ません。

“サイトをFacebookのOGPに対応させる!”というだけなのに随分しんどいですw

FacebookだけOGPで画像が表示されないというサイトも多いですが、こういう理由もあるのかもしれません。

プライバシーポリシーのURL設定

では早速ポリシーページを登録しましょう。

Facebook App IDの取得方法_008

Developers管理画面 > 設定 > ベーシック

Developers管理画面 > 設定 > ベーシック

に進み、「プライバシーポリシーのURL」という入力欄にURLを設定しましょう。

入力したらそのまま画面を下にスクロールします。

Facebook App IDの取得方法_009

Developers管理画面 > 設定 > ベーシックの最下部

ページの一番下に「+プラットフォームを追加」というのがあるのでクリックする。

Facebook App IDの取得方法_010

設定 > ベーシック-プラットフォームの追加

プラットフォームを選択という画面になります。
ここでAPPを使用するプラットフォームを選びます。

今回はOGPで使うので「Website」を選びました。

Facebook App IDの取得方法_011

サイトURLを入力する

するとウェブサイトが追加されるので、トップページのURL(など)を入力しましょう。

ステータスを開発中からライブに変更する

やっとですね…APPのステータスを使用可能な状態に変更しましょう!

Facebook App IDの取得方法_012

管理画面のステータスをクリックする

Facebook for Developersの管理画面上部にある「開発中」をクリックします。

Facebook App IDの取得方法_013

ライブモードへの切り替え-カテゴリ選択

ライブモードへの切り替えの前にカテゴリを選択しなければなりません…
しかもこのカテゴリもすごく迷う内容です。

自分のサイトに合った内容に一番近そうなカテゴリを選びましょう。
当サイトは合うものがなかったので「ビジネス・ページ」を選びました。

最後に「モード切り替え」を押せばFacebook App IDの取得&使用準備は完了です。
おつかれさまでしたー!めんどくさいねー!!

WordPressのテーマにApp IDを設定する

あとはテーマのSNS設定画面やプラグインの設定の中にあるFacebook App IDの項目に、Facebook for Developersの管理画面上部に表示されているアプリIDを設定すればOKです。

Facebook App IDの取得方法_014

Facebook App ID(アプリID)の場所

最後にApp IDが間違っていないか?ステータスがライブになっているか?を確認しておきましょう。

Facebook App IDの取得方法_015

CocoonのOGP設定画面

国内で人気の「AFFINGER」や「Cocoon」には始めからテーマの設定画面にこのFacebook App IDの入力欄があります。
ここに先ほど取得した15桁のIDをコピペすればOK!

これだけでテーマ側で勝手に必要なメタタグをheadに出力してくれます・w・

まとめ

Facebook App IDの取得方法でした。

そもそも各SNSでのOGP設定というだけで初心者の方にはなかなか難しい内容なのですが、FacebookのOGP対応に関しては専用のアプリケーションのIDを発行し、それをヘッダーのメタタグに記述してなければなりません。

そしてApp IDを取得するためにはFacebookアカウントとプライバシーポリシーページが必要というレベルの高さ...企業サイトだけ綺麗に見せたいのかな?考えすぎか...

アプリケーションを無料で使用させてもらっているのだから文句はいけません( ´艸`)

-サイト構築
-

ありがとうございました。
良かったらシェアしてネ・w・

© 2022 ソロ学