各記事に「いいねボタン」を付けてみました。ページ下部の右側に表示されます。ボタンをクリックすると色が変わり「総いいね数」がカウントされます。
「いいねボタン」、なんとなくあったらいいなと思い、Hugoでの「いいねボタン」を検索してみたのですが、あまり情報がない印象。Facebookの機能を組み込むものが見つかったのですが、なるべく外部サービスを使わずに実現したくて、いろいろ調べてみました。サーバー設置型プログラムで見つかったもののなかにはデータベースが前提のものもあったのですが、少し検討してみて、データベースなしのプログラムを試すことにしました。
今回、使わせてもらったのは、いいねボタン・改です。PHPのプログラムで、データベースを使用せず、思った以上に簡単に設置できました。自サイトは、ごく普通のレンタルサーバーに開設しているので、PHPは問題なし。HugoというとGitHubなどの利用がよく説明されていますが、自分は他の用途でもすでにレンタルサーバーを使っているので、Hugoでのサイト運営にもそのまま活用しています。PHPが使えることで、結果的にいろいろやれることが増えた気がしないでもありません(まあ、よくわかっていないのですが……😅)。
それはともかく、いいねボタン・改です。設置マニュアルに従って作業をしたのですが、Hugoに導入するにあたって、若干、工夫してみました。
まず、プログラムのファイル一式は、Hugoでの管理とは別に、FTPソフトを使ってサーバーに置きました。Hugoの内部でもstaticフォルダのなかに入れればそのまま構築できるのかもしれませんが、それなりのファイル数があるので、少し不安がありました。また、サーバーに設置した「いいねボタン・改」の内部にデータのファイルがつくられるようだったので、そうすると、Hugo内での管理とバッティングするのではないかと考えました。
もう一つ、「いいねボタン・改」のコードのdata-iinename=““に「いいねボタン」の名前を記入する必要があります。この名前が同じだと、同じ「いいねボタン」と判断され、ページが異なっていてもカウント数が共有されます。つまり、各ページ、異なる名前を割り振る必要があるわけです。
これをどうやってHugoで実現するかです。一つの考え方としては、各ページのフロントマター(Front Matter)に独自のパラメーターを追加して、そこに他と重ならない名前をそのつど書く方法があると思いました。ただ、これはこれで、毎回考えないといけないのは少し面倒。
そこでごく単純に各ページの日付(date)をそのまま流用することにしました。また、ほぼないとは思いますが、同じ日付に2つの記事を投稿する可能性もあるといえばあるので、年月日に加えて時間も入れてみました。これでとりあえず各ページに固有の「いいねボタン」の名前が構築されるようになりました。
あとは、「いいねボタン」のコードをテーマのlayouts、partialsに独自のファイルとしてつくり、それをsingle.htmlで読み込むようにしました。また、single.htmlとはいっても、「いいねボタン」を表示するのはpostsのなかの記事だけですので、そのあたりは{{if }}のコードで指定しました。この点は、「いいねボタン・改」の他の、ページヘッドに書き込むコードなど同じようにしてみました。
とりあえずうまくいったかなと思います。自分でも試してみて、一応、動作していることが確認できました。
自サイトは本当にウェブの辺境も辺境ですし、ほとんど誰にも見られていない気もしますが、でもまあ、よかったら「いいね」をお願いいたします。😊