クリアメモリ

プログラミングやモーショングラフィックス、便利なアプリケーションなど雑多に記録するブログ

【はてなブログ】SNSシェアボタンを記事下に設置するカスタマイズ方法

f:id:clrmemory:20170524062211p:plain

はてなブログで記事を公開してユーザーの方に読んでもらった時、TwitterやFacebookなどのSNSでシェアしてもらいたいですよね。

 

読んでくれた方がシェアしようと思っても、そもそもシェアボタンが設置されていなかったらせっかくの機会を失います。

そこで今回は、はてなブログで記事下にSNSシェアボタンを設置するカスタマイズ方法を紹介します。

 

はじめに

 

今回紹介する方法は、はてなブログの記事下にシェアボタンを設置するカスタマイズです。

はてなブログのデザインから設置する方法と、記事下のHTMLにコードを追加して表示する方法があるのですが、記事下にコードを追加した場合はシェアボタンのスタイルを細かく調整できます。

 

どちらか選択して設置してみてください。

ではまず、はてなブログで設定するカスタマイズから見ていきましょう。

 

デザインから設置

 

1つ目の方法は、はてなブログのデフォルトで設置できる方法です。
難しいコードが書きたくない方や、簡単に管理したい方はこちらの方法を試してみてください。

 

ただ、個人的にはHTMLから設置して自由にカスタマイズする方法をお勧めします。

 

では、はてなブログの管理画面から【デザイン】を選択して、【記事】をクリックしてください。

 

f:id:clrmemory:20170524042622p:plain

 

幾つかの項目が表示されるのですが、その中に【ソーシャルパーツ】という項目があるので、その中からブログ内に設置したいシェアボタンにチェックを入れましょう。

 

f:id:clrmemory:20170524042840p:plain

 

今回は

  1. はてぶ
  2. Facebook
  3. Twitter
  4. Google+
  5. Pocket

を表示させてみます。

 

f:id:clrmemory:20170524043118p:plain

 

このようにチェックできたら、続いて記事内に設置する位置を設定していきます。

 

さらに下へスクロールすると【表示設定】という項目があるので、ここから記事上下に設置するか記事下のみに設置するかを決めることができます。

 

f:id:clrmemory:20170524043314p:plain

 

これだけでシェアボタンが設置できました。

 

f:id:clrmemory:20170524043427p:plain

 

これだけで簡単に設置することができたのですが、高さががたついていたりシェアを誘導するテキストがなかったり味気ないですよね。

そこで、HTMLから設置することで、自由にカスタマイズされたシェアボタンにすることができます。

 

コードで設置する

 

今回の方法はこちらのサイト様を参考に設置させていただきました。 ありがとうございます。

 

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

 

では、実際のコードを確認してください。

 

まずはGoogle+のアイコンを取得

 

はてなブログのシェアボタンでGoogle+とPocketのアイコンを表示させる場合、以下のコードを記述しておく必要があります。

 

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

 

はてなブログの管理画面を表示して、設定 > 詳細設定 > headに要素を追加 欄に貼り付けておいてください。

 

f:id:clrmemory:20170524044901p:plain

 

このようにしておくことで、Google+とPocketのアイコン画像をはてなブログで使用できるようになりました。

 

シェアボタンを設置しよう

 

続いて実際にシェアボタンを表示する方法に入ります。

以下のコードをデザインの記事下に貼り付けてください。

<!--シェアボタン-->
<div class="share-flat">
    <span style="font-size: 16px">シェアする</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>
    </div>
</div>

 

このコードを追加すると、以下のようなボタンが表示されました。

 

もし記事上と記事下の両方に表示したい場合は、デザインから両方に貼り付けておきましょう。

 

f:id:clrmemory:20170524050001p:plain

 

ここで注意点なのですが、このコードを設置できるのは【記事上】か【記事下】です。サイドバーやフッターに記述しても、うまく機能しないので注意してください。

 

ちなみにフッターなどにコードを追加した場合、ぱっと見はうまくいっているように思うのですが、シェアしようとしてもタイトルやURLを取得できません。

 

f:id:clrmemory:20170524050047p:plain

 

これは、記事上や記事下でのみ機能する【はてな特有の機能】があるためですね。

例 : {Title}

 

シェア数を表示しない場合

 

もし、設置したシェアボタンにシェア数を表示させない場合は、先ほどのコードを以下のように書き換えてみてください。

 

<!--シェアボタン-->
<div class="share-flat">
    <span style="font-size: 16px">シェアする</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></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></a>
        <!--Twitter-->
        <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br></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></a>
        <!--Pocket-->
        <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br></a>
    </div>
</div>

 

こちらのコードを使えば、シェア数が表示されなくなりました。

環境に合わせて使い分けてみてください。

 

シェア数を取得する

 

はてなブックマークやFacebookでシェアされた回数を取得するためには、以下のコードを追加する必要があります。

先ほどと同様、【記事下】に追加してください。

<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のコードは、すでに記述されている場合は不要です。

 

このようなコードを追加することで、はてなブックマークとFacebookのシェア数を取得できるようになりました。

実際に確認してみましょう。

 

f:id:clrmemory:20170524051535p:plain

 

先ほどはシェア数が取得できないためスピナー(くるくる回ってるやつ)が表示されていたのですが、HTMLに追記したことでシェア数が取得できました。

 

スタイルを調整

 

最後にシェアボタンのスタイルを調整していきましょう。

 

スタイルは自由にカスタマイズできるのであくまで一例ですが、今回は以下のようなcssを用意してみました。

 

f:id:clrmemory:20170524053838p:plain

 

.share-flat {
    overflow: hidden;
    margin-bottom: 30px;
}
.share-flat-inner a {
    box-sizing: border-box;
    width: 20%;
    float: left;
    text-align: center;
    text-decoration: none;
    border: 1px solid black;
    background-color: white;
    color: black;
    transition: background-color 0.4s ease-in-out 0s;
}
.share-flat-inner a:hover{
    background-color: black;
    color: white;
}
.share-flat-inner a:nth-child(2),
.share-flat-inner a:nth-child(4){
    border-left: 0;
    border-right: 0;
}

 

このようなコードをデザインの【デザインCSS】の中に貼り付けてください。

 

※デザインCSSの上部に表示されているコードは削除しないでください。テーマの設定が初期化されてしまう可能性があります。

 

スタイルのカスタマイズは自由にできるため、今回はこれだけ紹介しました。

自分好みのカスタマイズをしたい方は、CSSを編集してみてください。

 

まとめ

 

今回紹介したように、HTMLからシェアボタンを設置することで、シェア数やデザインなどを自由にカスタマイズできるようになりました。

 

シェアボタンの設置は、コンテンツの拡散において重要になってくると思いますので、まだシェアボタンを設置していないという方はぜひ試してみてください。

 

ではまた。