カテゴリ:
次は、オリジナルデザインのはてなブックマークボタンを設置する方法です。

FC2には、ソーシャルボタンが、ツイッター、フェイスブック、ラインの3つしかありません。


「はてなブックマークって聞いたことないし、別にいらないんじゃない?」

はてなブックマークを聞いたことない方は、そう思うかもしれません。

しかし、一番手っ取り早くアクセスを集めるソーシャル・ネットワーキング・サービスは、はてなブックマークです。


はてなブックマークは、一定時間内に3つ以上(有効なアカウントで)ブックマークされると、新着エントリーに表示されます。

新着エントリーに表示されると、エントリーされた記事に、一日で数百~数千のアクセスが、はてブから入ってきます。

さらに、その上の人気エントリー、ホットエントリーに表示されると1日で数千~数万に跳ね上がります。

そして、アクセス自体が増えることで、検索も上位に表示されるようになるので、はてブの力は侮れません。


ですが、一定時間内にはてブを3つ付けてもらう事は非常に難しい。

難しい上に、はてブボタンが設置されていないと、ブックマークされる可能性はほぼ0%。

ですが、わかりやすい場所、魅力あるデザインのボタンだと、通常のはてブボタンよりブックマーク確率はアップ!


はてブボタンを設置していなかったせいで、ブックマークしてもらえるチャンスを逃してしまった…。とならない為に、はてブボタンは必ず設置してください。

魅力あるデザインや、追尾式にしていつでもブックマークできる場所に設置するなど、はてブ確率アップを狙えるデザインや、場所に設置するとより良い結果が現れると思います。


では、オリジナルはてブボタンのHTMLです。

HTML

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加">
<img src="マウスオーバー前の画像URL" border="0" onMouseOver="this.src='マウスオーバー時の画像URL'" onMouseOut="this.src='マウスオーバー後の画像URL'" alt="このエントリーをはてなブックマークに追加" style="border: none;" />
</a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

CSSは書き込み不要。HTMLのみで設置出来ます。


ちなみに、上記のHTMLは、マウスオーバー時に、画像切り替えが出来るよう設定してあるはてブボタンです。

画像を1つだけ(マウスオーバー設定なし)で設置したい場合は、

onMouseOver="this.src='マウスオーバー時の画像URL'" onMouseOut="this.src='マウスオーバー後の画像URL'"

の部分を削除してください。