お髭処blog

ドイツのものを中心としたボードゲーム・カードゲームのプレイ記録・感想を中心としたブログです。最新のドイツゲームから、紀元前から伝わるゲーム、旧西ドイツ製のレアゲーム、日本伝統の博打まで幅広くプレイしています。

はてなブログ用軽量ソーシャルボタンを設置しつつ機能追加してみた

ソーシャルボタンやシェアボタンと呼ばれるものがあります。ブログやニュースサイトの各記事にあって、その記事をソーシャルメディア等で共有するためのものです。閲覧社は簡単な操作でいいと思った記事を友人にシェアすることができ、記事を提供する側は多くの人に読んでもらいやすくなります。

これまでこのブログにも、ソーシャルボタン(シェアボタン)を付けていました。このブログの場所を借りている「はてなブログ」の公式機能で、記事の上下に付けていました。

これは非常に良いものなのですが、欠点もありました。まず、動作・描画が遅い。そして、各ボタン(各SNS等のサービス公式)の大きさ等の見た目がまちまち。さらに、閲覧者の閲覧情報が各社に渡っている疑いがあります。

そこで改めてGoogle検索して探したところ、次の丸ボタンが気に入りました。

画像検索で探すのがおすすめです。丸いボタンと適度な大きさ、HTMLとCSSでできた軽量な作りがとても良いですね。コード内容が把握できるコード量の小ささも良いところです。

はてなブックマーク」、「Facebook」、「Twitter」、「Pocket」に対応していますが、「LinkedIn」と「LINE」の共有ボタンも増やしてみました。

これをPC用表示の記事下に付けます。モバイル(スマホ)用サイトでは思い切って表示しないようにしました。アプリの共有ボタンを使うのが一般的かと思ったためです。(実はPC用表記だがアプリがあるiPadのLinkedInボタンがうまく機能しない問題があります。アプリに遷移してそれっきりなのです。共有ボタン+アプリを使うでしょ、と気にしないこととします)

各コードを公開します。無保証です。

準備

headに次を追加。(今回不要だった。テーマが使用している?)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

本体HTMLコード

<!-- ここからシェアボタン -->
<h4>この記事をシェアする</h4>
<div class="share-btn-type7">
  <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" class="share-btn__item share-btn__item--hatebu" target="_blank"><i class="blogicon-bookmark lg"></i></a>
  <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" target="_blank"><i class="blogicon-twitter lg"></i></a>
  <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share-btn__item share-btn__item--facebook" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"><i class="fa fa-facebook-square lg"></i></a>
  <a href="https://www.linkedin.com/sharing/share-offsite/?url={URLEncodedPermalink}" class="share-btn__item share-btn__item--linkedin" target="_blank">in</a>
  <a href="https://social-plugins.line.me/lineit/share?url={URLEncodedPermalink}" class="share-btn__item share-btn__item--line" target="_blank">LINE</a>
  <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share-btn__item share-btn__item--pocket" target="_blank"><i class="fa fa-get-pocket"></i></a>
</div>
<!-- シェアボタンここまで -->

CSS

/**
 * シェアボタンここから
 * https://www.notitle-weblog.com/hatena-share-button/
 */
.share-btn-type7 {
  max-width: 360px;
  margin: 1.2em auto 1.2em 1.2em;
  display: flex;
  justify-content: space-between;
}
.share-btn-type7 .share-btn__item {
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  box-shadow: 0 2px 2px rgba(0,0,0,.16);
  transition: all .3s;
}
.share-btn-type7 .share-btn__item:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
}
.share-btn-type7 .share-btn__item--hatebu {
  background-color: #00A4DE;
}
.share-btn-type7 .share-btn__item--facebook {
  background-color: #1778F2;
}
.share-btn-type7 .share-btn__item--twitter {
  background-color: #1BA1F3;
}
.share-btn-type7 .share-btn__item--pocket {
  background-color: #EF4155;
}
.share-btn-type7 .share-btn__item--linkedin {
  background-color: #0077B5;
}
.share-btn-type7 .share-btn__item--line {
  background-color: #06C755;
}
/**
 * シェアボタンここまで
 */

リンク