【F-light】名前 / URLで投稿されたコメントアバターをサイトのファビコン画像に置き換える

｜2024/10/05 ｜2
アイキャッチ

先日こちらのぼっちんさんのブログ「Webテク倉庫」(FC2)にコメントした時に、ちょっとビックリすることがありました。

ファビコンWebテク倉庫
サムネイル
Google検索で「隕石」と検索したら隕石が降ってきたぞ
筆者はその昔天文少年だったんです 😁 よく流星の目視観測や写真観測もしたり、それらのデータを元に流星の対地軌道などの計算もしたりして、学業ほったらかしで大いに楽しんだものでした（笑）
https://oops0011.blog.fc2.com/blog-entry-884.html
CONTENTS

アバターが！？

私、ログインもしてないし、そもそもFC2アカウントも持っていないにも関わらず、何故か私のアバターが表示されてる＼(◎o◎)／！

FC2ブログ Webテク倉庫でのふじやんのコメント

最初は不思議に思いましたが、コメントフォームの案内文をよく見てみると謎が解けました(笑)

［ コメント投稿に関するご案内 ］
弊ブログでは、コメント主さんがご自身のサイトURLを記入してくださると、コメント一覧にご自身のアイコンが表示されるようになっております。

実は私がコメント投稿時に入力した URL はこの「ふじろじっく」ではなく、リンクリストの「ふじりんくす」だったのですが、このふじりんくすの OGP 画像をたまたま自分のアバター画像にしていたのです。なんという奇跡(笑)

ファビコンふじりんくす
サムネイル
ふじりんくす
ふじやん関連リンク一覧です
https://fujilinx.blogspot.com/

Blogger でも出来ないものか

F-light では、匿名でも「名前 / URL」(URLあり)でも同じアバターになるんだけど、せめて URL をご提示頂いた方は何かしら他者と区別できるようなものを表示させたい。

この機能、Blogger にも応用出来ないものかなあ、と何気に Bluesky でつぶやいてみたところ、ぼっちんさんに参考記事を教えて頂きました。(ちなみにぼっちんさんとはコメントした後で相互フォローになりました)

FC2ブログ(@oops.bz さん)にコメントしたら、ログインしてない(FC2アカウント持ってない)のにアイコンが表示されててびっくりしたんだけど、どうやらコメント投稿時にURLを入れてあるとサイトのOGP画像がここに反映されるらしい。ちなみに画像はEmbedlyのURLだった。 Boggerでもこれ出来ないかな。

[image or embed]

— ふじやん (@fujiyanx.bsky.social) Aug 3, 2024 at 15:03

弊ブログ記事をご参照ください。 おそらくテンプレートのコメント周りの変数を応用して戴けたら利用可能ではないかと思われますが、果たしてどうか？ oops0011.blog.fc2.com/blog-entry-7... #コメント訪問者アイコン表示

[image or embed]

— ぼっちん🦋️古稀過ぎFC2ブロガー (@oops.bz) Aug 3, 2024 at 15:19

早速記事を拝見すると、画像の取得は JavaScript で処理されているとのことでした。うん。どう考えても自力では無理(笑)

でも、やっぱり諦めきれない。

ファビコン画像なら出来るかも？

別に OGP 画像じゃなくても、ファビコンでもよくね？ OGP を設定してないサイトはたまにあるけど、ファビコンなら大概のサイトにあるし。サイズ的にもアイコン向きだと思うし。

ファビコンなら Google API で手軽に取得できる。ということはもしかしたら、Blogger 独自タグを駆使すればなんとかなるかも。

ファビコン取得用 Google API (非公式)

サイズパラメータを付ければ(サイト側で用意されていれば)大きいサイズのアイコンも表示可能。ちなみにうちのブログカードのファビコンもこの API で取得して表示させています。

https://www.google.com/s2/favicons?sz=64&domain=[サイト URL]

※新しいサイトとか、ファビコンを変えた直後とかだと取得できず、反映・表示されるまで日数がかかる場合もあります。また、SVG 画像のファビコンは API が非対応なため、表示されません。

実装成功

ということで、試行錯誤した結果、ファビコンアバターを表示させることに成功しました＼(^o^)／

いつも「名前 / URL」でコメントして下さるるろぺんさんのコメントはこんな表示になりました。るろぺんさんのファビコンもたまたま顔アイコンになってますね(笑)

るろぺんさんのファビコンアバターが表示されているコメント

ファビコンがない場合

ファビコンが設定されてないサイトや、サイトが存在しない場合は、地球アイコンになります。

こちらはるろぺんさんの旧サイトの頃のコメント。サイトが404なためアイコンが地球になってます。(元サイズが16pxで50pxに引き伸ばしているのでボヤケてます)

るろぺんさんのアイコンが表示されないコメント

ちなみに URL を空白にした場合は、匿名と同じアバターになります。

bit.ly や x.gd 等の短縮 URL を使用すると、短縮 URL サービスのファビコンになってしまいます。

過去記事のコメントもいくつかチェックしてみましたが、特に表示がバグってるような箇所もないようでしたので、おそらく大丈夫だろうと思います。というわけで、カスタマイズ方法をご紹介したいと思います。

F-light でのカスタマイズ方法

もう F-light をアップデートする気はありません(笑) 手順だけここに書いておきますので、試してみたいという方は各自でカスタマイズして下さい。当該コードを差し替えるだけなので簡単です。

コードを差し替える

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。

テーマの HTML 編集で<b:includable id='commentAuthorAvatar'>を探し、</b:includable>までの部分を下記のコードに差し替えます。

<b:includable id='commentAuthorAvatar'>
  <b:if cond='data:comment.authorUrl and data:comment.authorAvatarSrc contains ".bp.blogspot.com" or data:comment.authorAvatarSrc contains "blogger_logo_round_35.png" or data:comment.authorAvatarSrc contains "blogger.googleusercontent.com"'>
    <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='noopener' target='_blank'><img expr:alt='data:comment.author + &quot;のアバター&quot;' expr:data-src='resizeImage(data:comment.authorAvatarSrc, 100)' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ5AFYpTONjYwkX8Glh0ozIssJ5Wd4n79ooCY79pOvzECWlsdTNwaem3W0fsNQIs753ZIBRk8vrWiPD7Lpnj2aLbCpYsoqVFxv3mUOhoYHYKn3-pjQFm2pxgFdQ5i6FExQ7kSudDm0lap4/s50-rw/blank.png' width='50'/></a>
    <b:elseif cond='data:comment.authorUrl'/>
      <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='noopener' target='_blank'><img expr:alt='data:comment.author + &quot;のアバター&quot;' expr:data-src='"https://www.google.com/s2/favicons?sz=64&amp;domain=" + data:comment.authorUrl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ5AFYpTONjYwkX8Glh0ozIssJ5Wd4n79ooCY79pOvzECWlsdTNwaem3W0fsNQIs753ZIBRk8vrWiPD7Lpnj2aLbCpYsoqVFxv3mUOhoYHYKn3-pjQFm2pxgFdQ5i6FExQ7kSudDm0lap4/s50-rw/blank.png' width='50'/></a>
    <b:else/>
      <img alt='アバター' data-src='//resources.blogblog.com/img/blank.gif' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ5AFYpTONjYwkX8Glh0ozIssJ5Wd4n79ooCY79pOvzECWlsdTNwaem3W0fsNQIs753ZIBRk8vrWiPD7Lpnj2aLbCpYsoqVFxv3mUOhoYHYKn3-pjQFm2pxgFdQ5i6FExQ7kSudDm0lap4/s50-rw/blank.png' width='50'/>
  </b:if>
</b:includable>

以上です！

最後に

当ブログのコメントで「名前 / URL」を選択される方の殆どは Blogger ユーザーなんですよね。ブログは知られたくないから URL を空欄にするわけで。ということは、今回のカスタマイズは少なくともうちではあまり意味がないかも(笑)

それでも、もしどなたかのお役に立てれば幸いです！