Facebookの「いいねボタン」を個別のページに設置するのは、いまや当たり前となっていますが、WordPressでこれを実装する場合には以外と大変です。
ただ単にFacebookが用意しているLike Button for the Webを使って、コードを吐き出してトップページに貼り付けても、個別ページでは挙動がおかしい。
設定がきちんと出来ていないと、いいねボタンはちゃんと付いていて、ボタンも押せるんですが反映がされない、あるいはトップページのいいね数が表示されたりする、といった事が発生します。
こういった事態を避けるためには、Facebook Develoersでアプリの登録とWordPress側でOGPの設定が必要ですが、Facebookの仕様が変わったりと苦労をすることも多いので、まずは現時点でのFacebook Develoersへの登録とFacebookアプリの登録についてまとめてみました。
目次
そもそも、OGP等の設定を行うためには、個人用のFacebookアカウントが必要になります。
また、アプリケーションIDを取得するには、まず、Facebookで開発者登録が必要ですので、Facebookにログインをした状態でFacebook Developersにアクセスをします。
Facebook Developers
次に上のメニューにある「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画面になりますが、そのまま設定を続けます。
画面をスクロールすると「Tell us about your website」がありますので、PCとモバイルのURLを入力します。
Tell us about your website
「Test your Facebook Integration」が追加されますが、そのままスクロールをすると「Finished!」の文字が見えます。
これで登録は一旦終了です。
右上の「Skip Quick Start」を押して、FacebookアプリのDashboard画面に行きます。
Dashboard
登録をしただけの状態では、Facebookアプリは管理者や登録したユーザーした利用ができません。
そこで、公開して一般のユーザーが「いいね」を押せるようにする為の追加設定を行っていきます。
左側のメニューから「Settings」を選ぶとApp IDや先程入れたWebサイトのURL等の情報が表示されますが、「Contact Email」が空ですのでこちらにメールアドレスを入力をします。
Settings
追記：サイトURLとMobile Site URLに日本語サイトを入れて「Save Changes」を押すと、管理画面が日本語化されます。
ただし、再度Deplopersの画面にアクセスすると英語に戻ってしまいますので、その度に「Status & Review」で「Save Changes」を押さないといけないように思えます。
設定
左側のメニューから「Status & Review」をクリックすると「Status」画面が開きますが、一番上にアプリ名、横に緑の丸「○」、スライドボタンが「No」の状態であります。
Status
このスライドボタンをクリックして「Yes」に変えると「Make App Public?」のポップアップが表示されますので、「確認」を押します。
Make App Public?
画面が変わるとアプリ名の横にある緑のの丸「○」が、「●」となり、公開状態になっているのが確認できます。
public mode
これで公開は完了です。
次は、WordPressの設定を行っていきます。
Add-on amazon CentOS CMS CS-Cart CSRF Digital Marketing Audit EC ECサイト構築 Facebook Google Google Analytics Mac Magento Multi-Vendor Piwik Plugin SEO Web Marketing Audit Wi-Fi WooCommerce WordPress XSS yum アクセス解析 アップデート アドオン イベント クロスサイトスクリプティング クロネコヤマト コワーキングスペース セキュリティ ノマド プラグイン メンテナンス モバイル ヤマト運輸 リモートコード実行 レビュー 公衆無線LAN 大規模 無料 脆弱性 越境EC 電源
