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

結城永人
-6月 13, 2024

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", () =&gt; {
location.href = "https://twitter.com/intent/tweet?url=" + spgu + "&amp;text=" + encodeURIComponent(spgt); });

編集後

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

Twitterの共有ボタンを実行するプログラムをXの共有ボタンを実行するプログラムに置き換えます。その他にTwitterカードのマークアップがありますけれども公式サイトのツイートをカードで最適化するが残っているようにXカードに変更されてないので、そのままにして使って下さい。

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

コメント

注目の投稿

ImaginaryのBloggerブログへの付け替え方

人気の投稿

読み込みボタン／無限スクロールの手動化のカスタマイズ

ImaginaryのBloggerブログへの付け替え方

ブログの記事／追加ページのデザイン

ブログの背景のヘッダー画像の付け方とサイズについて

ブログの背景画像を全画面で表示する方法

インデックスページのスニペットの本文の削除と項目の並び替えのカスタマイズ

ポップアップと本文に目次を追加するカスタマイズ

皆のImaginaryへの気持ちはどうなのか

記事／追加ページの画像の遅延読み込みや軽量化による高速化のカスタマイズ

著者情報

アーカイブ

ラベル

ブログ

ブイログ

ソーシャルメディア

フィード

お問い合わせ