Facebookのいいねボタンと、Twitterのシェアボタンを簡単にjQueryで設置する方法です。Facebookのいいねボタンと、Twitterのシェアボタンは、おのおののサービスが設置するためのコードを公開してくれているので簡単なのですが、全ページ対応にするため（サイトでなく、表示されているページのいいね数などを取得する）にちょっと加工したので、備忘録までに。
FacebookのいいねボタンをjQueryで設置する
FacebookのいいねボタンをjQueryで設置する流れは以下のとおり。
- トップページ用のいいねボタンを設置する
- 各ページごとにいいねボタンを設置する
まず、トップページ用のいいねボタン設置用コードは、以下URLで生成できます。事前にアプリケーション登録が必要かもです。 アプリケーション登録は過去の以下記事が参考になるかもです。 WordPressに投稿した内容をFacebookプラグインを利用してFacebookページへ投稿する設定と使い方 いいねボタンは以下のリンクから。 Like Button – Facebook Developers レイアウトなど設定できます。 設定後、本サイトの場合はget codeを押すと以下のようなcodeが生成されます。 ※本サイトはこの方法で設置していません。。
今回はHTML5というタブのコードを設置します。 このコードの設置は上記画像のとおり、２ステップ。 １のスクリプトは、可能であればbodyタグのすぐ下に設置。設置してみましたが、レイアウト崩れなどはみられませんでした。 そして表示したい部分には２のコードを設置するのですが、２のコードは以下のとおりです。
data-hrefの部分がFacebookに送るURLになっています。なので、各ページごとに設定するには、この部分を加工する必要があります。 まず、head内にでもjQueryで以下のように記述します。
[javascript]
var fb_like_url = location.href;
$("#fb_area").append(
‘<div class="fb-like" data-href="’ + fb_like_url + ‘" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>’
);
[/javascript]
そして設置したい場所に以下を記述します。
上記のJavascript部分は、FacebookのJavascriptの前に記述しておいた方がよさそうです。 上記方法で、各ページごとのいいねボタンを設置できます。
Twitterのシェアボタンを設置する
Twitterのシェアボタンは簡単です。 以下のページで生成し、設置すればおのおののページ用に勝手に生成されるので、設置するだけです。Twitterのアカウントをいれておくと、ツイート時にアカウントを入れることができます。
Facebookでいいねされるときの画像を設定する。
Facebookでいいねされるときに、画像のサムネイルが一緒に表示されるのですが、思ったとおりの画像が表示されない場合があります。 なので、アイコンやロゴなどの画像を設定することで、指定した画像を表示することができます。以下のコードをhead内に記述します。
相対パスでなく、絶対パスで設定しないと表示されません。 2013年3月現在のものなので、今後仕様の変更などがあるかもしれません。また、プラグインなどもあるので、プラグインなどで導入するのも良いかもしれませんね。 他に良い方法があるかもしれませんので、あればコメントにでも記載ください。