Bloggerに自作のソーシャルボタンを配置する

Blogger標準のソーシャルボタンでは、満足できなかったので自作してみた。

完成したソーシャルボタン

• Twitter, Google+, Facebook, Pocket, Hatenaのソーシャルボタン
• 画面サイズにより表示を簡略化
• マウスのホバーで透過のアニメーション
• シェア数は表示しない
• JavaScriptなしで動作する
• FontAwesomeIconsを使用して見栄えを考慮

※サービス終了とのことなので、Google+をLINEに変更しました。

ソース

<b:includable id='shareButtons' var='post'>
  <style>
.sns-share-buttons {
  text-align: center;
  font-size: 14px;
  font-family: Helvetica,"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
.sns-share-buttons-inner:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.sns-share-buttons-inner a{
  box-sizing: border-box;
  display: block;
  float: left;
  width: 20%;
  padding: .7em 0;
  color: white;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
}
.sns-share-buttons-inner a, 
.sns-share-buttons-inner a:link, 
.sns-share-buttons-inner a:visited, 
.sns-share-buttons-inner a:hover, 
.sns-share-buttons-inner a:active, 
.sns-share-buttons-inner a:focus{
  color: white;
}
.sns-btn.sns-btn-twitter{
  background: #1B95E0;
}
.sns-btn.sns-btn-line{
  background: #1dcd00;
}
.sns-btn.sns-btn-facebook{
  background: #3b5998;
}
.sns-btn.sns-btn-pocket{
  background: #ee4056;
}
.sns-btn.sns-btn-hatena{
  background: #008FDE;
}
.sns-btn {
  -webkit-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
       -o-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
}
.sns-btn:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}
/* 画面サイズが768px以上の時 */
@media only screen and (min-width: 768px) {
  .sns-btn::after {
    font-weight: bold;
    margin-left: 0.25em;
  }
  .sns-btn.sns-btn-facebook::after{
    content: 'Facebook';
  }
  .sns-btn.sns-btn-twitter::after{
    content: 'Twitter';
  }
  .sns-btn.sns-btn-pocket::after{
    content: 'Pocket';
  }
  .sns-btn.sns-btn-hatena::after{
    content: 'Hatena';
  }
}
  </style>
  <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' integrity='sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN' rel='stylesheet'/>
  <div class='sns-share-buttons'>
    <div class='sns-share-buttons-inner'>
      <!-- Twitter -->
      <a class='sns-btn sns-btn-twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' expr:title='data:top.shareToTwitterMsg' rel='nofollow' target='_blank'><i aria-hidden='true' class='fa fa-twitter'/></a>
      <!-- LINE -->
      <a class='sns-btn sns-btn-line'  expr:href="&quot;http://line.me/R/msg/text/?&quot; + data:post.url" rel='nofollow' target='_blank' title='LINE で共有する'>LINE</a>
      <!-- Facebook -->
      <a class='sns-btn sns-btn-facebook' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' rel='nofollow' target='_blank'><i aria-hidden='true' class='fa fa-facebook-square'/></a>
      <!-- Pocket -->
      <a class='sns-btn sns-btn-pocket' expr:href='&quot;https://getpocket.com/edit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='blank' title='Pocket で共有する'><i aria-hidden='true' class='fa fa-get-pocket'/></a>
      <!-- B! Hatena -->
      <a class='sns-btn sns-btn-hatena' expr:href='&quot;https://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Hatena で共有する'><i aria-hidden='true' class='fa fa-hatena' style='font-weight: bold;'>B!</i></a>
    </div>
  </div>
</b:includable>

※既存の<b:includable id='shareButtons' var='post'>を置き換えて使用する