技術とかの雑なToday I Learnedメモ

はてブ追加ボタンを設置したい 1

はてブ追加ボタンを設置したい 1

新年最初になにか実装したいもの実装しようと思って、そういえばたま〜にはてブに追加してコメントしてくれている人がいるようなんだけど、自分からどの記事がはてブに追加されているかを確認する手段が Twitter での検索以外にないので、記事ごとにブックマーク数を表示したいというモチベーションがある。

ということではてブ数表示ボタンと、どうせなら合わせて追加ボタンも実装しようと思って実装している途中。

feat: はてなブックマークのシェアボタン設置 by tagucch · Pull Request #39 · tagucch/random.tagucch.dev

Twitter のシェアボタンは react-share というライブラリを使っている。

nygardk/react-share: Social media share buttons and share counts for React

で、はてブのボタンの追加ってどうやるのかな〜と思って調べていたら、とりあえず公式からボタンの HTML タグとスクリプトを提供してくれているようだった。

はてなブックマークボタンの作成・設置について

これを JSX に書き直すだけでよさそうだなとは思ったけど、もうちょい調べたらどうやら react-share にはてなのブックマーク周りがあってそれを使ってもよさそうだった。

どうやら日本人の方が追加してくれていたらしい。

react-share にはてなブックマークを対応させた

add HatenaShareButton and HatenaShareCount by HelloRusk · Pull Request #329 · nygardk/react-share

というわけで現在 react-share を使ってはてブの追加ボタンとブックマーク数の表示を実装している。

今困っていることは、

  • Twitter のアイコンは react-feather のものを使っているがはてなのアイコンは react-feather にないので、react-share が提供しているアイコンに合わせなくてはいけなそう
  • シェアカウントが 0 のときは 0 という数字が返ってきているわけではなく、null や undefined が返ってきているわけでもなさそうなのでどうすべきかなやんでいる
  • そもそもブックマーク数の表示をどういうスタイルにするか

あたり。

これを解決していきたい。