はてブボタンオリジナル作成方法

はてなブックマーク公式サイトにはてブボタンの作成するサイトがありますが、

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

PHPではないので参考にしながらPHPで動作するようにしてみました。

今回紹介した方法ではてなブックマークボタン（はてブボタン）の表示のされ方は、
既にこの記事の上下にありますが、以下のようになります。

可愛らしいネコちゃんの画像自体がはてブボタンになっています。
（これは参考にさせて頂いた上記ブログのスクリーンショット（スクショ）です。m(._.*)mペコッ）

他に、画像は要らない場合の基本的なPHPコードとしては以下になります。

<a href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php the_title(); ?>"><span style="font-weight:bold" class="fa-hatena">B!</span><span class="snstext <?php echo $plug; ?>" >はてブ</span>
 <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':'<span class="snscount"><span class="hatebno">'.scc_get_share_hatebu().'</span></span>';
 ?></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

上記の場合はCSSにて調整の必要があります。

当ブログでははてブボタンのCSSは以下のようにしています。

（参考程度にカスタマイズしてください。）

/* はてぶ */
 .sns .hatebu a {
 background:#00a5de;
 }

.sns .hatebu a:hover {
 background:#008cbd;
 }

.sns .hatebu .snstext {
 border-left:1px solid #48B6DB;
 padding-left:10px;
 margin-left:3px;
 }

以上、

可愛らしいはてなブックマークボタン（はてブボタン）を作成してみてくださいね！(^_-)-☆！！。