Loading…

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

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

本日の人気記事BEST10

所要時間目安:3


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

以上、

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


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

同じカテゴリーの記事一覧


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

同じカテゴリ人気記事

おすすめの記事一部広告

関連記事

ニュースとは何か

伝えたいこと 備忘録

ニュースとは。NEWSとは?どういう意味なのか考察…。

ニュース…単語のみの意味を考察すると…。   ニュースとは よく読まれている人気記事一覧 人気記事 車のキーナンバー確認方法。キーレス紛失や壊れた時122.9k件のビュー ECUをリセットす…

もっと読む

尾木ママ

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

大和君発見良かった。尾木ママブログに批判殺到みたいだが…。

この1周間北海道の7才の男児の大和君が本日(6月3日)の早朝に無事に発見されました。良かった!! しかし、 この発見される数日前に教育評論家で「ホンマでっかTV」などで有名になった尾木ママこと尾木直樹…

もっと読む

FFFTP

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

FFFTP1.99最新バージョン正式版がリリースされました

FTPソフトと言えば? Windows98の頃からある(昔)からあるffftp(FFFTP)だと思います。 IBMホームページビルダーなど有償アプリケーションなどには基本的にメーカーが作成したFTPソ…

もっと読む

RSSフィード画像

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

RSSにアイキャッチ画像を表示させる方法ができると思ったのに再度検証中…。

先程の記事にて、試してみたのですがBloggerのRSSフィードには・・・・・・。 の以前に、ブログ表示上の左上に「続きを読む…。」と表示されてしまいました。orz まだ、時間が経っていないからかBl…

もっと読む

目次に戻る

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

おすすめ!!

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

おすすめ2

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

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



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

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

言えないことはTwitterで!!



目次に戻る

目次に戻る


コメントを閉じる

comment

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

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