2018-11-18T04:14:05Z

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

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

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

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

ソース

以下がhead内の追加内容です。CSS関連とアイコン関連の追加です。

<style>
sns-share-buttons {
 text-align: center;
 font-size: 14px;
}
.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-hatena{
  background: #008FDE;
}
.sns-btn.sns-btn-facebook{
  background: #3b5998;
}
.sns-btn.sns-btn-twitter{
  background: #1B95E0;
}
.sns-btn.sns-btn-google{
  background: #dd4b39;
}
.sns-btn.sns-btn-pocket{
  background: #ee4056;
}
.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-hatena::after{
    content: 'Hatena';
  }
  .sns-btn.sns-btn-facebook::after{
    content: 'Facebook';
  }
  .sns-btn.sns-btn-twitter::after{
    content: 'Twitter';
  }
  .sns-btn.sns-btn-google::after{
    content: 'Google+';
  }
  .sns-btn.sns-btn-pocket::after{
    content: 'Pocket';
  }
}
</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'/>

以下が<b:includable id='shareButtons' var='post'>の変更です。既存のソーシャルボタンをコメントアウトして置き換えてます。

<b:includable id='shareButtons' var='post'>
  <!--b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if-->
  <div class='sns-share-buttons'>
    <div class='sns-share-buttons-inner'>
      <!-- Twitter -->
      <a class='sns-btn sns-btn-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' rel='nofollow' target='_blank'><i aria-hidden='true' class='fa fa-twitter'/></a>
      <!-- Google+ -->
      <a class='sns-btn sns-btn-google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' title='Google+ で共有する' rel='nofollow' target='_blank'><i aria-hidden='true' class='fa fa-google-plus'/></a>
      <!-- Facebook -->
      <a class='sns-btn sns-btn-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' 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;http://getpocket.com/edit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Pocket で共有する' rel='nofollow' target='blank'><i aria-hidden='true' class='fa fa-get-pocket'/></a>
      <!-- B! Hatena -->
      <a class='sns-btn sns-btn-hatena' expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Hatena で共有する' rel='nofollow' target='_blank'><i aria-hidden='true' class='fa fa-hatena' style='font-weight: bold;'>B!</i></a>
    </div>
  </div>
</b:includable>
 コメントを書く