2013/08/08

はてなブックマークボタンの設置方法

はてなブックマークボタンを設置する方法

はてなブックマークボタンをwebサイトやブログのページに設置する方法をご紹介します。

目次

■はてなブックマークについて

はてなブックマークについて

『はてなブックマーク』はオンラインでブックマークを管理・共有できるブックマーキングサービスです。

インターネットに繋がっていればいつでもどんなデバイスからでも閲覧することが出来、ブックマークはタグやコメントを付けることが出来るので検索も容易になります。
ブックマークの公開も可能ですので話題になっているページを簡単に見つけることも出来ます。

■はてなブックマークボタンの設定・デザイン変更

はてなブックマークボタンからボタンの設定が行えます。

はてブボタンの設定

ボタンの種類を選択し、設置するページのURLタイトルを入力するだけです。

<a href="http://b.hatena.ne.jp/entry/ページのURL" 
	class="hatena-bookmark-button"
	data-hatena-bookmark-title="ページのタイトル"
	data-hatena-bookmark-layout="vertical-balloon"
	data-hatena-bookmark-lang="ja"
	title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" 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>

生成されたコードをボタンを設置したい場所にコピー&ペーストすれば設置完了です。

■生成したコードについて

WordpressやMovableTypeでブログ記事にはてなブックマークボタンを設置する場合はページのURLをそれぞれ<?php the_permalink(); ?>、<$MTEntryPermalink$>に、ページのタイトルをそれぞれ<?php wp_title(); ?>、<$MTEntryTitle$>変更して使用してください。

Wordpressの場合

<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-balloon"
	data-hatena-bookmark-lang="ja"
	title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" 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>

MovableTypeの場合

<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" 
	class="hatena-bookmark-button"
	data-hatena-bookmark-title="<$MTEntryTitle$>"
	data-hatena-bookmark-layout="vertical-balloon"
	data-hatena-bookmark-lang="ja"
	title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" 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>

■まとめ

はてブでのブックマークはネットワークで共有されています。
ユーザーの興味関心が高いエントリーを投稿し、多くのユーザーにブックマークしてもらうことで拡散される可能性が高まります。
後で読むためにブックマークしているユーザーがいたり、公式に『Webで話題の面白いエントリー』として取り上げられることもありますので、はてブボタンは設置することをおすすめします。