January 15, 2021

shields.io でブログのシェアバッジを作ってみた

Hugo で生成したこのブログには、もともと下のような公式で公開されているシェアボタンを配置していたが、なんとなく統一感に欠けているような気がしていた。

せっかくなので、 Shields.io の Dynamic で生成したバッジに変更してみた。

できたものは最下部にある ↓ 。

Twitter

Shields.io で Twitter をサポートしているのでやるだけ。

<a href="http://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}%20%7C" target="blank">
  <img alt="Twitter" src="https://img.shields.io/twitter/url?style=social&url={{ .Permalink }}">
</a>

はてなブックマーク

はてなブックマーク件数取得 API を利用する。

複数 URL 版を利用しないと Json ではなく text/plain を返してしまうので注意。

<a href="http://b.hatena.ne.jp/add?mode=confirm&url={{ .Permalink }}&title={{ .Title }}" target='blank'>
  <img alt="Hatena" src="https://img.shields.io/badge/dynamic/json?&style=social&label=hatena&logo=hatena-bookmark&query=$.*&url=https://bookmark.hatenaapis.com/count/entries?url={{ .Permalink }}">
</a>

Feedly

Feeds API を利用する。

Hugo の .Site.RSSLink を使いたかったけど URL エンコードの関係か、うまくいかなかった。

<a href='https://feedly.com/i/subscription/feed/https://www.shiomiya.com/index.xml'  target='blank'>
  <img alt="Feedly" src="https://img.shields.io/badge/dynamic/json?&style=social&logo=feedly&label=feedly&query=%24.subscribers&url=https%3A%2F%2Fcloud.feedly.com%2Fv3%2Ffeeds%2Ffeed%252Fhttps%253A%252F%252Fwww.shiomiya.com%252Findex.xml">
</a>

アイコン

simpleicons.org から探して使う。失礼ながらまさかはてながあるとは思っていなかった。

参考


Twitter Hatena Feedly

© www.shiomiya.com