たった一行のhtmlではてなブログにフォローボタンを設置する方法

たった一行ではてなブログにフォローボタンを設置する方法を思いついたので解説します。
はてなブロガーなら最低限はてなidはあるので、feedlyと合わせて2つは表示できると思います。Twitterもあると記事拡散が違いますね！
さらにInstagramとFacebook、合計5個まで表示対応。ボタンの個数に合わせてボタン幅が自動的に制御されます。

f:id:AzuLitchi:20190216002107j:plain

たった一行ではてなブログにフォローボタンを設置する方法

設置したい場所にこのhtmlを記入するだけ。
記事上でも記事下でも記事の中でもOK。複数箇所でも大丈夫。

<span class="follow-btn-box"></span>

5個フルに貼ってサイドバーモジュールやスマホで表示壊れるようならこっちをどうぞ。

<!--小さいフォローボタン-->
<div class="follow-btn-box-s"></div>

こんなボタンが表示されます（実際にコード埋め込んでます）

5個全部設置するとこんな感じに。

（これは画像です）

たった一行で…？

f:id:AzuLitchi:20190216001114j:plain

ええ、ただし準備が必要。

JavaScriptをフッタに設置

下記コードをダッシュボードの「カスタマイズ→フッタ」に追加。

○○の4箇所、自分の各IDはご自身でお願いします
（ID持ってない箇所は○○を削除して""だけにする）。

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<script>
//フォローボタン　設定は下記の4箇所
var hatenaID="○○";//はてなID
var TwitterID="○○";//TwitterのID
var InstaID="○○";//InstagramのID
var facebookID="○○";//facebookのID

var myURL =$(location).attr('host');
var BlogURL = $(location).attr('protocol') +'//'+myURL;
var idArray = [hatenaID,TwitterID,InstaID,facebookID,"feedly"];
var btnWidth = 0;
for (var i = 0, len = idArray.length; i < len; ++i) { if(idArray[i]){btnWidth++;}}
btnWidth = Math.floor(99/btnWidth)+'%';

var followbtn ='<div class="follow-btn-caption">follow me!</div><div class="follow-btn" >';
if(idArray[0]){followbtn += '<a class="follow-hatena" href="https://blog.hatena.ne.jp/'+hatenaID+'/'+myURL+'/subscribe"  target="_blank"><i class="blogicon-hatenablog lg"></i><br><span>id:'+hatenaID+'</span></a>';}
if(idArray[1]){followbtn += '<a class="follow-twitter" href="https://twitter.com/intent/follow?screen_name='+TwitterID+'" target="_blank"><i class="blogicon-twitter lg"></i><br><span>@'+TwitterID+'</span></a>';}
if(idArray[2]){followbtn += '<a class="follow-insta" href="https://www.instagram.com/'+InstaID+'?ref=badge"><i class="blogicon-instagram lg"></i><br><span>'+InstaID+'</span></a>';}
if(idArray[3]){followbtn += '<a class="follow-facebook" href="https://www.facebook.com//'+facebookID+'?ref=badge"><i class="blogicon-facebook lg"></i><br><span>facebook</span></a>';}
followbtn += '<a class="follow-feedly" href="http://feedly.com/i/subscription/feed%2F'+encodeURIComponent(BlogURL)+'%2Ffeed" target="_blank"><i class="blogicon-rss lg"></i><br><span>Feedly</span></a></div>';
$('.follow-btn-box').append(followbtn);
$('.follow-btn-box-s').append(followbtn);

$('.follow-btn a').css('width', btnWidth);
</script>

ボタンの個数に応じてwidthの調整まで含めて上記コードで行う仕様。

設定の箇所は私のブログではこんな感じです。

設定例

var hatenaID="Azulitchi";//はてなID
var TwitterID="Azulitchi";//TwitterのID
var InstaID="azulitchi";//InstagramのID
var facebookID="";//facebookのID

f:id:AzuLitchi:20190216001129j:plain

実はさらに準備が…いや、条件付きで！

cssの設置

デザイン→cssに以下を追加。

ただし、拙作SteamPunkテーマには内包済みなのでSteamPunkテーマをご利用の方は以下のコードコピペ作業は不要です。

/*--------------------------------------
 フォローボタン
--------------------------------------*/
.follow-btn-caption{
	text-align: center;
}
.follow-btn-caption:before{
    font-family: "blogicon";
    content: "\f727";
	margin-right:4px;
    font-size: 16px;
}
.follow-btn{
	max-width: 600px;
	margin:4px auto;
	padding-bottom:6px;
	border-bottom:#ccc solid 1px;
	display: flex;
	justify-content: space-between;
}
.follow-btn a {
    display: inline-block;
    padding: 4px;
	width: 19%;
    height: 44px;
    line-height: 18px;
    border-radius: 22px;
    text-align: center;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	box-sizing: border-box;
}
/*小さい方はアイコン拡大*/
.follow-btn-box-s .follow-btn a{
	padding-top: 10px;
	font-size: 20px;
	 border-radius: 6px;
}
.follow-btn a span{
	font-size: 10px;
}
/*大きい方だけボタンにテキスト表示*/
.follow-btn-box-s .follow-btn a span{
	display:none;
}
/*大きい方だけピンアイコン表示*/
.follow-btn-box .follow-btn a:after{
    font-family: "blogicon";
    content: "\f727";
	margin-left:4px;
    font-size: 12px;
}
.follow-btn a:hover {
	opacity: 0.6;
}
.follow-btn .follow-hatena {
	border: 1px solid #333;
	background: #fff; 
	color: #333;
}
.follow-btn .follow-twitter {
	background: #55ACEE;
}
.follow-btn .follow-insta {
	background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 70%,#bc1888 85%); 
}
.follow-btn .follow-facebook {
	background: #4267b2
}
.follow-btn .follow-feedly {
	background: #88be49
}

f:id:AzuLitchi:20190216001207j:plain
f:id:AzuLitchi:20190216001228j:plain
f:id:AzuLitchi:20190216001238j:plain
f:id:AzuLitchi:20190216001245j:plain

良いんです！なんか夢があるじゃないですか！

技術解説

URLとかJavaScriptで取得できる箇所は取得して
使い回すIDは変数に格納して表示用のhtmlを生成
それぞれのDIVのclassにappend

ここまでJavaScriptで制御。
cssではJavaScriptで生成されたhtmlをそれぞれのclass毎に整形。

有効なボタンの個数数えるのにArray使ってるけどもっとエレガントなコードあるはず。教えて偉い人。

あと最近のJavaScriptの傾向だとvarじゃなくてletで変数宣言するのが推奨なのかと思うけどついクセで…。

はてなブログ運営に求めたいもの

LINEとfeedlyのアイコンフォントと…あとアイコンフォントの最新の仕様書を公式で供給してください…。

こういうフォローボタンのhtml構造やclass名も公式ガイドラインとかあればテーマ作者もテーマに入れ込みやすいのだろうなあ。class名にUNIQUみがないと他のカスタマイズと被りそうでなんか怖い。

まとめ

たった一行でフォローボタンを設置可能！だだし準備は必要！
SteamPunkテーマなら準備がちょっとだけ楽！

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

らいちのヒミツ基地

公然のひみつ基地です