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

投稿日:


本日の人気記事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, インターネット, カスタマイズ, ツール, 伝えたいこと, 備忘録

関連記事一部広告

スポンサーリンク

+ クリックで展開します

おすすめ!!

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

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

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

関連記事

Windows10ポップアップ通知

PC Windows10 伝えたいこと 備忘録 時事ネタ

Windows10アップグレード通知、ウイルスかとも…。あまりに酷すぎて(強引とも…。)

Windows10が正式にリリースされてから10ヶ月と半月になります。 3月後半ころから多くのWindows7とWindows8(Windows8.1)ユーザー(ユーザ)から悲鳴のような声が上がってい・・・続きを読む

いまさら聞けない横文字

伝えたいこと 備忘録 時事ネタ

いまさら人に聞けない横文字の意味ランキング

ここ数年で、多くの政治家や起業家さんたちそして、はたまたマスメディアにおいてもカッコイイ横文字(カタカナ英語)をよく聞いたり目にしたりすることが多くなっていると思います。 そんな中で、 私的に勝手にい・・・続きを読む

アイキャッチ画像自動設定

インターネット 伝えたいこと 備忘録

ブログSEO対策方法など気にせずやっていきたいけれど気になっちゃう…。

ブログやホームページなどを運営していく中で、誰もが気にしたことがあると思われるSEO…。俗にいうサーチエンジン対策があると思います。(正式には、Search Engine Optimization:サ・・・続きを読む

24時間営業深夜営業

伝えたいこと 備忘録 時事ネタ

24時間営業ファミレスは転換期なのか?見直している企業など

そもそも24時間営業という店舗や企業が出てきたのは、バブルがはじける少し前かバブルがはじけてから多くの企業が海外進出のグローバリゼーション化(グローバル化)と共に多くなってきました。 そこで、当時はセ・・・続きを読む

目次に戻る

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



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

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

言えないことはTwitterで!!



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

izumi

プロフィールページ詳細

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

Follow Me !

Copyright© WordPressデビュー津々浦々 , 2019 All Rights Reserved Powered by AFFINGER5.