+本日の人気記事TOP10+
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法17
- Windows10で動かないアプリを動かす方法213
- カーメイトのエンジンスターターでエラー15表示と対処方法10
- エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー6
- アイドリングストップシステム異常警告灯表示対処方法6
- お風呂の枕バスピローおすすめと自作してみた。5
- シガーライターがない車にシガーライターソケットの付け方と増設方法5
- エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法5
- Windows10起動しない使えないアプリを起動する方法(筆ぐるめなど)4
- 車のハンドルが重い時にできる対処方法4
現在のサイトには企業のホームページやサイト、そして個人のブログやサイトには、
必ずあると言っても過言ではないソーシャル系のSNSボタンです。
その中のはてなブックマークボタンのオリジナルの作成方法についてです。
今回は以下のサイトのはてブボタンが可愛くて参考にさせて頂きました。m(._.*)mペコッ
100記事目なので自由ネコのプロフィール風、自己紹介的な何かを - 自由ネコ ネコ型ブックマークボタンをつくってみました。だまされたと思ってどんどん利用していただけると幸いです。 ...
こちらのブログサイトにあるはてなブックマークボタン(はてブボタン)が可愛くて、
しかも、「ネコ型ブックマークボタンをつくってみました。だまされたと思ってどんどん利用していただけると幸いです。」と書いてありましたので…。
画像のみダウンロードさせて頂きコードをPHPにして当ブログでも使用させていただいてます。
アドセンス336pxPC閲覧記事下表示1つ目コード
+これまでによく読まれている記事一覧クリックでOPEN+
人気記事一覧
車のキーナンバー確認方法。キーレス紛失や壊れた時
148,561件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
105,367件の PV
Windows10,Windows8.1プロダクトキー確認方法
75,488件の PV
Windows10でエラーコード0x800705b4の対処方法
67,219件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
41,164件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整
40,227件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。
38,151件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
37,221件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
36,232件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法
31,411件の PV
車のキーナンバー確認方法。キーレス紛失や壊れた時 148,561件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 105,367件の PV
Windows10,Windows8.1プロダクトキー確認方法 75,488件の PV
Windows10でエラーコード0x800705b4の対処方法 67,219件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 41,164件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整 40,227件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。 38,151件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法 37,221件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 36,232件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法 31,411件の PV
この記事を読まれている方におすすめ一覧クリック
さて、本題の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;
}
以上、
可愛らしいはてなブックマークボタン(はてブボタン)を作成してみてくださいね!(^_-)-☆!!。
(参考程度にカスタマイズしてください。)
/* はてぶ */
.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;
}
以上、
可愛らしいはてなブックマークボタン(はてブボタン)を作成してみてくださいね!(^_-)-☆!!。
おすすめの記事一部広告
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法17
- Windows10で動かないアプリを動かす方法213
- カーメイトのエンジンスターターでエラー15表示と対処方法10
- エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー6
- アイドリングストップシステム異常警告灯表示対処方法6
- お風呂の枕バスピローおすすめと自作してみた。5
- シガーライターがない車にシガーライターソケットの付け方と増設方法5
- エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法5
- Windows10起動しない使えないアプリを起動する方法(筆ぐるめなど)4
- 車のハンドルが重い時にできる対処方法4
おすすめ!!
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
Multiplex 広告
あなたにおすすめ
-
AdSense STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ スマホ 伝えたいこと 備忘録
スマホやモバイル端末でサイドバー非表示・削除にする方法
これまでいろいろなことをブログのカスタマイズについて考えてきました。 現在のブログにおいてはレスポンシブデザインに対応しているサイト・ブログがほとんどかと思われます。 その際に、ブログの場合(当ブログ…
インフィード広告アドセンス
-
AdSense インターネット 伝えたいこと 備忘録 時事ネタ
YouTubeの“広告ブロック対策”日本でも本格化
YouTubeの閲覧や視聴には収益化されているユーザーもいると思いますが、収益化していないユーザーの方が多いのではないでしょうか。昔にも思っていたのですが、YouTubeやFC2動画や無料サイト作成サ…
インフィード広告アドセンス
-
年末年始ボーナス商戦ダイヤモンド特集一覧ちょっと贅沢に艶やかに!!
もう12月になって数日過ぎてしまいました。12月と言ったらボーナス商戦でお店やデパートなど年末年始商戦やクリスマス商戦でセール品や特価品、 そして、お買い得商品などなどいろいろな手で売り上げアップを目…
インフィード広告アドセンス
-
SNS終わりの始まり…。それは何なのか。ソーシャルとは何なのか。
SNS(ソーシャル・ネットワーキング・サービス)・・・。 個人情報保護法・・・。 個人情報保護法ができたはずなのに、SNSというソーシャル・ネットワーキング・サービスと横文字を連ねたことにより比較的抵…
「SNS, インターネット, カスタマイズ, ツール, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧
アドセンス336pxPC閲覧記事下表示1つ目コード
アクセスランキング
よろしかったらシェアよろしくお願いします。
-SNS, インターネット, カスタマイズ, ツール, 伝えたいこと, 備忘録
[…] infovarious.com […]