読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2)

Web制作
スポンサーリンク

コピペコードをうつす前に、必ず以前のコードをメモ帳にバックアップしておくなどの対策をしておくようにしてください。

シェアボタンを設置する上で、何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします(一応)。

2015/11/21追記:11/20より、ツイッターのシェア数の取得ができなくなりました。(参考:持続的なプラットフォームのための難しい決断 | Twitter Blogs)これにより、ツイッターのシェア数の部分を「Twitter」と表示するように変更しました。
2016/1/11追記2:当ブログのシェアボタンを使っているかたのみ、Twitterのシェア数を表示させるようにする記事を書きました。詳しくは「count.jsoonを使って当ブログのシェアボタンを使っている方のTwitterカウント数を取得する方法 - Yukihy Life」をごらんください。
2016/5/18追記3:Facebookのシェアボタンの不具合を修正しました。詳しくは「【修正お願い!】当ブログのシェアボタンを使っていただいている方のFacebookボタンで不具合が生じています! - Yukihy Life」をごらんください。
2016/8/21追記4:Facebookのシェアボタンの不具合を修正しました。詳しくは「当ブログのシェアボタンを使っていただいている方のFacebookボタンで不具合が生じています2! - Yukihy Life」をごらんください。

こちらは、フラットボタンのカスタマイズです。3Dボタンを設置したい方や、前回ボタンとの違い、カスタマイズの注意点は、

www.yukihy.com

こちらに書いているので良かったらご覧ください。

前回のボタンで、元記事とそれ以外で別々に書いていたら、分かりづらいとの声があったので、こちらはこちらで独立させてできるようにしました。ちなみに3Dボタンとの違いは、HTMLのクラス名とCSSです。

カスタマイズ

カスタマイズをした実相図はこんな感じになります。

PC画面

f:id:ftmaccho:20150911133655p:plain

スマホ画面

f:id:ftmaccho:20150911133634p:plain

最近ラインによるシェアも増えてきていると聞いたことがあるので、スマホ画面にはラインボタンを追加しています(ラインボタンは、スマホでしか機能しないのでスマホ版でしか設置していません)。

ラインボタンに関しての注意点

ラインボタンは、Webフォントがないので、画像を貼ってその背景色と合わせるようにしています。

その画像は、僕が「はてなフォトライフ」にアップロードをした画像を使っています。つまりもし僕がうっかり消去してしまったり、アカウントを消されるようなことがあった場合、アイコンが消える可能性があることはご承知ください。

もし気になる方がいるようでしたら、「設置方法|LINEで送るボタン」からラインの画像をダウンロードし、ご自身のはてなフォトライフにアップロードして画像URLを入れ替えてください。

前回のフラットボタンは、マウスホバー時に色が反転するようにしていましたが、下に書いたようにラインボタンは画像で用意しているため、それができなくなりました。

ホバー時は少し色が透明になるようにしています(よりシンプルになりました!)。

共通設定

コピペコード①

※「コピペコード①」など、番号を振っていますが、旧バージョンの番号と互換性はありません

Googleプラスと、Pocketのアイコンははてな標準では使えないので、「Font Awesome Icons」から取得をします。

コードはこちら

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

これを以下のように、「設定」→「詳細設定」

f:id:ftmaccho:20150530165809j:plain

「headに要素を追加」

f:id:ftmaccho:20150530165822j:plain

にコピペしてください。

選択部分

共通設定が終わったら、下の部分から行いたいものを順次やってみてください。一般的には「PC」と「スマホ」を行えば大丈夫たと思います。レスポンシブの方は、「レスポンシブ設定」のみ行えばOKです。

の3つに分けています。

PC画面

コピペコード②jQuery(PC)

カウント数を取得するjQueryです。以前のものの、PocketとGoogleプラスを消したものになります。

コードはこちら。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の数字-->
<script>
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      jQuery( selcter ).text( res.share.share_count || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
  jQuery.ajax({
    url:'http://api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    },
    success:function(res){
      jQuery( selcter ).text( res || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
jQuery(function(){
  get_social_count_facebook('{Permalink}', '.facebook-count');
  get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>

これを「記事下」にコピペです。

すでにjQueryを読み込んでいる方は、一行目は不要です。

この時点では、何も起こりません。

コピペコード③CSS(pc)

コードはこちら

/*シェアボタン*/
.share-flat{
    margin-bottom: 10px;
    text-align: center;
}
.share-flat-inner a {
    position: relative;
    display: inline-block;
    width: 18%;
    height: 40px;
    line-height: 20px;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
}
.share-flat .small-text{
    font-size: 10px;
}
.share-flat .hatena-bookmark-button{
    background: #00A4DE;
}
.share-flat .twitter-button{
    background: #55ACEE;
}
.share-flat .googleplus-button{
    background: #C53727;
}
.share-flat .facebook-button{
    background: #405BA7;
}
.share-flat .pocket-button{
    background: #EE4256;
}
.share-flat a:hover{
    opacity: 0.6;
}

これを、「デザインCSS」にコピペです。

この状態では、何も変更は起こりません。

コピペコード④HTML(PC)

最後にHTMLです。コピペコードはこちら

<!--シェアボタン-->
<div class="share-flat">
<span style="font-size: 8px">シェアする</span>
<div class="share-flat-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" ><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--Googleプラス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>

これを「記事上」か「記事下」の中から、自分がシェアボタンを付けたい位置にコピペです。(はてなブログの関数の仕様で、サイドバーやフッターなどには設置できません。)

すると以下のようになると思います。

f:id:ftmaccho:20150911133655p:plain

以上で、PC画面は終了です。

各ボタンが機能しているかを確認してください。

スマホ画面

スマホ画面の設定です。こちらにはラインのボタンも加えていきます。

コピペコード②jQuery(スマホ)

シェア数を表示するjQueryです。コードはPCのと全く同じですが、もう一度貼っておきます。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の数字-->
<script>
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      jQuery( selcter ).text( res.share.share_count || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
  jQuery.ajax({
    url:'http://api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    },
    success:function(res){
      jQuery( selcter ).text( res || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
jQuery(function(){
  get_social_count_facebook('{Permalink}', '.facebook-count');
  get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>

以前のカスタマイズでjQueryを読み込んでいる方は、一行目は不要です。

これを「記事下」にコピペしてください。

この時点では、まだ何も起こりません。

コピペコード③HTML+CSS(スマホ)

以前はCSSを記事下に貼り付けてもらっていたのですが、そのせいで記事上のシェアボタンが一瞬だけデザインされるのが遅れている方を結構見たので、HTMLと同じタイミングで読み込むように、こちらに移しました。

コピペコードはこちらです。

<!--シェアボタン-->
<div class="share-flat">
<span style="font-size: 8px">シェアする</span>
<div class="share-flat-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--ググタス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
<!--ライン-->
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/f/ftmaccho/20150905/20150905143148.png" width="18px" height="18px" alt="LINEで送る" /><br><span class="small-text">Line</span>
</a>
</div>
</div>

<style type=text/css>
/*シェアボタン*/
.share-flat{
    margin-bottom: 10px;
    text-align: center;
}
.share-flat-inner a {
    position: relative;
    display: inline-block;
    width: 15%;
    height: 40px;
    line-height: 20px;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
}
.share-flat .small-text{
    font-size: 10px;
}
.share-flat .hatena-bookmark-button{
    background: #00A4DE;
}
.share-flat .twitter-button{
    background: #55ACEE;
}
.share-flat .googleplus-button{
    background: #C53727;
}
.share-flat .facebook-button{
    background: #405BA7;
}
.share-flat .pocket-button{
    background: #EE4256;
}
.share-flat .line-button{
    position:relative;
    top: 2px;
    background: #00C300;
}
.share-flat a:active{
    opacity: 0.6;
}
</style>

これを、自分が設置したい場所(記事上か記事下のどちらか)にコピペすると、以下のようになります。

f:id:ftmaccho:20150911133634p:plain

以上でスマホ画面は終了ですが、いろいろと注意点がありますので、書いておきます。

  • 記事上、記事下の両方にボタンを設置する方は、記事下にはcssの部分は記述しなくてもOKです。

最後に、各ボタンが機能しているか確認してください。

レスポンシブ設定

レスポンシブ設定です。レスポンシブの場合は、PCやタブレットサイズではラインボタンを出さずに、スマホサイズになったらラインボタンを表示させる必要があります。

コピペコード②jQuery(レスポンシブ)

これも上までのものと同じですが、一応、貼っておきます。シェア数を表示させる部分です。

コードはこちら

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の数字-->
<script>
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      jQuery( selcter ).text( res.share.share_count || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
  jQuery.ajax({
    url:'http://api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    },
    success:function(res){
      jQuery( selcter ).text( res || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
jQuery(function(){
  get_social_count_facebook('{Permalink}', '.facebook-count');
  get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>

これを、「記事下」に貼り付けます。

この時点では、何も起こりません。

コピペコード③CSS(レスポンシブ)

コピペコードはこちら

/*シェアボタン*/
.share-flat{
    margin-bottom: 10px;
    text-align: center;
}
.share-flat-inner a {
    position: relative;
    display: inline-block;
    width: 15%;
    height: 40px;
    line-height: 20px;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
}
.share-flat .small-text{
    font-size: 10px;
}
.share-flat .hatena-bookmark-button{
    background: #00A4DE;
}
.share-flat .twitter-button{
    background: #55ACEE;
}
.share-flat .googleplus-button{
    background: #C53727;
}
.share-flat .facebook-button{
    background: #405BA7;
}
.share-flat .pocket-button{
    background: #EE4256;
}
.share-flat .line-button{
    position:relative;
    top: 1px;
    background: #00C300;
}
.share-flat a:hover{
    opacity: 0.6;
}
@media screen and (min-width: 480px) {
    .line-hide{
        display: none;
    }
    .share-flat-inner a{
        width: 18%;
    }
}

これを「デザインCSS」に貼り付けます。

この時点でも、まだ何も起こりません。

コピペコード④HTML(レスポンシブ)

コードはこちら

<!--シェアボタン-->
<div class="share-flat">
<span style="font-size: 8px">シェアする</span>
<div class="share-flat-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--ググタス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
<!--ライン-->
<span class="line-hide">
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/f/ftmaccho/20150905/20150905143148.png" width="18px" height="18px" alt="LINEで送る" /><br><span class="small-text">Line</span>
</a></span>
</div>
</div>

これを、「記事上」「記事下」のどちらかで自分が設置したいところに貼り付けます。

すると、横幅が480px以上ではラインボタンは表示されず

f:id:ftmaccho:20150911133655p:plain

横幅を縮めていき、480px以下になると、ラインボタンが出てくるようになります。

f:id:ftmaccho:20150911133634p:plain

これができてればOKです。

最後に、各ボタンが機能しているか確認してください。

※もしスマホで見たときに横幅が狭くなってデザインが崩れてしまう場合は、デザインが調整できる方はおこなってください。面倒な場合は、ラインボタンは非表示になりますが、PC版に書かれている部分をやっていただければと思います。

トラブル

考えられるトラブルを数点書いておきます。

Pocketのアイコンが出ない…

過去にシェアボタンを使っていただいていたかたに起こるものです。

font awesomeが新しいバージョンになったことで、Pocketのボタンのアイコンを変更しています。

なのでコピペコード①をやりなおしていただくと、解消できます。

ラインボタンが上下にずれる

ラインボタンのみ画像なため、若干他のボタンと上下がずれる可能性があります。

その場合、CSSの中の

.share-flat .line-button{
    position:relative;
    top: 1px;
    background: #00C300;
}

の、「top: 1px」の中の数字をいじってもらえればと思います。

まとめ

一番難しい、シェア数の取得するjQueryは、

nelog.jp

を参考に、一部変更しています。いつもありがとうございます!!

以上がカスタマイズです。今のボタンもしばらくは使えますが、お時間あるときに対応していただければと思います!

質問や設置代行・ブログカスタム依頼などは、お問い合わせ - Yukihy Lifeよりお願いいたします!

3Dボタン

www.yukihy.com

その他のカスタマイズの記事まとめ

www.yukihy.com