Loading…

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

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

はてブボタン

所要時間目安:3

This session is using  IPv4  is established in

この記事は2016年6月24日のものです。現在は状況が異なる可能性がありますのでご注意ください。

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

目次に行く・戻る

メルカリ招待コード:

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

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

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

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

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

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

 

アドセンス336pxPC閲覧記事下表示1つ目コード


この記事を読む方へのオススメ


さて、本題の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;
 }

以上、

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

お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめの記事一部広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

あなたにおすすめ

20周年サイトとBIGLOBE30周年記念サイト

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

20周年記念サイトの続集編

先日、 20周年記念サイトや30周年記念のBIGLOBE(前進企業から数えて)の紹介をしました。 その続きとなります。 これらの他にも未知のサイトや企業など多くあるかもしれませんが、 現在、知りうる限…

もっと読む

インフィード広告アドセンス

Windows10無償アップグレード後もアップグレードが可能でする方法

PC Windows10 アップグレード 伝えたいこと 備忘録 時事ネタ

Windows10無償アップグレード期間過ぎてもアップグレード方法(今のところ可能)

以前に、Windows10の無償アップグレード期間が昨年2015年7月29日にWindows10がリリースされてから、 1年間は無償アップグレード期間となっていました。 実際に、 その通りに終了した模…

もっと読む

インフィード広告アドセンス

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

YouTubeの“広告ブロック対策”日本でも本格化

YouTubeの閲覧や視聴には収益化されているユーザーもいると思いますが、収益化していないユーザーの方が多いのではないでしょうか。昔にも思っていたのですが、YouTubeやFC2動画や無料サイト作成サ…

もっと読む

インフィード広告アドセンス

記事上に人気記事表示

Stinger6 WordPress カスタマイズ テーマ 不具合

また右サイドバー上にWidgetLogicで設定したのに表示されない

前回、 右サイドバー上部にStinger6(Stinger5でもほぼ共通)でWidgetLogicプラグインにて異なる広告が表示されるように設定したのに、 なぜか表示される記事とされない記事があるのは…

もっと読む

インフィード広告アドセンス

ストレートネック枕

Android iPhone スマホ 伝えたいこと 備忘録 治療

ストレートネック症状と原因そして治し方など

昨今、首の骨(頚椎)の正常な彎曲がなくなって7個(C1からC7)の首の骨がその名の通りまっすぐになっているストレートネックが注目されています。 ですが、 このストレートネックは昔からあるもので最近にな…

もっと読む

インフィード広告アドセンス

新しいアフィリエイト

メンテナンス 伝えたいこと 備忘録 時事ネタ

新しい事を初める準備や片付けって意外と面倒で時間がかかる…。

なんでもそうですが、新たに新しいことを始める時に(家の配置替えや片付けや家電の買い替えやいろいろ)これまであったものを整理整頓して、新しいものを迎え入れたいと思います。 そんなこんなでこれまでにあった…

もっと読む

Total212


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください