共有ボタンのTwitterからXへの変更について

Imaginaryのフローティングバーの右端の共有ボタンのTwitterをXに変更しました。2024年6月12日に行いましたが、アイコンの微調整のために翌日の13日のアップデートから十分に使えるようになりました。

TwitterがXに変わったのが2023年7月24日で、一年近く経ちます。又、元に戻るのではないかと様子を見ていましたが、相当に定着しているようで、テンプレートの共有ボタンも合わせることにしました。

共有ボタンをTwitterからXへ移行するカスタマイズ

Imaginaryの利用者で従来のカスタマイズがあってテンプレートのファイル全体を取り替えるのが大変な場合のためにTwitterからＸへ移行する方法を紹介します。

GitHubの履歴で分かりますけど、共有ボタンを変更した後にアイコンの微調整を行って二つに分かれてしまったので、一つに纏めておきます。

テンプレートファイルの三ヵ所を編集します。

• CSSのSVGアイコン（372行）
• HTMLのbutton要素（1082行）
• JSのShare menu（2023行）

※行数はオリジナルのソースコードのもの。

CSSのSVGアイコン

編集前

.svg-icon-24>use, #hbbtn {fill:$(sticky.icons.color)}

編集後

.svg-icon-24>use, #hbbtn, #xbtn {fill:$(sticky.icons.color)}

太字の部分、「#xbtn」（Xの共有ボタンのID）を指定先に追加して下さい。

HTMLのbutton要素

編集前

<button class='svg-icon-24-button' expr:aria-label='data:blog.sharing.platforms[3].shareMessage' id='twbtn' type='button'><svg class='svg-icon-24' role='img'><use href='/responsive/sprite_v1_6.css.svg#ic_24_twitter_dark'/></svg></button>

編集後

<button class='svg-icon-24-button' aria-label='X で共有' id='xbtn' type='button'><svg class="svg-icon-24" viewBox="-4.5 -4.73 24 24"><path d="M-2.5,-0.27q0,-2 2,-2h16q2,0 2,2v16q0,2 -2,2h-16q-2,0 -2,-2ZM8.9270375 6.49105L14.511125000000002 0H13.187875L8.3392125 5.6360875L4.4666 0H0L5.85615 8.5227625L0 15.329625H1.323325L6.4436375 9.377725L10.5334 15.329625H15L8.926712499999999 6.49105H8.9270375ZM7.1145625 8.59785L6.521212500000001 7.749175L1.8001375 0.9961800000000001H3.8326875000000005L7.642650000000001 6.4460625L8.236 7.2947375L13.1885 14.37875H11.15595L7.1145625 8.598175000000001V8.59785Z"/></svg></button>

Twitterの共有ボタンのtwbtnのidのbutton要素をXの共有ボタンのxbtnのidのbutton要素と完全に入れ替えます。

JSのShare menu

編集前

twbtn.addEventListener("click", () => {
location.href = "https://twitter.com/intent/tweet?url=" + spgu + "&text=" + encodeURIComponent(spgt); });

編集後

xbtn.addEventListener("click", () => {
location.href = "https://x.com/intent/post?url=" + spgu + "&text=" + encodeURIComponent(spgt); });

Twitterの共有ボタンを実行するプログラムをXの共有ボタンを実行するプログラムに置き換えます。

その他にTwitterカードのマークアップがありますけれども公式サイトのツイートをカードで最適化するが残っているようにXカードに変更されてないので、そのままにして使って下さい。