はてなテーマ「Brooklyn」のシェアボタンにLINE共有ボタンを追加してみた。

f:id:s_ahhyo:20220106233434p:plain

ブログ開設当初から「Brooklyn」というブログテーマを使わせていただいております。

素人ながら試行錯誤しつついろいろカスタマイズしているのですが、この度シェアボタンに「ラインで共有」を追加してみました。

↓こんな感じ。

f:id:s_ahhyo:20190413174225p:plain

まさか僕がブログデザインの記事を書くとは・・・って感じなんですが、いろいろがんばっていじっていたらできましたので一応共有です。

もちろんコピペOKです！（わざわざ記事にして紹介してくれると喜びます）

前提

はてなブログテーマ「Brooklyn」を使っている方で、テーマ独自のデザインのシェアボタンを導入している方は「デザイン > カスタマイズ > 記事」の「記事上」もしくは「記事下」の任意の場所に以下のようなタグが挿入されていると思います。

されていない場合は追加してください。

これで「Brooklyn」独自のおしゃれシェアボタンが搭載されます。（カラーのVer.はご自身で探してください）

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



<div class="share-button">

<div class="share-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="このエントリーをはてなブックマークに追加"> </a>



<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 "> </a>



<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button "> Twitter</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 "> Google</a>



<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button common" target="_blank"> Pocket</a> </div> </div>

Google+はサービス終了予定になっているので、以下手前までは丸々カットしても問題ないと思います。

はてブ数とFacebookシェア数の削除（したい人だけ）

また、個人的にはてブ数とFacebookシェア数の取得は読み込みに時間がかかると思ったので削除してテキトーな文字を入れています。

具体的には

はてなブックマーク

<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="このエントリーをはてなブックマークに追加"> はてブ</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 "> Facebook</a>

こんな感じにしました。

通常のsmall-text指定だとFacebookの文字がはみ出してしまうのでテキトーに調整しています。それでもまだガタガタしていますが、もう許してください。

当然ですがシェア数のカウントを導入しない場合、カウントするためのjavascriptは挿入しなくて大丈夫です。