IT EVANGELIST.NET ロゴ

クライアントの課題をITで解決する

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の「いいね」を正常に動作させるための設定


弊社では、長年、主にWeシステム開発を必要とするWebコンサルティングに携わって来ましたが、RFPの作成、プロジェクトマネジメント、システム設計及び構築、運用といった段階から「ゴール」を目指す、という事も行なっております。

まずは、現状の問題点を洗い出す「監査」や「Web解析」も行なっておりますので、Webサイト構築、Webサイトリニューアル、Webシステム構築・リニューアルをご検討の場合には、是非ご相談下さい。

タグ: , , ,
Nexusシリーズ まとめ バナー データ通信SIM まとめ バナー 二見・鳥羽・伊勢神宮 まとめ バナー

検索

ウチムラヒロシ アイコン 運営者:ウチムラ ヒロシ

神戸出身。 コラムを書いたり、コンサルティングしたり、企画書を書いたり、コードを書いたり、サーバ組んだりしてます。

関連サイト

喰意地 kuiiji