『はてなブックマーク』ボタン設置方法 / WordPressカスタマイズ

『はてなブックマーク』ボタン

前回の記事で予告したとおり、今回は『はてなブックマーク』ボタンの設置方法を紹介します。

Step01

『はてなブックマーク』ボタンを配布している公式サイトへ。
http://b.hatena.ne.jp/guide/bbutton

配布サイトにいくと分かりますが、『はてなブックマーク』ボタンはオプション設定なども特にないので非常にシンプルで分かりやすいです。また、サイトには『①・②・③』の3手順で設置できると表示されているので、今回はこの指示に従って設置したいと思います。

まず手順①で『はてなブックマーク』ボタンを設置したいページURLと、ページタイトルを記入します。ここは最後に記事ごとのURLとタイトルが入るWordPress・MT用タグに変更するので、仮でトップページのURLとサイトタイトルを入れておきます。

Step02

手順②では、ボタンデザインのタイプを3種類の中から選択します。

Step03

次に手順③に表示されているソースコードをコピーしてボタンを表示したい場所にペーストします。

ここまでで配布サイトでの設定は完了です。

Step04

最後にペーストしたソースコードを各記事のURLとタイトルに変更するために、a要素内のhref属性とdata-hatena-bookmark-title属性をWordPress・MT用のタグに書き換えます。

まずは各記事ごとのURLをボタンに反映するため、href属性内の赤文字の部分を変更してください。

<a href=”http://b.hatena.ne.jp/entry/http://www.html5-memo.com/” class=”hatena-bookmark-button” data-hatena-bookmark-title=”HTML5でサイトをつくろう” data-hatena-bookmark-layout=”standard” title=”このエントリーをはてなブックマークに追加”>

【Wordpressの場合】

<?php the_permalink(); ?>

【MTの場合】

<$mt:EntryPermalink$>

次にタイトルが記事ごとに変更されるように赤文字の部分を変更します。

<a href=”http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”HTML5でサイトをつくろう” data-hatena-bookmark-layout=”standard” title=”このエントリーをはてなブックマークに追加”>

【Wordpressの場合】

<?php the_title(); ?>

【MTの場合】

<$mt:EntryTitle$>

この設定を反映すると下記のようになります。

<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=”このエントリーをはてなブックマークに追加”>

以上で設定は完了です。