BloggerにSNSシェアボタンを追加

ＷＥＢ

2020.02.082020.01.08

共有ボタンはBloggerの機能にもあるのですが、デザインや対応しているものが古い感じがするので、直接タグを編集して実装したメモ。

<style>
.sns-share-buttons {
  text-align: center;
  font-size: 14px;
  font-family: Helvetica,&quot;游ゴシック&quot;,YuGothic,&quot;Hiragino Kaku Gothic ProN&quot;,Meiryo,sans-serif;
}
.sns-share-buttons-inner:after {
  content: &quot;.&quot;;
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.sns-share-buttons-inner{
  display:flex;
  justify-content:space-around;
}

.sns-share-buttons-inner a{
  box-sizing: border-box;
  display: block;
  width: 18%;
  padding: .7em 0;
  color: white;
  text-decoration: none;
  text-align: center;
  border-radius:6px;
  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 !important;
}
.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: &#39;Facebook&#39;;
  }

  .sns-btn.sns-btn-line::after{
    content: &#39;LINE&#39;;
  }

  .sns-btn.sns-btn-twitter::after{
    content: &#39;Twitter&#39;;
  }
  .sns-btn.sns-btn-pocket::after{
    content: &#39;Pocket&#39;;
  }
  .sns-btn.sns-btn-hatena::after{
    content: &#39;Hatena&#39;;
  }
}
  </style>

アイコンにFont Awesomeを使うのでkitを作成してこちらも貼り付け。

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

<script crossorigin='anonymous' src='https://kit.fontawesome.com/0123456789.js'/>

（※以下のコードはサンプルです。）

<div class='sns-share-buttons'>

  <h4 style='text-align:center;'>Shareボタン</h4>

  <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='fab 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 で共有する'><i aria-hidden='true' class='fab fa-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='fab fa-facebook'/></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='fab 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='fab fa-hatena' style='font-weight: bold;'>B!</i></a>
  </div>
</div>