Xへのポストボタンを設置した

2024-04-02 / CMS, Hugo

X(Twitter) へのポストをしやすくしてみました。

GitHub Actions の方が楽だけど

記事が公開されたら自動で X にポストしてくれるのがラクなんですが、API キーの取得から投稿するというところまで組み込むのがちょっと面倒でした。ページ内にある X にポストするボタンを設置して手作業でやっても別に問題ないかなと思いましたので、テーマを修正してページ下部に Share ボタンを設けました。

参考: Parameter reference | Docs | Twitter Developer Platform

URLParameter を使う方法と data-* 属性を指定する方法があり、後者の場合、設定する値を URLEncode しなくても良さそうでした。Hugo 側のテーマで設置しやすい data-* 属性を利用する方にしました。

<a href="https://twitter.com/intent/tweet"
  data-text="{{.Title}}"
  data-url="{{.Permalink}}"
  data-lang="en"
  data-show-count="false">Post</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

設定したテンプレートの HTML はこんな感じです。

導線によって画像のサイズが変わる？

いくつかテストしていたのですが、共有する導線によって TwitterCard のサイズの扱いが変わるようでした。X のアプリ上で URL をコピーすると summary_large_image になるのですが、MacChrome で直接 URL を指定しても summary の状態になります。iPhone の Safari から共有 →X アプリという導線でも summary になりました。

実際にサイトに設置してみたらどうなるのかわかりませんが、ひとまずやってみて考えようと思います（特にとれそうな対策もなさそうですが…）。