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

現在のサイトには企業のホームページやサイト、そして個人のブログやサイトには、
必ずあると言っても過言ではないソーシャル系のSNSボタンです。

その中のはてなブックマークボタンのオリジナルの作成方法についてです。

今回は以下のサイトのはてブボタンが可愛くて参考にさせて頂きました。m(._.*)mペコッ

100記事目なので自由ネコのプロフィール風、自己紹介的な何かを - 自由ネコ ネコ型ブックマークボタンをつくってみました。だまされたと思ってどんどん利用していただけると幸いです。 ...

こちらのブログサイトにあるはてなブックマークボタン（はてブボタン）が可愛くて、
しかも、「ネコ型ブックマークボタンをつくってみました。だまされたと思ってどんどん利用していただけると幸いです。」と書いてありましたので…。

画像のみダウンロードさせて頂きコードをPHPにして当ブログでも使用させていただいてます。

スポンサーリンク

目次に戻る

さて、本題のPHPによるオリジナルな「はてなブックマークボタン（はてブボタン）」のコードですが、以下になります。

<a href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php the_title(); ?>"><img src="https://○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○" alt="このエントリーをはてなブックマークに追加" width="300" height="207" style="border: none;" /></a>
 <?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>

基本的には、
赤いアンダーラインの画像サイズの指定の部分までで大丈夫なのですが、
シェアして頂いた時にカウント数を表示させたい場合はそれ以降も記述します。

黄色アンダーラインのところは、
自分でダウンロードしたり用意した画像の自分で使用しているサーバーにアップロードしたURLを記述してください。

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

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

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; }

以上、

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