【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2

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

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

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

シェアボタンを多くの方に使っていただいていて、とても嬉しいです。ただ一つ申しわけないのが、以前から告知していたように現在使われているシェアボタンは9/30日以降、不具合が生じる可能性があります。

この記事は、3Dボタン用のコードです。フラットボタンはこちら

www.yukihy.com

からどうぞ。

具体的に生じる不具合
前回のボタンとの違い
カスタマイズ
共通設定
- コピペコード①
選択部分
トラブル
- Pocketのアイコンが出ない…
- ラインボタンが上下にずれる
まとめ

具体的に生じる不具合

前回記事 www.yukihy.com

で具体的に生じる不具合は、

GoogleプラスとPocketのシェア数が表示されず、(現在グルグル回るタイプのボタンは)ずっとグルグル回りっぱなしになる

というものです。これは、それらのシェア数を取得するのに依存していたサービスが終了してしまうことに起因します。

参考：http://pipes.yqlblog.net/post/120705592639/pipes-end-of-life-announcement

他にシェア数を取得する方法は、あるのかもしれないですが現状の自分ではできないので、これら２つのシェア数は表示しないという方向で新たなボタンをコピペコードにしています。

9/30までまだ時間がありますので、お時間あるときに変更をお願いします。

今回は、一番使われている3Dボタンのコードです。この後はフラットデザインもすぐにコードにする予定です。

前回のボタンとの違い

前回のボタンとは、以下の点で違います。

GoogleプラスとPocketのシェア数を非表示
スマホにラインボタンを設置
ボタンが多くなったので、デザインの若干の変更

です。上の説明のみで具体的にいじるところが分かる方は、ご対応お願いします。

カスタマイズ

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

PC画面

f:id:ftmaccho:20150907182832p:plain

スマホ画面

f:id:ftmaccho:20150907184515p:plain

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

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

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

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

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

共通設定

コピペコード①

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

Googleプラスと、Pocketのアイコンははてな標準では使えないので、「http://fortawesome.github.io/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です。

ページ内リンク
PC画面の設定はここから
スマホ画面の設定はここから
レスポンシブの設定はここから

の３つに分けています。

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-3d{
    margin-bottom: 10px;
    text-align: center;
}
.share-3d-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-3d .small-text{
    font-size: 10px;
}
.share-3d .hatena-bookmark-button{
    background: #00A4DE;
    box-shadow: 0 3px #43638b;
}
.share-3d .twitter-button{
    background: #55ACEE;
    box-shadow: 0 3px #0092ca;
}
.share-3d .googleplus-button{
    background: #C53727;
    box-shadow: 0 3px #ad3a2d;
}
.share-3d .facebook-button{
    background: #405BA7;
    box-shadow: 0 3px #2c4373;
}
.share-3d .pocket-button{
    background: #EE4256;
    box-shadow: 0 3px 0 #c0392b;
}
.share-3d a:active{
    top: 3px;
    box-shadow: none;
}
.share-3d .hatena-bookmark-button:active{
    background: #43638b;
}
.share-3d .twitter-button:active{
    background: #0092ca;
}
.share-3d .googleplus-button:active{
    background: #ad3a2d;
}
.share-3d .facebook-button:active{
    background: #2c4373;
}
.share-3d .pocket-button:active{
    background: #c0392b;
}

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

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

コピペコード④HTML(PC)

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

<!--シェアボタン-->
<div class="share-3d">
<span style="font-size: 8px">シェアする</span>
<div class="share-3d-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:20150907182832p: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-3d">
<span style="font-size: 8px">シェアする</span>
<div class="share-3d-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-3d{
    margin-bottom: 10px;
    text-align: center;
}
.share-3d-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-3d .small-text{
    font-size: 10px;
}
.share-3d .hatena-bookmark-button{
    background: #00A4DE;
    box-shadow: 0 3px #43638b;
}
.share-3d .twitter-button{
    background: #55ACEE;
    box-shadow: 0 3px #0092ca;
}
.share-3d .googleplus-button{
    background: #C53727;
    box-shadow: 0 3px #ad3a2d;
}
.share-3d .facebook-button{
    background: #405BA7;
    box-shadow: 0 3px #2c4373;
}
.share-3d .pocket-button{
    background: #EE4256;
    box-shadow: 0 3px 0 #c0392b;
}
.share-3d .line-button{
    position:relative;
    top: 2px;
    background: #00C300;
    box-shadow: 0 3px 0 green;
}
.share-3d .share-3d a:active{
    top: 3px;
    box-shadow: none;
}
.share-3d .line-button:active{
    top: 5px;
}
</style>

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

f:id:ftmaccho:20150907184515p: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-3d{
    margin-bottom: 10px;
    text-align: center;
}
.share-3d-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-3d .small-text{
    font-size: 10px;
}
.share-3d .hatena-bookmark-button{
    background: #00A4DE;
    box-shadow: 0 3px #43638b;
}
.share-3d .twitter-button{
    background: #55ACEE;
    box-shadow: 0 3px #0092ca;
}
.share-3d .googleplus-button{
    background: #C53727;
    box-shadow: 0 3px #ad3a2d;
}
.share-3d .facebook-button{
    background: #405BA7;
    box-shadow: 0 3px #2c4373;
}
.share-3d .pocket-button{
    background: #EE4256;
    box-shadow: 0 3px 0 #c0392b;
}
.share-3d .line-button{
    position:relative;
    top: 1px;
    background: #00C300;
    box-shadow: 0 3px 0 green;
}
.share-3d .share-3d a:active{
    top: 3px;
    box-shadow: none;
}
.share-3d .line-button:active{
    top: 4px;
}
@media screen and (min-width: 480px) {
    .line-hide{
        display: none;
    }
    .share-3d-inner a{
        width: 18%;
    }
}

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

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

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

コードはこちら

<!--シェアボタン-->
<div class="share-3d">
<span style="font-size: 8px">シェアする</span>
<div class="share-3d-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:20150907191454p:plain

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

f:id:ftmaccho:20150907191556p:plain

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

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

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

トラブル

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

Pocketのアイコンが出ない…

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

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

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

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

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

その場合、CSSの中の

.share-3d .line-button{
    position:relative;
    top: 1px;
    background: #00C300;
    box-shadow: 0 3px 0 green;
}

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

まとめ

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

http://nelog.jp/sns-buttons-on-ajaxnelog.jp

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

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

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