タイトル下に置いたときに邪魔にならない、カウンター・文字なしのシンプルなSNSシェアボタンの設置方法です。
レスポンシブデザインに対応しています。

アイコン画像読み込みコード

下記を<head>〜</head>の間に入れてください。

<!--アイコン画像読み込み-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

シェアボタンコード

LINEボタンはスマホのみ表示されます。
下記をCSSに記述します。

<!--SNSシェアボタン-->
<div class="share_area">
<ul class="share_box">

<!--はてなブックマーク-->
<li class="hatena_btn"><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="はてなブックマークに追加"><i class="fa-hatena"></i></a></li>

<!--Facebook-->
<li class="facebook_btn"><a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="fa fa-facebook"></i></a></li>

<!--Twitter-->
<li class="twitter_btn"><a href="http://twitter.com/share?text={Title}&url={URLEncodedPermalink}" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title="ツイートする"><i class="fa fa-twitter lg"></i></a></li>

<!--LINE-->
<li class="line_btn"><a href="http://line.me/R/msg/text/?{Title}{URLEncodedPermalink}" title="LINEで送る"><i class="fa fa-comment"></i></a></li>

<!--Pocket-->
<li class="pocket_btn"><a href="http://getpocket.com/edit?url={URLEncodedPermalink}" target="_blank" title="Pocketに保存"><i class="fa fa-get-pocket"></i></a></li>

</ul>
</div>

<style>
.share_area {
  text-align: center;
  margin: 20px 0 0 0;
}
.share_area ul:before, .share_area ul:after { content: ""; display: table; }
.share_area ul:after { clear: both; }
.share_area ul { list-style-type: none; }
.share_area li {
  float:left;
  margin: 0 2% 0 0;
}
.share_area li a {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  line-height: 35px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.share_area li:last-child { margin: 0; }

/* はてなブックマーク */
.share_area .hatena_btn a { background: #008fde; }
.share_area .hatena_btn a:hover,
.share_area .hatena_btn a:active { background: #00649c; }
.fa-hatena:before {
  content: "B!";
  font-family: Verdana;
  font-weight: bold;
  font-style: normal;
}

/* Facebook */
.share_area .facebook_btn a { background: #3b579d; }
.share_area .facebook_btn a:hover,
.share_area .facebook_btn a:active{ background: #293d6e; }

/* Twitter */
.share_area .twitter_btn a { background: #55acee; }
.share_area .twitter_btn a:hover,
.share_area .twitter_btn a:active { background: #3c79a7; }

/* LINE */
.share_area .line_btn a { background: #00b900; }
.share_area .line_btn a:hover,
.share_area .line_btn a:active{ background: #008200; }
/* LINEをPCで非表示 */
.share_area .line_btn { display: none; }
/* LINEをSPで表示 */
@media screen and (max-width: 767px){ .share_area .line_btn { display: inline; } }

/* Pocket */
.share_area .pocket_btn a { background: #ee4256; }
.share_area .pocket_btn a:hover,
.share_area .pocket_btn a:active{ background: #a22634; }
</style>

LINEボタンの設置について

LINEボタンは、TwitterやFacebookのようにタイムラインでシェアする用途と違い、直接相手にURLをシェアするものですので、ブログの内容によっては省いてもいいかも知れません。