WordPressにはてなブックマークボタンを設置

2011

3.16

プラグインを使わずにWordPressに公式の「はてなブックマークボタン」を設置する方法をまとめました。と言っても、メモ程度の記事です。

(新)はてなブックマークボタン

3タイプあります。お好みで選んでください。

このエントリーをはてなブックマークに追加

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

このエントリーをはてなブックマークに追加

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

このエントリーをはてなブックマークに追加

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

(旧)はてなブックマークボタン

ここで使うボタン画像は上のリンクから手に入ります。自作ボタンを入れても良いですね。

このエントリーをはてなブックマークに追加

<a href="http://b.hatena.ne.jp/entry/add/<?php the_permalink() ?>"></p><br /><img src="アップロードした「B!」画像のURL" width="16" height="12" style="border: none;" alt="このエントリーをはてなブックマークに追加" /><br /></a>

はてなブックマーク数(users)

上の旧ブクマボタンと組み合わせて設置すると良いかもしれません。

はてなブックマーク - WordPressにはてなブックマークボタンを設置

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>"><img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>" alt="はてなブックマーク - <?php the_title(); ?>" /></a>

ソーシャルブックマークボタンをまとめて手軽に表示させたいときは、こちらのプラグインがオススメですよ。

関連記事

デザインプラス採用サイト
Wordpress使い方大全集

過去アーカイブ