WordPressにはてなブックマーク・twitter・Facebookの各ボタンをプラグインを使わないで追加してみた

技術

2011年3月9日
WordPressにはてなブックマーク・twitter・Facebookの各ボタンをプラグインを使わないで追加してみた

まず大変参考にさせて頂いたページの紹介。

[参考URL]
公式の『mixiチェックボタン』『mixiイイネ!ボタン』『Twitter ツイートするボタン』『Facebook いいね!ボタン』『GREE いいね!ボタン』『はてなブックマークボタン』などをひとまとめに設置する方法。まとめ
http://yaburekabure.com/computer/button.html

[今回やったこと]
以下のボタンをWordpress上に設置(プラグインを使わないで)

はてなのはてなブックマークボタン設置
twitterのツイートするボタン設置
Facebookのいいねボタン設置

前提条件：

はてなへの会員登録は不要

手順：

(1)以下のURLを開いてコードを取得してください。
使いやすくなりました! はてなブックマークボタン
http://b.hatena.ne.jp/guide/bbutton

このとき、「1.ページ情報を入力してください」のURL、タイトルはわかりやすい適当な文字列(例えばURLはaaaa、タイトルはbbbbなど)を設定します。
そして「2.タイプを選択してください」のタイプを選択し、生成されたコードをコピーします。

(2)先ほどのURL(ここではaaaa)とタイトル(ここではbbbb)のところをそれぞれパーマリンクタグ・タイトルタグに変換してWordpressの設置したい場所に貼り付けます。

<a href=”http://b.hatena.ne.jp/entry/<?php the_permalink() ?>” data-hatena-bookmark-title=”<?php the_title(); ?>” data-hatena-bookmark-layout=”standard” title=”このエントリーをはてなブックマークに追加”><img src=”http://b.st-hatena.com/images/entry-button/button-only.gif” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”http://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>

(3)設置したページに表示されていること、およびクリックして正常に動作することを確認して完了です。

2.twitterのツイートするボタン設置

前提条件：

twitterへの会員登録は不要

手順：

(1)以下のURLを開いてコードを取得してください。
ツイートボタン
http://twitter.com/goodies/tweetbutton

このとき、「1.ボタンを選択してください。カスタマイズすることもできます。」のツイート内テキストタブを選択後、タイトルを適当な文字列(例えばbbbb)と入力してください。
次にURLタブを選択し、同じようにURLを適当な文字列(例えばaaaa)と入力してください。
そして生成されたコードをコピーします。

<a href=”http://twitter.com/share” data-url=”aaaa” data-text=”bbbb” data-count=”vertical” data-lang=”ja”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>

<a href=”http://twitter.com/share” data-url=”<?php the_permalink() ?>” data-text=”<?php the_title(); ?>” data-count=”vertical” data-lang=”ja”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>

(3)設置したページに表示されていること、およびクリックして正常に動作することを確認して完了です。

3.Facebookのいいねボタン設置

前提条件：

Facebookへの会員登録は不要

手順：

(1)以下のURLを開いてコードを取得してください。
Social Plugins
http://developers.facebook.com/plugins
↓
Like Button
http://developers.facebook.com/docs/reference/plugins/like/

このとき、URL to Likeは適当な文字列(例えばaaaa)と入力してください。
その他設定は用途に合わせて設定してください。
そして生成されたコードをコピーします。
コードはiframeとXFBMLの2つが生成されますが、ここではXFBMLを例として使用します。

(3)設置したページに表示されていること、およびクリックして正常に動作することを確認して完了です。
ただし、このままだと、「いいね」ではなく、「Like」と表示されてしまいます。
「いいね」に変更したい場合は青字のen_USをja_JPに変更してください。

mixiイイネはうまくいかなかったので保留。
あとプラグインを使用した各ボタンの設定は別途実験してみます。
今回はなかなか勉強になりました。