1分でブログに設置完了!リニューアルした新「はてブボタン」に変更する簡単な方法[コピペ用サンプルコードあり]

SPONSORED LINK
Hatebu button change

はてなブックマークボタン、通称「はてブボタン」が新しくなりました。

メチャクチャ簡単に変更できたので、方法をご紹介します。

 

実は旧コードと8文字しか違いません。

Hatebu button change1

これまでボックス型の「はてブボタン」を導入していたブロガーの皆さん。

実はこのボックス型のコードと、今回新しくなったコードはたったの8文字しか違いません。具体的にどこが違うかと言いますと・・・

verticalがvertical-balloonになっただけ

です。つまり、-balloonという文字を加えるだけで下のような新ボタンが活用できるのです。

Hatebu button change2

あまりに簡単で驚きました。

 

これまで「はてブボタン」を使ったことがない人へ

これまで導入したことのない方もご安心ください。

公式サイトで丁寧に導入手段が書かれています。

公式:はてなブックマークボタンの作成・設置について

公式サイトを見るのも手間だと言う方は以下のコードをそのまま導入くださいませ。

[html] <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="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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>
[/html]

もし同じページに2つ以上ボタンを設置するなら、Javascriptを2回書くことがないよう気をつけてください。Javascriptが重複するとボタンがうまく表示されないことがあります。

 

新「はてブボタン」のメリット

Hatebu button change3

最後に、新「はてブボタン」がこれまでのボックス型ボタンよりも優れていると思った3つのポイントをご紹介しましょう。

■TwitterやFacebookボタンとデザインが似ていて統一性が出る
■ボタンの幅が広くなり、押しやすい
■数字をクリックすると、はてブページに移動できる

ボタンの横幅が長くなって少々使い難く感じる方もいると思いますが、気にならない方はぜひ導入をおススメします!

 

今回のカギ

今回のカギは、

■簡単に導入できる新「はてブボタン」をすぐ導入しよう!

です。

このブログを見て、5分以内に設置することもできるはずです。

まだ導入されていない方はこの機会にぜひ!

@3_wa

SPONSORED LINK
1分で設置完了!リニューアルした新「はてブボタン」に変更する簡単な方法[コピペ用サンプルコードあり]