スポンサードサーチ
Facebookの「いいねボタン」を個別のページに設置するのは、いまや当たり前となっていますが、WordPressでこれを実装する場合には以外と大変です。
ただ単にFacebookが用意しているLike Button for the Webを使って、コードを吐き出してトップページに貼り付けても、個別ページでは挙動がおかしい。
設定がきちんと出来ていないと、いいねボタンはちゃんと付いていて、ボタンも押せるんですが反映がされない、あるいはトップページのいいね数が表示されたりする、といった事が発生します。
こういった事態を避けるためには、Facebook Develoersでアプリの登録とWordPress側でOGPの設定が必要ですが、Facebookの仕様が変わったりと苦労をすることも多いので、まずは現時点でのFacebook Develoersへの登録とFacebookアプリの登録についてまとめてみました。
目次
FacebookアカウントとDeveloper登録が必要
そもそも、OGP等の設定を行うためには、個人用のFacebookアカウントが必要になります。
Facebook Developersにアクセス
また、アプリケーションIDを取得するには、まず、Facebookで開発者登録が必要ですので、Facebookにログインをした状態でFacebook Developersにアクセスをします。
Facebook Developers
Facebook開発者として登録
次に上のメニューにある「My Apps」にマウスを持っていって「Register as a Developer」をクリックすると「Facebook開発者として登録」のポップアップウィンドウが表示。
Facebook開発者として登録
アカウント認証画面
「次へ」を押すとアカウント認証画面になりますので、携帯電話番号を入れて「SMSで受け取り」を押し、送られてきたFacebook確認コードを入れて「登録」を押します。
アカウント認証画面
登録が完了
これで登録が完了です。
登録完了
アプリの登録
開発者として登録すると、アプリケーション登録ができるようになります。
新しいアプリを追加
メニューの「My Apps」にマウスを持っていくと、今度は「Add a New App」となっていますので、それをクリックすすると、「新しいアプリを追加」のポップアップが開きます。
新しいアプリを追加
アプリ名の登録
ここで、「ウェブサイト」を選ぶと[Quick Start for Website」の画面が開きますので、入力ボックスに作成するアプリ名（なんでもいいです）を入れて「Create New Facebook App ID」をクリック。
Quick Start for Website
カテゴリーの選択
「Create a New App ID」のポップアップが開きますので、Webサイトのカテゴリーを選択し、「Create App ID」を押します。
カテゴリーを選択
追記：別のアカウントで作成すると表示画面が異なっており、テストバージョンのアプリかどうかを聞かれるようになっていました。
テスト、カテゴリーを選択
登録完了
上の画像に、「Setup SDK」の所が明るくなっているステータスバーと、埋め込むJavaScriptが表示されてこれでFacebookアプリの登録は完了です。
Setup SDK
右上の「Skip Quick Start」を押すと、FacebookアプリのDashboard画面になりますが、そのまま設定を続けます。
URLの入力
画面をスクロールすると「Tell us about your website」がありますので、PCとモバイルのURLを入力します。
Tell us about your website
「Test your Facebook Integration」が追加されますが、そのままスクロールをすると「Finished!」の文字が見えます。
これで登録は一旦終了です。
登録完了後のDashboard画面
右上の「Skip Quick Start」を押して、FacebookアプリのDashboard画面に行きます。
Dashboard
Facebookアプリの設定
登録をしただけの状態では、Facebookアプリは管理者や登録したユーザーした利用ができません。
そこで、公開して一般のユーザーが「いいね」を押せるようにする為の追加設定を行っていきます。
メールアドレスの登録
左側のメニューから「Settings」を選ぶとApp IDや先程入れたWebサイトのURL等の情報が表示されますが、「Contact Email」が空ですのでこちらにメールアドレスを入力をします。
Settings
追記：サイトURLとMobile Site URLに日本語サイトを入れて「Save Changes」を押すと、管理画面が日本語化されます。
ただし、再度Deplopersの画面にアクセスすると英語に戻ってしまいますので、その度に「Status & Review」で「Save Changes」を押さないといけないように思えます。
設定
Status画面
左側のメニューから「Status & Review」をクリックすると「Status」画面が開きますが、一番上にアプリ名、横に緑の丸「○」、スライドボタンが「No」の状態であります。
Status
公開処理
このスライドボタンをクリックして「Yes」に変えると「Make App Public?」のポップアップが表示されますので、「確認」を押します。
Make App Public?
公開完了
画面が変わるとアプリ名の横にある緑のの丸「○」が、「●」となり、公開状態になっているのが確認できます。
public mode
これで公開は完了です。
次は、WordPressの設定を行っていきます。
続き：WordPressでFacebookの「いいね」を正常に動作させるための設定
ITのことで、お困りではありませんか？
ITは、コンサルティングからプロジェクトを全体を見据えて実施しなければ上手くいきません。
リソース・シェアリングは、ITのコンシェルジュとして、クライアントにとっての最適解をご提案するコンサルティングから構築・運用・解析までをワンストップで対応できるITコンサルティング会社です。
ITに関してお困りのことがあればお気軽にご相談ください。
ITプロジェクトで最適解を探すなら
御社にとって最適なWebサイト構築をするなら
失敗しないWebシステム開発をするなら
WordPressを活用したいなら
ECサイトを構築したいなら
越境ECサイトを構築したいなら
企業間取引向けECサイトを構築したいなら
マーケットプレス型ECサイトを構築したいなら
課題や事例から最適解を探すなら
リソース・シェアリングの実績
お問合せ
スポンサードサーチ
