2015年度版WordPressでFacebookアプリを使う為のDeveloers登録とアプリ作成手順

公開日: 2015/02/08
カテゴリー: WordPress
  • このエントリーをはてなブックマークに追加

Facebookの「いいねボタン」を個別のページに設置するのは、いまや当たり前となっていますが、WordPressでこれを実装する場合には以外と大変です。

ただ単にFacebookが用意しているLike Button for the Webを使って、コードを吐き出してトップページに貼り付けても、個別ページでは挙動がおかしい。

設定がきちんと出来ていないと、いいねボタンはちゃんと付いていて、ボタンも押せるんですが反映がされない、あるいはトップページのいいね数が表示されたりする、といった事が発生します。

こういった事態を避けるためには、Facebook Develoersでアプリの登録とWordPress側でOGPの設定が必要ですが、Facebookの仕様が変わったりと苦労をすることも多いので、まずは現時点でのFacebook Develoersへの登録とFacebookアプリの登録についてまとめてみました。

Facebook Developers

FacebookアカウントとDeveloper登録が必要

そもそも、OGP等の設定を行うためには、個人用のFacebookアカウントが必要になります。

Facebook Developersにアクセス

また、アプリケーションIDを取得するには、まず、Facebookで開発者登録が必要ですので、Facebookにログインをした状態でFacebook Developersにアクセスをします。

Facebook Developers

Facebook Developers

Facebook開発者として登録

次に上のメニューにある「My Apps」にマウスを持っていって「Register as a Developer」をクリックすると「Facebook開発者として登録」のポップアップウィンドウが表示。

Facebook開発者として登録

Facebook開発者として登録

アカウント認証画面

「次へ」を押すとアカウント認証画面になりますので、携帯電話番号を入れて「SMSで受け取り」を押し、送られてきたFacebook確認コードを入れて「登録」を押します。

アカウント認証画面

アカウント認証画面

登録が完了

これで登録が完了です。

登録完了

登録完了

アプリの登録

開発者として登録すると、アプリケーション登録ができるようになります。

新しいアプリを追加

メニューの「My Apps」にマウスを持っていくと、今度は「Add a New App」となっていますので、それをクリックすすると、「新しいアプリを追加」のポップアップが開きます。

新しいアプリを追加

新しいアプリを追加

アプリ名の登録

ここで、「ウェブサイト」を選ぶと[Quick Start for Website」の画面が開きますので、入力ボックスに作成するアプリ名(なんでもいいです)を入れて「Create New Facebook App ID」をクリック。

Quick Start for Website

Quick Start for Website

カテゴリーの選択

「Create a New App ID」のポップアップが開きますので、Webサイトのカテゴリーを選択し、「Create App ID」を押します。

カテゴリーを選択

カテゴリーを選択

追記:別のアカウントで作成すると表示画面が異なっており、テストバージョンのアプリかどうかを聞かれるようになっていました。

テスト、カテゴリーを選択

テスト、カテゴリーを選択

登録完了

上の画像に、「Setup SDK」の所が明るくなっているステータスバーと、埋め込むJavaScriptが表示されてこれでFacebookアプリの登録は完了です。

Setup SDK

Setup SDK

右上の「Skip Quick Start」を押すと、FacebookアプリのDashboard画面になりますが、そのまま設定を続けます。

URLの入力

画面をスクロールすると「Tell us about your website」がありますので、PCとモバイルのURLを入力します。

Tell us about your website

Tell us about your website

「Test your Facebook Integration」が追加されますが、そのままスクロールをすると「Finished!」の文字が見えます。

これで登録は一旦終了です。

登録完了後のDashboard画面

右上の「Skip Quick Start」を押して、FacebookアプリのDashboard画面に行きます。

Dashboard

Dashboard

Facebookアプリの設定

登録をしただけの状態では、Facebookアプリは管理者や登録したユーザーした利用ができません。

そこで、公開して一般のユーザーが「いいね」を押せるようにする為の追加設定を行っていきます。

メールアドレスの登録

左側のメニューから「Settings」を選ぶとApp IDや先程入れたWebサイトのURL等の情報が表示されますが、「Contact Email」が空ですのでこちらにメールアドレスを入力をします。

Settings

Settings

追記:サイトURLとMobile Site URLに日本語サイトを入れて「Save Changes」を押すと、管理画面が日本語化されます。

ただし、再度Deplopersの画面にアクセスすると英語に戻ってしまいますので、その度に「Status & Review」で「Save Changes」を押さないといけないように思えます。

設定

設定

Status画面

左側のメニューから「Status & Review」をクリックすると「Status」画面が開きますが、一番上にアプリ名、横に緑の丸「○」、スライドボタンが「No」の状態であります。

Status

Status

公開処理

このスライドボタンをクリックして「Yes」に変えると「Make App Public?」のポップアップが表示されますので、「確認」を押します。

Make App Public?

Make App Public?

公開完了

画面が変わるとアプリ名の横にある緑のの丸「○」が、「●」となり、公開状態になっているのが確認できます。

public mode

public mode

これで公開は完了です。

次は、WordPressの設定を行っていきます。

続き:WordPressでFacebookの「いいね」を正常に動作させるための設定

タグ: , , ,