【OGP設定】FacebookアプリIDを取得する方法「5つの手順で完了」

SNSのアイコン一覧 - スマホ画面

男性5FacebookのOGPを設定したい!簡単な方法を教えて
男性4RSSやMultiplex広告(アドセンス)の画像が表示されないのでOGPを設定したい

今回ははそんな方のための記事です。
FacebookのアプリIDを取得することでOGPを設定することができます。

この記事で解決できる2つの悩み
  1. OGPをしっかり設定してアクセスの流入を増やしたい(SNS運用)
  2. RSSの記事一覧画像が表示されないエラーやアドセンスの「Multiple広告(旧関連コンテンツ)」に画像が表示されずテキストだけになってしまう問題を解決したい


FacebookアプリIDの取得は開発者向けですが、アプリIDを取得するだけなら難しくありません。手順を見ながら設定すれば初心者でもできます。

OGPを設定するためにはFacebookアプリIDが必要です。そのFacebookアプリIDを取得するためにはFacebook developersに登録する必要があります。


この記事では「Facebook developers登録」から「OGP設定まで」の流れを5つの手順で解説します。

Facebook developersの操作画面は度々かわります。この記事は2022年5月時点の最新情報です。
初心者でもわかるように解説していきます。それでは見ていきましょう。

目次

「OGPとは?」できること

OGPとは「Open Graph Protcol」の略で、SNS上でシェアされた時のタイトル、本文、画像、URLを自由に表示させたりできる仕組みです。(HTML要素)
FacebookだけではなくTwitterやインスタグラムにも設定できます。

OGPを設定しないとFacebookやTwitter側の設定でシェアされてしまうことになるので自分の思惑どおりの表示にならない場合があります。これを自分で設定することで、興味を引きやすくなり結果アクセスの流入につながるわけです。

「Facebook developers(Facebookデベロッパー)」とは?

Facebook developersは、Facebookアプリを開発するためのサービスやツールを提供するプラットフォームです。

OGP設定に必要なFacebookアプリID(Facebook app id)を取得するには、Facebook developersに登録する必要があります。

Facebook developersのポイントとOGPを設定するためになぜFacebook developersに登録する必要があるのかという理由をまとめました。

まずはポイントから。

Facebook developersのポイント
  • 開発者向けのプラットフォーム
  • Fcebookアプリとは?【Facebook上で動くアプリの総称。Facebook機能を拡張させることができる】

Facebookをより便利に機能を拡張させるために使うのがFacebookアプリと覚えておけばいいでしょう。

そしてOGPを設定するためにFacebook developersを使う理由です。

OGPを設定するために「Facebook developers」を使う3つの理由
  1. 「Facebook developers」に登録すると「Facebookアプリ」が作成できる
  2. 「FacebookのOGP」を設定するためには「FacebookアプリID」が必要
  3. 「Facebookアプリ」管理画面から「FacebookアプリID」を確認することができる

まずはこのFacebook developersに登録する必要があるわけですね。

①・②「Facebook developers」登録方法

それではFacebook developers登録からOGPを設定するまでの流れを見ていきましょう。
5つの手順で完了します。

①Facebookアカウントにログイン

まずはFacebookアカウントにログインします。
[Facebookログインページ]⇒ https://www.facebook.com/

Facebook developersを利用するにはFacebookの個人アカウントが必要です。ない場合は作成しておきましょう。

ここではビジネス向けのアカウント、Facebookページをおすすめします。

Facebookページには以下のメリットがあります。

  • 完全無料(Facebook広告は有料)
  • 複数アカウントを作成できる(上限なし)
  • 検索結果に表示される(インデックスされる)
  • 複数人で管理できる
  • ブランド力の確立
  • ユーザーとのコミュニケーションの場が作れる
あわせて読みたい
【2022年最新】Facebookページとは?個人アカウントとの違いや作り方 Facebookの仕様は度々変更されます。数年前の情報だと管理画面が違うということもちらほら。できれば『最新の情報を確認』しておきたいところ。 ということで今回は、20...

②「Facebook developers」に登録

まずはFacebook developersにログインします。

「facebook for developers」ログインページ
https://developers.facebook.com/

右上の「スタート」をクリック。

「スタート」をクリック - 「Facebook developers」に登録

「Facebook for Developersアカウントを作成しよう」という画面に切り替わります。「次へ」をクリック。

「Facebook for Developersアカウントを作成しよう」という画面

「メールアドレスを認証」をクリック。開発者向けのメールを受け取りたいのであればチェックを入れます(任意)

「メールアドレスを認証」をクリック - 「Facebook developers」に登録

次に、あなたに当てはまるものを選択します。特に当てはまるものがない場合ば「その他」→「登録完了」でいいでしょう。

「その他」→「登録完了」- 「Facebook developers」に登録

③「Facebookアプリ」を作成

続いてFacebookアプリの作成です。
Facebook developersに登録したらこのような画面になります。「アプリを作成」をクリック。

「アプリを作成」をクリック -「Facebookアプリ」を作成

アプリのタイプを選択です。
一番下の「なし」から「次へ」を選択しましょう。

「なし」から「次へ」を選択 -「Facebookアプリ」を作成

「ビジネス」でも作成できるかと思いますが「なし」は、全てのアクセス許可や機能を使用できるタイプです。一度タイプを変更したら、後から変更できないのでここでは「なし」を選択するのがいいと言えます。

次に、基本情報を入力する画面です。
「表示名」は任意のアプリ名です。わかりやすくブログ名などでいいでしょう。
「ビジネスマネージャーアカウントが選択されていません」と表示されていますが、問題はありません。そのまま「アプリを作成」をクリック。

基本情報を入力する画面 -「Facebookアプリ」を作成

④FacebookアプリIDをコピー

アプリを作成するとこのような画面に切り替わります。

FacebookアプリIDをコピーする前に簡単な設定だけしておきましょう。
「設定」→「ベーシック」をクリック。

「設定」→「ベーシック」をクリック - FacebookアプリIDをコピー

次の画面で「プライバシーポリシーのURL」に運営するブログのURLを入力。「カテゴリ」からブログに合うカテゴリを選択します。

「プライバシーポリシーのURL」と「カテゴリ」 - FacebookアプリIDをコピー

そのまま一番下までスクロールします。
すると「+プラットフォームを追加」がありますので、そちらをクリック。

「+プラットフォームを追加」 - FacebookアプリIDをコピー

ここは「Website」を選択「次へ」と進みます。

「Website」を選択「次へ」と進む - FacebookアプリIDをコピー

するとウェブサイトという項目ができるので「サイトURL」にブログURLを入力します。
ブログURLを入力したら「変更を保存」して全ての設定変更を保存します。

「サイトURL」にブログURLを入力 - FacebookアプリIDをコピー

続いて上の「開発中」を「ライブモード」に変更します。
「開発中」をクリックすると、このように「ライブモードに切り替えますか?」と表示されるので「モード切り替え」をクリックします。

「開発中」を「ライブモード」に変更 - FacebookアプリIDをコピー

これでライブモードに切り替わりました。

ライブモードに切り替え完了 - FacebookアプリIDをコピー

ライブモードにすることで、Facebookアプリが公開されるという認識で合っているかと思います。
くわしくは公式を参考にしてください。

ライブモードに切り替えると「対応が必要です」と表示されますね。これも対応しておきましょう。

データの使用状況の確認とは

Facebookアプリ開発者は、データの使用状況の確認を毎年する必要があるとされています。アプリ内のルールや開発者ポリシーに準拠していることを宣言するものです。

Facebookアプリをしばらく使用してから宣言するでもいいでしょう。ただし、データの使用状況の確認の宣言には期限がありますので忘れずにしておきたいところです。

データの使用状況の確認がとくに必要ないという方は「⑤FacebookアプリIDを貼り付ける」の手順に進みましょう。

参考 : データの使用状況の確認 | Meta for Developers

Facebookアプリをライブモードにするとすぐにポップアップで表示されるので対応しておきましょう。

先ほどの画面から「開始する」をクリックします。

画面が切り替わります。確認したら「開始する」をクリックです。

「開始する」をクリック - Facebookアプリ開発 データの使用状況の確認

まず「public_profile」や「email」にチェックを入れます。その下にアプリ内のルールや開発者ポリシーがあるので一応確認しておきましょう。

「public_profile」や「email」にチェック - Facebookアプリ開発 データの使用状況の確認

2つのチェックとアプリ内のルールや開発者ポリシーの確認をしたら「送信」をクリックします。
これでデータの使用状況の確認の宣言が完了です。

⑤FacebookアプリIDを貼り付ける

最後にFacebookアプリIDを貼り付ける手順です。WordPressにOGPを設定するには、FacebookアプリIDを貼り付ける必要があります。

OGPはHTML要素です。メタタグなのでにコードを記述する必要がありますが、知識がないとわからないと思います。

初心者向けで2つの方法がありますが、ここでは①のCocoonを使った方法で解説します。

  1. WordPressテーマ「Cocoon」から設定する
  2. WordPressプラグイン「All in One SEOから設定する

cocoonは無料で利用できる高機能なテーマです。当ブログも実際に利用しています。

公式ダウンロードページ⇒ https://wp-cocoon.com/downloads/

CocoonからOGPを設定

それでは早速Cocoonから設定していきましょう。
WordPress管理画面にログイン。左メニューから「Cocoon設定」を開きます。

「OGP」を選択。
「OGPの有効化」はデフォルトでチェックが入っています。「Facebook APP ID」に、さきほど「Facebook developers」で取得したFacebookアプリIDを貼り付けます。

Cocoon管理画面 - FacebookアプリIDを貼り付ける

あとは保存して、これで完了です。CocoonはOGPの設定に対応しているのでFacebookアプリIDを入力するだけです。貼り付けは簡単ですね。

まとめ

最後にまとめです。
この記事では以下2つの読者の悩みを解決しました。

  • ①FacebookのOGPを設定したい(シェアされる画像やタイトル・内容の編集)
  • ②アドセンスの「Multiple広告(旧関連コンテンツ)」に画像が表示されない問題を解決したい

アドセンスの「Multiple広告(マルチプレックス)」に画像が表示されない問題はたしかにOGP設定が原因の場合が多くOGPを設定することで解決することが多いです。
ただし、OGPが原因じゃないパターンもあります。直らなかったら他のパターンを試すといいでしょう。

ちなみに広告がテキストだけになってしまうのは以下のような原因が考えられます。こちらでお悩みの方は試してみてください

  1. SSL化に対応させる
  2. 画像は1000枚以上あるか
  3. アナリティクスとアドセンスの連携
  4. アナリティクスとサーチコンソールの連携
  5. Multiplexの幅を広くする
  6. Multiplexをしばらく外す
  7. テーマを変える

今回の記事は以上になります。ありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次