はてなブログで独自のシェアリンク・フォローボタンを作る HTML・CSS

前回の記事で、はてなブログ公式プラグインではなく、独自のシェアリンク・フォローボタンを作って差し替えたら、ページの表示速度が高速化したという話をした。

この独自リンクの作り方を紹介する。

目次

シェアリンク

このブログに置いているシェアリンクは以下のような HTML と CSS で作っている。

まずは HTML を「デザイン設定」画面の「記事」→「記事下」に貼る。

<ul class="neos21-share">
  <li class="neos21-share-hatebu"><a href="http://b.hatena.ne.jp/entry/{Permalink}"><i class="blogicon-bookmark"></i><span>Bookmark</span></a></li>
  <li class="neos21-share-twitter"><a href="https://twitter.com/share?url={Permalink}&amp;text={Title}"><i class="blogicon-twitter"></i><span>Twitter</span></a></li>
  <li class="neos21-share-facebook"><a href="http://www.facebook.com/share.php?u={Permalink}"><i class="blogicon-facebook"></i><span>Facebook</span></a></li>
  <li class="neos21-share-pocket"><a href="http://getpocket.com/edit?url={Permalink}&amp;title={Title}"><i class="blogicon-chevron-down"></i><span>Pocket</span></a></li>
</ul>

次に以下の CSS を「デザイン CSS」に貼る。

.neos21-share {
  width:100%;
  padding:0;
  list-style:none;
}

.neos21-share li {
  float:left;
  width:25%;
}

.neos21-share li:first-child {
  border-top-left-radius:3px;
  border-bottom-left-radius:3px;
}

.neos21-share li:last-child {
  border-top-right-radius:3px;
  border-bottom-right-radius:3px;
}

.neos21-share a {
  display:block;
  padding:3px 0;
  color:#fff !important;
  text-align:center;
  transition:0.3s;
}

.neos21-share a:hover {
  background:rgba(255, 255, 255, 0.2);
}

.neos21-share i {
  display:block;
  margin:0 0 -5px;
  font-size:140%;
}

.neos21-share span {
  font-size:70%;
}

.neos21-share-hatebu   { background:#006fbb; }
.neos21-share-twitter  { background:#55acee; }
.neos21-share-facebook { background:#3a5795; }
.neos21-share-pocket   { background:#ed4055; }

そして、標準の「ソーシャルパーツ」は全て外す。

するとこんなシェアリンクができる。

記事の下にシェアリングを追加

シェアリンクを作るためのリンク

はてなブログでは、任意のブログパーツを作るために使える変数が提供されている。

これを参考に、各 SNS 向けのシェア用 URL に変数を組み込むと、上述のような HTML になる。

今回は「はてなブックマーク」「Twitter」「Facebook」「Pocket」の4つを置いた。その他、「Google+」や「Line」へのリンクもあると良いのかもしれない。作成は可能なので、他の記事を参考にされたし。

上のシェアリンクは、ユーザごとに変更してもらう箇所がないので、そのまままるまるコピペしてもらって使うことができる。

SNS のアイコンは標準ウェブフォントを利用

各 SNS のロゴは FontAwesome などでも提供されているが、今回ははてなブログで標準的に使用できるウェブフォントを利用した。どうやらはてなブログのデフォルトスタイルを決めている blog.css に内蔵されている様子。

はてなブックマーク、Twitter、Facebook などはアイコンが存在する。しかし、Pocket はドンピシャなアイコンがないので、ロゴの下向き矢印部分だけに酷似している別のアイコンを使った。

標準アイコンは <i class="blogicon-bookmark"></i> のように、決まったクラスを付与することで挿入できる。有効なクラス名と文字は以下を参照。

ブックマーク数などは表示させなかった

各 SNS が提供する API に Ajax 通信すれば、ブックマーク数やツイート数を集計してカウンタを置くこともできる。今回は表示速度を高速化させたいこと、ぼくのブログではどうせツイート数「0」が並ぶばかりで意味がないので入れなかった。

以下のサイトなどが丁寧に解説していると思うので、シェア数をカウントしたい場合は参考にされたし。

フォローボタン

フォローボタンも、基本的な考え方は同じ。ただし、こちらはユーザごとに変更してもらう箇所があるので、よくよく注意したい。

このブログの場合は、以下の HTML を「デザイン設定」画面 → 「サイドバー」→「プロフィール」に貼る。

<ul class="neos21-follow">
  <li class="neos21-follow-hatena"><a href="http://blog.hatena.ne.jp/neos21/neos21.hatenablog.com/subscribe"><i class="blogicon-hatenablog"></i><span>はてな</span></a></li>
  <li class="neos21-follow-feedly"><a href="http://feedly.com/i/subscription/feed/http://neos21.hatenablog.com/feed"><i class="blogicon-rss"></i><span>Feedly</span></a></li>
  <li class="neos21-follow-twitter"><a href="https://twitter.com/intent/follow?screen_name=Neos21"><i class="blogicon-twitter"></i><span>Twitter</span></a></li>
  <li class="neos21-follow-facebook"><a href="https://www.facebook.com/Neos21"><i class="blogicon-facebook"></i><span>Facebook</span></a></li>
  <li class="neos21-follow-instagram"><a href="https://www.instagram.com/Neos21/"><i class="blogicon-instagram"></i><span>Instagram</span></a></li>
</ul>

以下のCSS は「カスタム CSS」に貼る。

.neos21-follow {
  width:100%;
  padding:0;
  list-style:none;
}

.neos21-follow li {
  float:left;
  width:20%;
}

.neos21-follow a {
  display:block;
  border-radius:3px;
  text-align:center;
  transition:0.3s;
}

.neos21-follow a:hover {
  color:#fff !important;
}

.neos21-follow i {
  display:block;
  font-size:140%;
}

.neos21-follow span {
  display:block;
  font-size:85%;
  white-space:nowrap;
}

.neos21-follow-hatena    a { color:#3d3f44; }
.neos21-follow-feedly    a { color:#70ca3b; }
.neos21-follow-twitter   a { color:#55acee; }
.neos21-follow-facebook  a { color:#3a5795; }
.neos21-follow-instagram a { color:#3f729b; }
.neos21-follow-hatena    a:hover { background:#3d3f44; }
.neos21-follow-feedly    a:hover { background:#70ca3b; }
.neos21-follow-twitter   a:hover { background:#55acee; }
.neos21-follow-facebook  a:hover { background:#3a5795; }
.neos21-follow-instagram a:hover { background:#3f729b; }

あとは標準の「読者になるボタン」などを非表示にすれば、以下のようなフォローボタンをプロフィール欄に置ける。

プロフィール欄にアイコンを追加

フォローリンクをカスタマイズする

フォローリンクは各ブログの URL や SNS のユーザ名に変えてもらわないと、このブログやぼくの SNS へのリンクのままになってしまう。以下の HTML を参考に、各自の情報に差し替えてほしい。

<ul class="neos21-follow">
  <li class="neos21-follow-hatena"><a href="http://blog.hatena.ne.jp/【はてな ID】/【はてなブログの URL (プロトコルなし)】/subscribe"><i class="blogicon-hatenablog"></i><span>はてな</span></a></li>
  <li class="neos21-follow-feedly"><a href="http://feedly.com/i/subscription/feed/http://【はてなブログの URL】/feed"><i class="blogicon-rss"></i><span>Feedly</span></a></li>
  <li class="neos21-follow-twitter"><a href="https://twitter.com/intent/follow?screen_name=【Twitter ID】"><i class="blogicon-twitter"></i><span>Twitter</span></a></li>
  <li class="neos21-follow-facebook"><a href="https://www.facebook.com/【Facebook ID】"><i class="blogicon-facebook"></i><span>Facebook</span></a></li>
  <li class="neos21-follow-instagram"><a href="https://www.instagram.com/【Instagram ID】/"><i class="blogicon-instagram"></i><span>Instagram</span></a></li>
</ul>

今回は「はてなブログの読者になる」リンク、「Feedly に RSS 登録する」リンク、「Twitter をフォローする」リンクを置いた。Facebook と Instagram はフォロー用の URL がないようなので、各 SNS に飛ぶだけのリンクとした。

アイコンは先程紹介したはてな標準のウェブフォントを使用している。はてなブログ、Instagram のアイコンはあるが、「Feedly」のロゴがないので、標準的な RSS のロゴを採用した。

はてなブログの読者になるボタンに関して

はてなブログの読者になるボタンは、公式の重たいボタンを使う以外に、読者数を表示する方法がないみたい。これが一般に見えていると「あぁ、このブログ人気なんだな」とか思ってもらえる指標になるのだが…。

管理者が読者の数を確認する方法はある。

また、購読する側はそのブログにアクセスして、公式のフォローボタンから購読解除ができなくなるのだが、以下のやり方で解除することは可能。

このように、一部デメリットというか、やはり公式でよきにはからってくれている便利機能があったりするので、その利便性を少し損なってでも表示速度を取るかは自分次第。ぼくは表示速度をとった。