Web開発

Facebookのいいねボタンと、Twitterのシェアボタンを簡単にjQueryで設置し、画像を設定する

jquery
Facebookのいいねボタンと、Twitterのシェアボタンを簡単にjQueryで設置する方法です。Facebookのいいねボタンと、Twitterのシェアボタンは、おのおののサービスが設置するためのコードを公開してくれているので簡単なのですが、全ページ対応にするため(サイトでなく、表示されているページのいいね数などを取得する)にちょっと加工したので、備忘録までに。

FacebookのいいねボタンをjQueryで設置する

FacebookのいいねボタンをjQueryで設置する流れは以下のとおり。

  1. トップページ用のいいねボタンを設置する
  2. 各ページごとにいいねボタンを設置する

まず、トップページ用のいいねボタン設置用コードは、以下URLで生成できます。事前にアプリケーション登録が必要かもです。 アプリケーション登録は過去の以下記事が参考になるかもです。 WordPressに投稿した内容をFacebookプラグインを利用してFacebookページへ投稿する設定と使い方 いいねボタンは以下のリンクから。 Like Button – Facebook Developers レイアウトなど設定できます。 設定後、本サイトの場合はget codeを押すと以下のようなcodeが生成されます。 ※本サイトはこの方法で設置していません。。

今回はHTML5というタブのコードを設置します。 このコードの設置は上記画像のとおり、2ステップ。 1のスクリプトは、可能であればbodyタグのすぐ下に設置。設置してみましたが、レイアウト崩れなどはみられませんでした。 そして表示したい部分には2のコードを設置するのですが、2のコードは以下のとおりです。

[html]<div class="fb-like" data-href="http://non-programmer.net/" data-send="true" data-width="450" data-show-faces="true"></div>
[/html]

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]

そして設置したい場所に以下を記述します。

[html]
<div id="fb_area"></div>
[/html]

上記のJavascript部分は、FacebookのJavascriptの前に記述しておいた方がよさそうです。 上記方法で、各ページごとのいいねボタンを設置できます。

Twitterのシェアボタンを設置する

Twitterのシェアボタンは簡単です。 以下のページで生成し、設置すればおのおののページ用に勝手に生成されるので、設置するだけです。Twitterのアカウントをいれておくと、ツイート時にアカウントを入れることができます。

Twitter / Twitterボタン

Facebookでいいねされるときの画像を設定する。

Facebookでいいねされるときに、画像のサムネイルが一緒に表示されるのですが、思ったとおりの画像が表示されない場合があります。 なので、アイコンやロゴなどの画像を設定することで、指定した画像を表示することができます。以下のコードをhead内に記述します。

[html]
<meta property="og:image" content="httpから絶対パスで記述する画像のURL" />
[/html]

相対パスでなく、絶対パスで設定しないと表示されません。 2013年3月現在のものなので、今後仕様の変更などがあるかもしれません。また、プラグインなどもあるので、プラグインなどで導入するのも良いかもしれませんね。 他に良い方法があるかもしれませんので、あればコメントにでも記載ください。

コメントを残す