【Twitter/X】aタグでシェアボタンをカスタマイズしていて動かない時【シェアボタン】
公開日:2023年12月1日
クリックしても正常に動かない
X(旧Twitter)のシェアボタンをaタグ使用でカスタマイズしている時の話。
2023年10月頃は正常に動いていたのに、翌月11月になると正常に動かずシェア出来ない。まあX(旧Twitter)側の仕様変更なんだろうが、デフォルトのボタンだとデザインの兼ね合いもあって、自前の画像でやりたい。そんな時の備忘録。
今までは
<a href="https://twitter.com/share?url=【シェアしたいURL】 target="_blank"><img src="自前画像" alt="Twitterでシェア"></a>
のような形でシェア出来ていたが、つい最近出来なくなっていた。
調べてみると、「share」と「intent」とあるようで、厳密にはスマートフォン時、アプリが立ち上がるかどうかのような違いがある模様。この辺りは割愛。
intentでシェアしよう
とりあえず、2023年11月現在、前述のソースではそもそもシェアすら出来ない。なので、前述のソースは
<a href="https://twitter.com/intent/tweet?url=【シェアしたいURL】 target="_blank"><img src="自前画像" alt="Twitterでシェア"></a>
と修正しよう。
また、テキストやハッシュタグもカスタマイズ出来るので、
<a href="https://twitter.com/intent/tweet?url=【シェアしたいURL】&text=【テキスト】&hashtags=【ハッシュタグ(カンマ区切りで複数設定可能)】 target="_blank"><img src="自前画像" alt="Twitterでシェア"></a>
とすればOK。ただし、テキストやハッシュタグにパイプ等の半角英記号があると正しく動作しない場合があるので要確認。エスケープ処理出来るかどうかは不明。ある程度見たところ出来なさそうだった。
まとめ
公式で生成しているボタンはちゃんとメンテナンスしてくれているようなので、旧式のままでも一応シェア出来る模様。
他のSNSボタンも、カスタマイズしている場合は定期的に挙動確認をするが吉。