ブログに必須!はてブボタンを作成/設置する方法

ブログに必須!はてブボタンを作成/設置する方法

「Bloggerユーザーがはてなブックマークボタンを設置するなんて邪道っしょ」と、しょうもない意地をはっていた私。今となってはもっと早く設置しとけばよかったと後悔しております。なぜなら、はてなブックマークボタンを設置してからというもの、ブログのアクセス数が増えたのですから。

そこで今回は、意地っぱりなあなたにもオススメ!はてなブックマークボタンを設置する方法をご紹介:)

SPONSORED LINK

初心者向け:コピペでOK!

設置は簡単、ボタンの下に書かれたコードをコピペするだけ!

お好みのはてなブックマークボタンをお選びくだされ:)

2014/04/30 追記

ボタンの設置方法が分からない方はこちらの記事を参考にどうぞ:)

記事:記事下など好きな所にSNSボタンを設置する方法

吹き出しver(オススメ)

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

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical-balloon' data-hatena-bookmark-lang='ja' expr:data-hatena-bookmark-title='data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' 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>

ボタン大、ブックマーク数ありver

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

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard-balloon' data-hatena-bookmark-lang='ja' expr:data-hatena-bookmark-title='data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' 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>

ボタン大、ブックマーク数なしver

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

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard-noballoon' data-hatena-bookmark-lang='ja' expr:data-hatena-bookmark-title='data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' 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>

ボタン小、ブックマーク数ありver

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

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='simple-balloon' expr:data-hatena-bookmark-title='data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' 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>

ボタン小、ブックマーク数なしver

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

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='simple' expr:data-hatena-bookmark-title='data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' 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>

上級者向け:じっくり吟味してから設置!

ここからはちょっと上級者向けの設置方法をご紹介!

まずは以下のサイトにアクセスします。

はてなブックマークボタンの作成・設置について - はてなブックマーク(公式サイト)

はてなブックマークボタンを作成する

はてなブックマークボタン詳細設定

ここに細かい設定をしていきます。

ボタンのタイプ

ボタンの種類(大/小)を選択します。

ページのアドレス

Blogger用に後でカスタマイズするので空のままでOKです。

ページのタイトル

ここもBlogger用に後でカスタマイズするので空のままでOKです。

ブックマーク数

ブックマーク数を表示するか選択します。

非表示:表示しない

表示:表示します

表示(バーティカル):吹き出し風に表示します。※タイプで大を選んだ時のみ選択可

表示言語

[B!]の横に表示する文字を選択します。※タイプで大を選んだ時のみ選択可

日本語:「ブックマーク」と表示されます

英語:「Bookmark」と表示されます

プレビューはこんな感じ

「3. ボタンを確認しましょう」にプレビューが表示されるので、問題なければコードをコピーしましょう。

はてなブックマークボタンをBlogger用にカスタマイズ

修正する箇所は2カ所!

下のコードを例にカスタマイズしてみます:)

<a 
href="http://b.hatena.ne.jp/entry/" 
class="hatena-bookmark-button" 
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>

まず2行目のコードをこんな感じに変更!

expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl'

次にこのコードをaタグ内に追加!

expr:data-hatena-bookmark-title='data:post.title'

カスタマイズ後のコードはこんな感じ!

<a 
expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' 
class='hatena-bookmark-button' 
data-hatena-bookmark-layout='vertical-balloon' 
data-hatena-bookmark-lang='ja' 
expr:data-hatena-bookmark-title='data:post.title' 
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>

あとは設置したいところにコードを張り付ければ完成!

1ページに複数のはてなブックマークボタンを設置する場合、scriptタグは1回記述するだけでOKです。

まとめ

というわけで、はてなブックマークボタンを設置する方法のご紹介でした。

私のように「はてブには頼らん!」と意地をはっていたあなた!この機会に設置してみてはいかがでしょうか:)

SPONSORED LINK

この記事がお役にたちましたらシェアをお願いします:)