スポンサーリンク

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

投稿日:

本日の人気記事BEST10

所要時間目安: 約 3

はてブボタン

SNS インターネット カスタマイズ ツール 伝えたいこと 備忘録

現在のサイトには企業のホームページやサイト、そして個人のブログやサイトには、
必ずあると言っても過言ではないソーシャル系の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="http://○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○" 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;
 }

以上、

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

-SNS, インターネット, カスタマイズ, ツール, 伝えたいこと, 備忘録

おすすめ記事一部広告

スポンサーリンク


  • この記事を書いた人
  • 最新記事

izu

プロフィールページ詳細

はじめまして、izuと申します。医療ミスにより長胸神経麻痺になってしまい若干の障害がありブログをさせていただいています。旦那との共同運営になりつつありますがよろしくお願いいたします。

Follow Me !

よろしかったらシェアよろしくお願いします。

+ クリックで展開します

おすすめ!!

加圧シェイプで24時間無意識運動状態が可能!! 引き締め効果で魅力的なシルエットをサポート!! 運動している時だけでなく、仕事やプライベート就寝中にも!! 通気性がよく、体の動かしやすい伸縮性のある素材です!! 常に体が引き締まって、着心地いい!! 毎日着たい方用にセットも充実!!

女性必見のバストアップにおすすめ!!

マンガでの商品説明を販売ページに採用しています。 商品のメリットや良さが伝わりやすいです。 ★知名度と信頼度!ニュースアプリや芸能人ブログでも話題! (インスタグラム SmartNews yahoo アメーバ crooz 楽天) ●知名度が高く購入率の高い商品です。 ●ニュースサイトの紹介でも話題となり、有名タレント、モデル等にも使用して頂きブログなどでも紹介されている信頼度の高い商品です。 ●まとめ買いが多いのが特徴です。



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!




Copyright© WordPressデビュー津々浦々 , 2017 AllRights Reserved Powered by AFFINGER4.