バイラルメディア風シェアボタンを設置したい

　はてなブログにバイラルメディア風のシェアボタンを設置しようと思ったので上記を参考に作ってみました。アイコンを含めてベタなHTMLテキスト出力なので一般的なシェアボタンよりも高速に表示されます。

https://vine.co/v/O1z3dw1q3Qr

　アイコンにはてなブログ用の絵文字フォントを利用。

設置方法

　デザイン画面の記事下に以下のHTMLを記述します。文言や表示させたいボタンなどは各自調整ください。

<div class="snsshare">
  <a class="share_bookmark" href="http://b.hatena.ne.jp/entry/{Permalink}" target="_blank"><i class="blogicon-bookmark lg"></i> はてなブックマーク</a>
  <a class="share_tw" href="https://twitter.com/intent/tweet?url={Permalink}&text={Title}" target="_blank"><i class="blogicon-twitter lg"></i> Twitter</a>
  <a class="share_fb" href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}" target="_blank"><i class="blogicon-facebook lg"></i> Facebook</a>
  <a class="share_rss" href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fblog.hatenablog.com%2Ffeed" target="_blank"><i class="blogicon-rss lg"></i> Feedly</a>
</div>

はてなブログの記事で利用できる変数

　はてなブログでは以下の変数が利用できるため、これらについては自分のブログ用に編集する必要はありません。ただし、feedlyに登録するためのブログURLについては自身のブログURLに変更する必要があります。エンコード済みブログURLも変数化してほしいところ。

変数	説明
{Title}	記事タイトル
{Permalink}	記事URL
{URLEncodedPermalink}	URLエンコードされた記事URL

CSS設定

　デザイン画面の「デザインCSS」に以下のように追記します。

div.snsshare {
  width: 100%;
  height: 104px;
  margin-bottom:10px;
}

.snsshare a {
  width: 50%;
  margin-bottom: 0px;
  padding: 8px 0;
  float: left;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff !important;
  text-align: center;
  display: inline-block;
  text-decoration: none;
}

.snsshare a:hover {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.6 !important;
}

.snsshare a.share_fb { background-color: #3B5998; }
.snsshare a.share_tw { background-color: #00ACEE; }
.snsshare a.share_bookmark { background-color: #008FDE; }
.snsshare a.share_rss { background-color: #70CA3B; }

スマートフォン表示対応化

　以下の対応を行う事でスマートフォンでも表示可能です。2列化を解除するため、モバイル表示時のみのスタイルを設定する必要があり、それには以下の方法があります。

1. モバイルデザイン画面でHTMLを追記
2. モバイル専用の外部CSSに追記

モバイルデザイン画面でHTMLを追記

　モバイルデザイン画面で以下のHTMLを追記します。

<style>
  div.snsshare { height: 208px !important; }
 .snsshare a { width: 100% !important; }
</style>

モバイル専用の外部CSSに追記

　モバイル専用の外部CSSを読み込ませて以下のCSSを追記します。

div.snsshare { height: 208px !important; }
.snsshare a { width: 100% !important; }

　モバイル表示専用の外部CSSを読み込ませる方法については以下に解説しています。

まとめ

　以上の手順でバイラルメディア風のシェアボタンを設置する事ができました。標準のシェアボタンでは非同期通信で複数のサービスに問い合わせていて、表示させるまでに待たされる事があるので、シンプルな方が好みです。デザインとしても流行りに乗ってて良い感じではないでしょうか。気に入ったら「シェア」お願いします。