【コピペで使える】はてなブログの変数を使ってソーシャルボタンを記事毎に対応させる方法

はてなブログで、ソーシャルボタンを手動でいれる方法です。手動と言っても、記事上等に一度入れてしまえば、記事毎のURLとタイトルに、変数で自動変換されます。変数と聞くと難しいイメージもありますが、この記事で言う変数とは、特に難しい事はありません。私と同じようにソーシャルボタンを自分で入れたいと思う人がいれば、ご参考にお読み下さい。

手動でソーシャルボタンを入れたい

私は各SNSのソーシャルボタンは上下に入れたいタイプです。はてなブログのカスタマイズの中にも上下にソーシャルボタンを設置する機能はあるのですが、バーチカルタイプのみ。


私としては記事上にはスタンダードタイプのソーシャルボタンを入れたい。

そこで考えたのが、忍者ツールやZenbackと言った外部サービスを通して表示させる方法です。
でも、この方法だとどうしても動作が重くなってしまいます。これはユーザビリティ上の問題にもなると思うので却下。今迄は記事下だけにソーシャルボタンを入れていました。

はてなブログでは変数が使える

ある時に、デザイン＞カスタマイズ＞記事を見ていたら、変数を使える事に気がつきました。この変数と言うのは、{Title}と記入すると、その記事のタイトルに合わせて変換をしてくれる機能。
そこで、変数が使えるのであれば、記事毎にソーシャルボタンを対応させられるのではと私は思いました。

変数を使い記事毎にURL、タイトルを変更出来る。

http：//skinamonote.com/ここまでは良いのですが、この後は記事によっても違うものですね。http：//skinamonote.com/entry/seoだったり、http：//skinamonote.com/entry/babyだったりする訳です。
しかし普通にソーシャルボタンを設置するだけでは、全て記事がhttp：//skinamonote.com/になってしまいます。これでは、シェアやブックマークをされても、トップページへのカウントとなってしまいます。これ以降の、entry/seoの部分は自動で対応してくれない訳です。手動で各記事にいれるのは面倒ですよね。

ここで変数の登場です。
{Permalink}と言う変数を使うと、記事のURLに変換してくれます。この変数を、各SNSのコードのURL部分に挿入する事によって、記事毎に対応をしたソーシャルボタンを表示出来る訳です。変数はスマホ表示でも使用出来ます。
それではその方法をみていきましょう。

各ソーシャルボタンの配置

各ソーシャルボタンへのリンクが貼ってありますが、コードをコピペして、挿入すればボタンも表示されます。自分で設置したい場合や、好きなボタンを表示したい場合は、リンクを参考にして下さい。

下記のコードを
デザイン＞カスタマイズ＞記事＞記事上
に張り付けします。

はてなブックマーク
はてなブックマークボタンの作成・設置について - はてなブックマーク

<a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title} - {BlogTitle}" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/[email protected]" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

Twitter(ツイッター)
Twitter Buttons | About

<a href="https://twitter.com/share" class="twitter-share-button tweets" data-url="{Permalink}">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Facebook(フェイスブック)
シェアボタン - ソーシャルプラグイン - 参考資料 - 開発者向けFacebook

<div class="fb-share-button" data-href="{Permalink}" data-layout="button_count"></div>

Pocket(ポケット)
Pocket for Publishers: Pocket Button

<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en" data-save-url="{Permalink}"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

これで下記のように表示されます。しかし一つ問題が。

ツイッターと、ポケットの右に余白が出来てしまうので、CSSでサイズ整えてあげます。Twitterのclass="twitter-share-button"のままサイズ変更を行うと、記事下のバーチカルの方もサイズが変わってしまうので、tweetsというクラスを足しました。

CSS
デザイン＞カスタマイズ＞デザインCSS
に張り付けします。

.tweets {
width: 95px !important;
}

.pocket-btn {
width: 90px!important;
}

これで、下記のように表示されるようになります。
※現在、スマホ表示の方はTwiiter右に余白が出来たままになっています。

最後に

無事にスタンダードタイプのソーシャルボタンを記事上に表示する事が出来ました。記事上にバーチカルタイプのソーシャルボタンがあると、なんか、落ち着かないんですよね。自分で記事を読む訳ではないのですが(笑)これでようやく落ち着きました。
また、記事上だけでなく、記事下の方ににも使えますね。バーチカルタイプの方にも応用は出来ると思います。デザインの幅も広がるのではないでしょうか。

記事の上にソーシャルボタンは必要ないと言う意見もありますが、私のポリシーとして表示させておきたいんですよね。同じような方がいれば参考にしていただければと思います。

最後までお読みいただきありがとうございます。感謝

関連記事

• ブログレイアウトを考えてみた。
  
• はてなブログカスタマイズ経過報告。
  
• はてなブログをカスタマイズ。基本の3箇所をCSSでデザインする。
  
• 【コピペで使える】はてなブログの関数を使ってソーシャルボタンを記事毎に対応させる方法
  
• はてなブログPROに変更して設定とカスタマイズしてみた。