WordPress にはてブと Twitter と Facebook のボタンを10秒で貼り付けられるコード

WordPress に有名なボタンはてブ、Twitter、Facebook を表示するコードを作りました。プラグインをインストールする必要はありません。貼り付ければ一瞬で表示することができます。以下に手順を紹介しておきます。

以下のコードをテーマファイルの中にある functions.php にコピペする

1
2
3
4
5
6
7
8
function socialButton()
{ ?>
	<ul >
		<li class="hatebuButton"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" 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></li>
		<li class="tweetButton"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="webleorg" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
		<li class="likeButton"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=470&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:470px; height:60px;"></iframe></li>
	</ul>
<?php }

PHP の開始タグなどが少し複雑になっているので気をつけましょう。

任意のテーマファイルのボタンを表示したいところに以下のコードをコピペ

1
<?php socialButton(); ?>

これで終了です。他のボタンも付けられますが、一応有名所だけに厳選して作りました。また更新があれば追記します。

追記: data-via=”webleorg” の部分を修正してください

上記コードの中に data-via=”webleorg” という部分がありますが、ここを自分のアカウント名に変更してください。ここを変更しないとおすすめのユーザ名に私のアカウントが入ってしまいます。いくつか既に私宛にリプライが飛んでしまっています。ご迷惑おかけしております。

追記: JS コードをフッタで読み込むようにすると速くなります

かなり多くの方が利用しているようですのでひとつコメントを。JS コードが中に書いてありますが、これは何度も書く必要ないのでコードから取り出して別でフッタで読み込むと無駄が省けます。また新しいコードが出来上がればブログにさせて頂きます。

コメント

  1. 再びWordPressにソーシャルブックマークボタンを追加 | エクストリームオフラインさんのコメント

    [...] ウェブル: WordPress にはてブと Twitter と Facebook のボタンを10秒で貼り付けられるコードを書いてみたよ [...]