IT EVANGELIST.NET ロゴ

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

2015年度版WordPressでFacebookの「いいね」を正常に動作させるための設定

公開日: 2015/02/09
カテゴリー: WordPress

WordPressでFacebookアプリを使う為のDeveloers登録とアプリ作成手順の続きで引き続き、WordPressでFacebookのいいねボタンを正常に動かすための設定を行っていきます。

今回はWordPressに、前回に作ったFacebookアプリの管理画面から吐き出されるコード等を使って設定していきます。

wordpress-fblike

OGPとは

まずは設定に必要なOGPについて。

OGPとは「Open Graph Protocol」の略称で、シェアやいいねをされたときにそのページのタイトル・URL・概要・画像等をSNSに正しく伝えるための仕様です。

OGPはFacebookだけではなくGREE、mixi、Google+等でも使われています。

FacebookのいいねボタンでOPGが問題になるのは、OGPが設定されていないページでいいねボタンをクリックした時、クリックしてくれた人個人のウォールには表示されるのですが、ニュースフィードには表示されない、と言う点です。

OGPの動作確認方法

取り敢えず、OGPが正常に記述されているかどうかは、Facebookにログインした状態でOpen Graph DebbugerにアクセスしてURLを入れる事で確認ができます。

まず、Open Graph DebbugerにアクセスするとDebugger画面が開きます。

Open Graph Debbuger

Open Graph Debbuger

入力欄に、適当なブログの個別記事URLを入力して「Debug」ボタンをクリックすると、OGPの設定にミスがある場合は以下のようにエラーや警告が出ます。

エラーメッセージ

エラーメッセージ

このうち、エラーは絶対出さないようにする必要があり、警告についてもなるべく出ないようにします。

警告は出てても記事内容の表示はされますが、想定した表示がされない場合があります。

また、Debuggerのもう一つの使い方としてFacebookサーバに残っているキャッシュをクリアする、というものがあります。

一度間違った状態でいいねボタンの設定を行ってしまっていると、正しい設定する以前の記事はトップページのカウントのままになったりといった初期の不具合が残ってしまいます。

これは、Facebookのサーバにキャッシュが残ってしまってる事が原因ですので、それをこのOpen Graph Debbugerを使うと消去することができます。

キャッシュを消す手順としては、OGPが正常に記述されているかどうか確認する方法と同じく、キャッシュを消したいページの個別記事URLを入力して「Debug」ボタンをクリックするだけです。

Facebookのいいねボタン等の挙動がおかしいと感じた場合には、こちらでキャッシュを消してみることをお勧めします。

WordPressにコードを埋め込む

いよいよ、WordPressのテーマにコードを埋め込んでいきます。

いいねボタンに限らず、Webサイト上に埋め込むこういった種類のコードは、必ず「動作させるためのJavaScript」と「表示(設置)タグ」の2つがセットになっています。

例えば、いいね!ボタンを作る「Like Button for the Web」の場合は以下のようになっています。

Like Button for the Web

Like Button for the Web

同様に、WordPressにも二つのコードを埋め込みます。

Dashboardを開く

まずはJavaScriptのコードを埋め込みますが、これは非常に簡単です。

Facebook Developersの画面から、作成をしたFacebookアプリのDashboardを開きます。

Dashboard

Dashboard

QuickStartをクリック

次に、左側のメニューから「Settings」を選び「Website」の所にある「QuickStart」をクリック。

Settings

Settings

日本語だと「クイックスタート」です。

設定

設定

JavaScriptをコピーしてWordPressに貼り付ける

すると、「Quick Start for Website」の画面が開きますので、「Setup the Facebook SDK for JavaScript」に記載されているコードをコピーして、WordPressのヘッダー部分に貼り付けます。

Setup SDK

Setup SDK

このコードはQuickstart: Facebook SDK for JavaScriptにあるBasic Setupの記載されている以下のコードに、App IDが自動で挿しこまれたものです。

Quickstart: Facebook SDK for JavaScript

このコード、Facebookアプリの設定を既に行っていて、古いコードを使っている場合には2015年4月30日までに新しいものに差し替える必要がありますので注意が必要です。

Web担当者Forum:いいね!ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります(公式情報)

Facebookは、2014年4月30日に、新しい「バージョン2.0」のAPIを導入しました。それによって、それまで使われていたバージョン1のAPIは、1年後の2015年4月30日で有効期限が切れると決められました。

いいね!ボタンが2014年4月30日より前に設置されていた場合は、バージョン1のAPIを使うようになっているため、2015年4月30日を過ぎると動かなくなるというわけです。

Web担当者Forumでは、直接米Facebookのチームにしたということで、2015年4月30日以降は使えなくなるとの回答が載っています。

この件を米Facebookのチームに確認したところ、次のような回答でした。

――ソーシャルプラグインの「いいね!」ボタンでall.jsを使っているもの(明示的にバージョン2.0のAPIを指定していないもの)は、2015年4月30日を過ぎても動作し続けるのか?

いいえ。JavaScript SDKのパスを “all.js” から “sdk.js” に書き換えて、いいね!ボタンのコードスニペットも書き換える必要があります。

※Web担編注:「ボタンのコードスニペットも変更が必要」とありますが、JavaScript SDKのパス以外には、現時点では変更はないはずです。
――古い書き方をしている いいね!ボタンは、2015年4月30日を過ぎると自動的に新しいバージョンにリダイレクトされるような処理はないのか?

2015年4月30日を超えると、動作しなくなります。

Develoerにログインしている状態で、Like Button for the Webを開くと、App IDが入ったコードが表示されるのですが、コードの書き方がちょっと異なるのと入っている指定のバージョンが異なっています。

SDKの場合はv2.2ですが、「Like Button for the Web」ではv2.0になっており、Like Button for the Webのサンプルコードではv2.1になっている点にご注意ください。

ログイン状態:Like Button for the Web

ログイン状態:Like Button for the Web

いいねボタンを表示したい場所にタグを貼る

次に、index.phpやsingle.php等、いいねボタンを表示させたい場所に表示タグを貼り付けます。

これは、「Like Button for the Web」の、下に表示されている貼り付けコードをカスタマイズします。

変更前:

変更後:

今回変更をしたのはHTML5のコードですが、WebサイトのURLが入っていたところを固定URLを吐き出すコードを挿しこんでいます。

OGPの設定を行う

Facebookのウォールに表示されるOGPの設定を行っていきます。

この設定内容については、以下のブログに大変詳細に解説がありましたので、そちらをご覧ください。

MILL KEY WEB:Facebookなどでサイトが共有された時、リッチ表示するOGPの設定

ただし、Facebookの公式Plugin「Facebook」を使うとOGPを自動で吐き出してくれますので、個別設定が大変だという場合はこちらを使うのが一番簡単です。

いいね、シェアの表示位置を制御したり、Debuggerの機能等もありますが、とりあえずOGPの設定だけを使うには、Pluginの管理画面で取得したApp IDとApp Secretを入力するだけでOKです。

Facebook Plugin Settings

Facebook Plugin Settings

全ての設定が終わったら、再度Open Graph Debbugerで動作をして、ユーザーアカウント、テストアカウント等でテストをしてみてください。

Facebookの仕様変更に注意

Facebookの仕様は頻繁に変更になるため、設定時には毎回手順が変更になったりしてて苦労をします。

そのため、前回と同じやり方で行っても上手くいかないということが必ず起きると思いますので、Facebookの機能を実装する場合には、テストユーザーを作ってテストを行う、本場化対応が出来ているか一般ユーザーでテストを行う、OGPがきちんと吐き出されているかOpen Graph Debbugerで確認を行う、という事が大変重要です。

ただし、実際のアカウントで「いいね」ボタンをテストをしていると、今度はスパム扱いになったりもしますので、その点はまた悩ましい所です。

今回のやりかたも現時点でのものとなりますので、実装時には必ず最新のドキュメントをあたって、十分なテストを行うようにしてください。


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

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

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

検索

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

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

関連サイト

喰意地 kuiiji