【2018年SSL化対応版】はてなブログのSNSシェアボタンを自分好みにカスタマイズ
こちらのSNSシェアボタンカスタマイズは2018年SSL化の対応版となります。
Google+は2019年4月にサービス終了となるので削除しました。
2019年4月のFacebook仕様変更により、Facebookのシェア数は開発者向けFacebookでアクセストークンを取得しなくてはならなくなったので、ひとまずカウント表示を廃止にしました。
Facebookのシェア数表示をしたい場合は下記の記事を参照してください。
- 【2018年SSL化対応版】はてなブログのSNSシェアボタンを自分好みにカスタマイズ
- とうじょうじんぶつ
- はてブから消えたTwitterボタンの補完計画
- はてなブログのSNSシェアボタンを自分好みにカスタマイズ
- header要素
- PC版記事
- スマホ版記事
- 工夫したところ
- 参考にしたページ
※2017/11/29時点で、はてブにTwitterボタンが復活しました。
※2019/07/23Twitterの仕様変更に伴い、エゴサボタンのコードを修正しました。
とうじょうじんぶつ
阿豆らいち：
フリーランスのデザイナー。はてブからTwitterボタンが消えたことに激しく憤っていた。
ミンスクさん：
らいち事務所の作業アシスタントと経理を兼任。らいちの妻。
ATA-b（アタビイ）：
いろいろ質問してくるマスコット的キャラのヒミツロボ。
はてブから消えたTwitterボタンの補完計画
前回の記事の通り、はてブからTwitterボタンが消えて困ってるのでなんとかしようと思います。
「技術者」って声にだして言うときはだいたい噛みます。
はてなブログのSNSシェアボタンを自分好みにカスタマイズ
- 押せるボタン系は全て角丸4pxを設定し、マンガのコマ割り等と差別化しました。「読者になる」「Twitterでフォロー」ボタンは純正のまま。
- ボタン系デザインを統一する観点から影は排除。
- はてブからTwitterリンク機能が消えたのを補完するため「この記事に関するツイート」ボタンを設置。このボタンを押すことでTwitterでシェアしてくれた方のツイート一覧を見られます。スマホの場合はタップしたあと「最新」のタブにスワイプするとシェアされた時間順にソートされるようです。
「この記事に関するツイート」を設置するなら5行の追加で済みます
「この記事に関するツイート」を設置するだけなら5行の追加で済みます。上記記事をご参照ください。
以下はSNSシェアボタンとセットで追加する内容となります。
header要素
「設定→詳細設定→検索エンジン最適化→headに要素を追加」に下記コードを追加
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
アイコンフォントを読み込みます。
PC版記事
「デザイン→カスタマイズ→記事」に行って「記事プレビューを表示」としてから作業するといいです。
「記事上」に以下を追加
<style type=text/css>/*シェアボタン*/
.share-flat .share-flat-inner .twitter-search{ background: #1DA1F2; width: 76%; height: auto; font-size: 12px; padding:4px; line-height: 0px;}.share-flat .share-flat-inner .twitter-search .share-text{ font-size: 12px;}.share-flat{ margin-bottom: 10px; text-align: center;}.share-flat-inner a { position: relative; padding:2px 0px; display: inline-block; width: 15%; height: 40px; line-height: 20px; border-radius: 4px; 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: #1DA1F2;}.share-flat .facebook-button{ background: #405BA7;}.share-flat .pocket-button{ background: #EE4256;}.share-flat .line-button{ background: #00C300;}.share-flat a:active{ opacity: 0.6;}
</style>
<!--シェアボタン-->
<div class="share-flat"><span style="font-size: 8px">この記事をシェアする</span><div class="share-flat-inner">
<!--はてブ-->
<a href="https://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="https://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="small-text">Facebook</span></a>
<!--Twitter-->
<a href="https://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>
<!--Pocket-->
<a href="https://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>
<!--LINE-->
<a href="https://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button" target="_blank"><i class="fa fa-comment"></i><br><span class="small-text">LINE</span></a>
<!--Twitterエゴサボタンここから-->
<hr /><a href="https://twitter.com/search?q={URLEncodedPermalink}&f=live" class="twitter-search" target="_blank"><i class="blogicon-twitter lg"></i><span class="share-text"> この記事に関するツイート</span></a>
<!--Twitterエゴサボタンここまで-->
</div></div>
エゴサボタン不要な方は<!--Twitterエゴサボタンここから-->〜<!--Twitterエゴサボタンここまで-->を削除してください。
「記事下」に以下を追加
<!--JQueryを使用-->
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<!--シェア数の取得-->
<script>
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
jQuery.ajax({
url:'https://b.hatena.ne.jp/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_hatebu('{Permalink}', '.hatebu-count');
});
</script>
<!--シェアボタン-->
<div class="share-flat">
<span style="font-size: 8px">この記事をシェアする</span>
<div class="share-flat-inner">
<!--はてブ-->
<a href="https://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="https://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="small-text">Facebook</span></a>
<!--Twitter-->
<a href="https://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>
<!--Pocket-->
<a href="https://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>
<!--LINE-->
<span class="line-hide">
<a href="https://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button" target="_blank"><i class="fa fa-comment"></i><br><span class="small-text">LINE</span></a>
</span>
</a>
</div>
</div>
スマホ版記事
レスポンシブデザインモードになっていれば以上で設定完了です。
レスポンシブデザインのテーマにしていない場合はスマホ版記事にも同じ設定をする必要があります。
「デザイン→スマホ→記事」に行って「記事プレビューを表示」としてから記事上と記事下に同じコードを貼りつけてください。
以上のコードはサポートはしませんがご自由にお使いくださいませ。
コード汚いしもっと改良できると思うので、その辺もご自由にどうぞです。
工夫したところ
JQueryの読み込み先をはてな純正と揃えました。バージョンの違うJQueryをあちこちから読み込むのもコンフリクト起こしそうなので…。これで読み込みが数十kb軽くなったはずです。
私はページ内の上下に「読者になる」ボタンを設置してあります。私が他のブログを読んでて「読者になりたい！」と思ったときに、ボタンが発見できなくて挫折したことが数回あったからです。
また、できるだけ私のTwitterアカウントをわかりやすくしました。これも「この人のTwitterをフォローしたい！」と思ったときに、アカウントが発見出来なくて挫折したことがあったからです。
シェアボタンについては実際は各サービスのロゴ使用規定が厳密にあります。あまり厳密にやるとボタンデザインが厳し過ぎるのですが、各サービスへの敬意を込めて、せめてアイコンに斜体やドロップシャドウなどの装飾はかけず、コーポレートカラーはそのまま使うようにしたいと考えております。
参考にしたページ
カスタマイズについてはこちらの記事を参考にさせていただきました。
それではまた…さよならいち！・∀・)ノ
