2024.06.18

Xのシェアリンクで詰まった話

未だに「Twitter、ツイート、リツイート」と呼んでしまい永遠に「X」と呼べないコーダー、オガワです。
（そろそろ青い鳥が恋しくなる時期ですね…🕊️）

名前が変わったり、アイコンが変わったり、仕様が変わったり…
何かと振り回されている中、特に頭を抱えたのがシェアリンクの使用について。

今回はシェアリンクで詰まったことについて話したいと思います！

突然、シェアできなくなる

メディアサイトを作っていると必ずと言ってもいいほど設置するSNSのシェアリンク。
スピカデザインではウィジェットではなくコードを書いてデザインカスタマイズをすることがほとんどなので、その時作っていたサイトもコードを書いて実装してました。
やっと公開だ〜と思って最終チェックをしていたところ…

Xだけシェアができない…！？

記述ミスであれば初稿提出時に直しているはずなので、仕様変更を疑ったものの情報が全然なく…。
公開日も迫っていたので、急いで調査をすることになりました。

色々調べた結果、原因は記述方法が効かなくなっていたことでした。
当時、シェアボタンにするaタグには下記を書いてました。

<a href="https://twitter.com/share?url=https://dummy.jp&text=テスト記事です">Xでシェアする</a>

「X シェアボタン作り方」などでよく出てくるわりとメジャーな書き方かと思うのですが、シェア用URLの仕様の部分が変わったようでこちらの記述ではXの投稿画面が開かれてもシェアしたい記事の内容は入りませんでした。

きちんと動作するように修正した記述がこちら

<a href="https://twitter.com/intent/tweet?url=https://dummy.jp&text=テスト記事です">Xでシェアする</a>

ぱっと見はほぼ一緒なのですが「share」だった部分を「intent/tweet」に変更しています。

挙動的にはほぼ同じなのですが、「intent/tweet」の方がメンションやハッシュタグなどのより細かい部分を指定できたり、スマホでボタンを押した時にアプリを立ち上げることができるようです。

▼参考サイト

Twitterシェアリンクはintent/tweetを使おう

名称が変わる時は仕様まわりも変わることが多いですよね…

また、シェアリンクの書き方に違う方法があるのも知らなかったので、普段何気なく書いている記述の意味や違う書き方を知るのも大事だなと思います。

とりあえず、いきなり仕様を変えずに事前告知はしてほしいですね！笑

この記事をシェアする

CSSで行数によって位置の調整ができた話

会社に置いてもらった本の話その２