Hugo に SoundCloud のウィジェットを埋め込む

2021/01/20
One-minute read

Hugo 製のサイトに SoundCloud の Player ウィジェットを埋め込む方法。

できたもの

やり方

以下のファイルを layouts/shortcodes/soundcloud.html として保存します。

<iframe
  width="100%"
  height="450"
  scrolling="no"
  frameborder="no"
  allow="autoplay"
  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/{{ index .Params 0 }}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
>
</iframe>

呼び出したいページからは以下のように呼び出します。ユーザID は数値型で、username とは異なります。SoundCloud の API から取得できそうです。

{{< soundcloud ユーザID >}}

2021/02/01 追記

使い方を含めてGitHubに上げました。

参考リンク

Hugo Soundcloud shortcode

Tech Hugo SoundCloud