らいちのヒミツ基地

公然のひみつ基地です

はてブから消えたTwitterボタンの補完計画〜はてなブログのSNSシェアボタンを自分好みにカスタマイズ

とうじょうじんぶつ

f:id:AzuLitchi:20170724182014p:plain

阿豆らいち:
フリーランスのデザイナー。はてブからTwitterボタンが消えたことに激しく憤ってるらしい。


 

f:id:AzuLitchi:20170724182029p:plain

ミンスクさん:
らいち事務所の作業アシスタントと経理を兼任。らいちの妻。


 

f:id:AzuLitchi:20170824005740p:plain

ATA-b(アタビイ):
いろいろ質問してくるマスコット的キャラのヒミツロボ。


 

 

はてブから消えたTwitterボタンの補完計画

 

azulitchi.hatenablog.jp

 

前回の記事の通り、はてブからTwitterボタンが消えて困ってるのでなんとかしようと思います。

f:id:AzuLitchi:20170825230211p:plain

f:id:AzuLitchi:20170825230220p:plain

f:id:AzuLitchi:20170825230224p:plain

「技術者」って声にだして言うときはだいたい噛みます。

 

はてなブログのSNSシェアボタンを自分好みにカスタマイズ

押せるボタン系は全て角丸4pxを設定し、マンガのコマ割り等と差別化しました。「読者になる」「Twitterでフォロー」ボタンは純正のままにしてあります。

ボタン系デザインを統一する観点から影は排除しました。

はてブからTwitterリンク機能が消えたのを補完するため「この記事に関するツイート」ボタンを設置してエゴサしやすくしてあります。

このボタンを押すことでTwitterでシェアしてくれた方のツイート一覧を見られます。スマホの場合はタップしたあと「最新」のタブにスワイプするとシェアされた時間順にソートされるようです。

【追記】「この記事に関するツイート」を設置するなら5行の追加で済みます

azulitchi.hatenablog.jp

「この記事に関するツイート」を設置するだけなら5行の追加で済みます。上記記事をご参照ください。

以下はSNSシェアボタンとセットで追加する内容となります。

 

header要素

「設定→詳細設定→検索エンジン最適化→headに要素を追加」に下記コードを追加

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

 

PC版記事

「デザイン→カスタマイズ→記事」に行って「記事プレビューを表示」としてから作業するといいです。

「記事上」に以下を追加

<!--SNSシェアボタン-->
<div class="share-buttons">
<span style="font-size: 8px">この記事をシェア</span>
<div class="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> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br> <span class="share-text">Bookmark!</span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br><span class="share-text">Facebook</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a>
<!--Google+-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GooglePlusWindow', '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="share-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="share-text">Pocket</span></a>
<hr />
<!--Twitterエゴサボタンここから-->
<a href="https://twitter.com/search?f=tweets&vertical=default&q={URLEncodedPermalink}" 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 getHatenaBookmarkCount(entryUrl, selcter) {
entryUrl = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl)
$.ajax({
url:entryUrl,
dataType:'jsonp',
}).then(
function(result){ $(selcter).text(result || 0); },
function(){ $(selcter).text('0'); }
);
}
//Facebookのシェア数
function getFacebookCount(entryUrl, selcter) {
entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl)
$.ajax({
url:entryUrl,
dataType:'jsonp'
}).then(
function(result){
if(result.share && result.share.share_count) {
$(selcter).text(result.share.share_count);
} else {
$(selcter).text('0');
}
},
function(){ $(selcter).text('0'); }
);
}
$(function(){
getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
getFacebookCount('{Permalink}', '.facebook-count');
});
</script>

 

<!--SNSシェアボタン-->
<div class="share-buttons">
<span style="font-size: 8px">この記事をシェア</span>
<div class="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> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br> <span class="share-text">Bookmark!</span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br><span class="share-text">Facebook</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a>
<!--Google+-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GooglePlusWindow', '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="share-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="share-text">Pocket</span></a>
</div>
</div>

デザインcssに以下を追加 

/*この記事に関するツイート*/
.share-buttons .inner .twitter-search{ background: #55acee; width: 87%; height: auto; font-size: 12px; padding:4px; line-height: 0px;}.share-buttons .inner .twitter-search .share-text{    font-size: 12px;}
/*share-botton*/.share-buttons{    margin: 8px; padding:8px;    text-align: center; background:#eee;}.share-buttons .inner a {    position: relative;    display: inline-block;    width: 15%;    height: 45px;    line-height: 25px;    font-size: 15px;    text-align: center;    color: #ffffff;    text-decoration: none;    padding:5px;    border-radius: 4px;     -webkit-border-radius: 4px;      -moz-border-radius: 4px;}.share-buttons .inner .share-text{    font-size: 15px;}.share-buttons .inner .hatena-bookmark-button{    background: #008fde;}.share-buttons .inner .hatena-bookmark-button:hover{    background: #1db4eb;}.share-buttons .inner .hatena-bookmark-button:active{    background: #5478a5;}.share-buttons .inner .facebook-button{    background: #305097;}.share-buttons .inner .facebook-button:hover{    background: #4c70ba;}.share-buttons .inner .facebook-button:active{    background: #213254;}.share-buttons .inner .twitter-button{    background: #55acee;}.share-buttons .inner .twitter-button:hover{    background: #83c3f3;}.share-buttons .inner .twitter-button:active{    background: #0285b7;}.share-buttons .inner .googleplus-button{    background: #db4a39;}.share-buttons .inner .googleplus-button:hover{    background: #e47365;}.share-buttons .inner .googleplus-button:active{    background: #a23629;}.share-buttons .inner .pocket-button{    background: #ee4256;}.share-buttons .inner .pocket-button:hover{    background: #f26f7f;}.share-buttons .inner .pocket-button:active{    background: #b5392c;}

これでPC版は完了、次はスマホ版です

スマホ版記事

「デザイン→スマホ→記事」に行って「記事プレビューを表示」としてから作業するといいです。

「記事上」に以下を追加

<style type=text/css>/*シェアボタン*/
.share-flat .share-flat-inner .twitter-search{ background: #55acee; width: 96%; 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: #55ACEE;}.share-flat .googleplus-button{    background: #C53727;}.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="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>
<!--LINE-->
<a href="http://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://mobile.twitter.com/search?q={URLEncodedPermalink}" 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>
//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>
<!--シェアボタン-->
<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>
<!--LINE-->
<span class="line-hide">
<a href="http://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アカウントをわかりやすくしてあります。これも「この人のTwitterをフォローしたい!」と思ったときに、アカウントが発見出来なくて挫折したことがあったからです。

以上のコードはご自由にお使いくださいませ。

コード汚いしもっと改良できると思うので、その辺もご自由にどうぞです。

 

参考にしたページ

カスタマイズについてはこちらの記事を参考にさせていただきました。

www.ituore.com

www.stdio.jp

www.yukihy.com

www.jxkxkx37.com

 

よくわかるHTML5+CSS3の教科書【第2版】

よくわかるHTML5+CSS3の教科書【第2版】

 

 

 

それではまた…さよならいち!・∀・)ノ