Facebookとの連携・OGP設定の為のapp_id取得と設定・2014年版

Facebook開発者登録

FacebookのアプリケーションID取得方法

ソーシャルメディア上でシェア投稿を魅力的にみせるためにはOGP設定をしっかりとする必要がありますが、特にFacebookでシェアしたり、シェアされたりする場合にはapp-idタグをOGPに含めておくことが重要なポイントです。

このページのアプリケーションID取得方法は2014年のものです。
2016年2月の時点での取得方法を別の記事「OGP設定の為のfacebookアプリケーションid(app-id)取得・fb-admins確認方法・app-id取得方法」で書いておりますので、そちらを参考にしていただければと思います。

Facebookデベロッパー登録

WordPressとFacebookをばっちり連携させる、このapp-idを取得するためには、アプリケーション登録し、アプリIDを取得、そのIDをOGPタグ内に表記します。

Facebookで開発者登録

アプリケーションIDを取得するには、まず、Facebookで開発者登録をします。

なんだか大仰な事のように思えますが、どうやらFacebook側でいいねボタン等の使用状況、例えばどんなサイトでどのボタンを使っているか、どの位そのボタンがいいね!されているか等を把握しておきたいので、使用する人とサイト毎にIDをふって、ゴニョゴニョ出来るようにしておきたいのかな?と推測しています(笑)

まあ、それはさておき、そんなに難しくもありませんので、開発者=デベロッパー登録をしてしまいましょう。

Facebookディベロッパーページを開きます。

Facebookデベロッパーページ

アプリのボタンをクリックします。
Facebookデベロッパーページ・アプリボタン

ドロップダウンメニューで、「Register as a Developer」と表示されるので、これをクリックします。
Register_Facebook_Developer・デベロッパーとして登録

ポップアップウィンドウが表示されるので、いいえ/NOになっているボタンをクリックしてはい/YESに変更し、登録ボタンをクリックします。
Facebookデベロッパー・開発者登録

登録完了です。

アプリケーションIDの取得

デベロッパー登録後、しばらくするとアプリケーション登録ができるようになります。

では、アプリケーション登録をしましょう。

同じページでアプリボタンをクリックします。
開発者登録完了後は、新しいアプリを作成というサブメニューが表示されるので、これをクリックします。
Facebookアプリの作成
※アプリボタンをクリックしても、Register・・・と表示されてしまう場合は、デベロッパーページを再読み込みしてみて下さい。

アプリの作成画面が表示されます。
Display Nameの欄にいいね!ボタンを使用したいWEBサイト名、つまり、URLを入力します。
Namespaceは省略してもOKです。
カテゴリを選択します。WEBサイトが紹介する内容のカテゴリを一覧から選択します。
アプリケーションを作成のボタンをクリックします。
Facebookアプリの作成画面

セキュリティチェック画面が表示されます。
これは、人間が入力しているかどうかをチェックするためのものです。
読みにくいですが、この場合は「NcEsij」と入力すれば良いと思われます。
これを下の欄に入力して、送信ボタンをクリックします。
Facebookアプリの作成・セキュリティチェック画面

更に認証を求められますが、認証のパターンが2パターンあるようです。

    パターン1

  1. 携帯TELNOか、クレジットカードNO.を要求されるので、携帯を選択
  2. 電話か、メールアドレスかを選択
  3. メールアドレスを選択すると、確認NO.が送られてくるので、これを入力。
    パターン2

  1. 確認用連絡先として、携帯電話か、メールアドレスかを選択
  2. メールアドレスを選択すると、確認NO.がメールで送られてくるので、これを入力。

クレジットカードNO.を要求されると、ドキッとしちゃいますが、あわてず騒がす、メールアドレスを入力すれば大丈夫です。

認証されると下のような画面が表示されます。
アプリケーションIDゲットです!!o(^∇^)o
Facebookアプリケーション・ダッシュボード画面1

この時、注意していただきたいのは、ここ
Facebookアプリケーション・ダッシュボード画面2

サイトURL下のグレーの一文には、
“This app is in development mode”
と表示されています。
つまり、
「このアプリケーションIDはデベロップメントモード、つまり開発段階モードですよ」、
という事です。

サイトURLの横に表示されている、○をポイントすると更に、濃いグレーの吹き出しの一文が表示されますが、
Not available to all users because your app is not live
つまり、まだ全ての人に”LIVE”ではありません、ということが表示されます。

サイトの準備が終わったら、これを”LIVE”にすることを忘れないようにしておいてください。

Facebookのアプリケーションを”LIVE”状態にするには

まず、左サイドのメニューの設定をクリックし、Facebookアプリケーション・ダッシュボード画面4

設定画面が開きますので、指定の場所にEmailアドレスを入力します。
変更を保存ボタンをクリックします。
Facebookアプリケーション・設定画面

次に、左サイドのメニューのStatus & Reviewボタンをクリック。Facebookアプリケーション・設定画面2

Status & Review画面になります。
「いいえ」の横のボタンをクリックし、「はい」にします。
Facebookアプリケーション設定画面・Status_&_Review

再度確認されますので、承認ボタンを押します。
Facebookアプリケーション設定画面・Status_&_Review2

下のようにURL横の○が緑色になったら、”LIVE”であるサイン、完了です。
Facebookアプリケーション設定画面・Status_&_Review3

お疲れ様でした♪

※追記
登録後、アプリケーションIDやApp Secretは、登録したアプリのダッシュボード画面で確認できます。
開発者ページから、登録したサイトのダッシュボード画面を表示するには、アプリボタンをクリック、ドロップダウン表示される登録したアプリ名をクリックすると、それぞれのダッシュボードを表示できます。
facebook app-id ダッシュボード

Published:2014/02/03

Written by