【Blogger】QooQでSNSのシェアボタンを修正する(Twitter→X)

2024/01/04

Blogger 設定

私のブログで使用しているQooQのバージョンが1.31というものなのですがこのバージョンのQooQだと、SNSのシェアボタンは下記のようになっています。(もしかしたら最新バージョンでアップデートされているかもしれませんが、、、)
左端がTwitterのシェアボタンなのですが、最近時はTwitterがXになっているので、少しメンテナンスしていきたいと思います。

また、作業をする前は必ずバックアップを取ってください

↓(関連)SNSのシェアボタンを追加する


現状の把握

ブログのHTMLを確認し、"twitter"で検索すると下記のように".single-share-twitter"という文字列を発見することが出来ます。中身を確認するとURLなどがあるため、この辺りの記述でSNSシェアボタンを作っていることが分かります。(HTMLの確認の仕方が分からない方はこちらの記事を参考にしてください。)

また、SNSシェアボタンは画像ではなく文字列で表示しているだけという事もわかります。(例えば上記図のオレンジでマーカした場所が小文字のtとなっており、この文字を表示しているだけです。)

他にも"twitter"で検索すると下記のように".single-share-twitter"という文字列を発見することが出来ます。
ここでは"background:#55acee"という文字列があると思いますが、これで文字列の背景色を指定してSNSのShareボタンを作っています。

蛇足になりますが、#55aceeという色は下記のような色でなんとなく、Twitterのカラーと同じであるという事が分かります。



今回は文字列をXに変更するという作業とbackgroundの色を黒っぽくする作業を実施していきます。

実際に変更作業を実施する

現状が分かったので、ここからはメンテナンス作業をしていきます。
まず変更するのは下記の場所です。

変更したのは下記の2か所です。
①titleを"Xでポストする"に変更(黄色マーカ)
②tとなっていた文字をXに変更(オレンジマーカ)
Class名がtwitterになっていて、それをXに直そうか迷いましたが、Xに直さなくても影響がないと考え、ここは修正しませんでした。(気になる人は直してもいいかもしれないです。)

一応変更後のコードはこちらになります。該当箇所のコードを下記に置き換えてください。
  <a class='single-share-twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.canonicalUrl + &quot;&amp;text=&quot; + data:post.title' target='_blank' title='Xでポストする'>X</a>
この修正を実施した後に保存して作業内容が反映されているか確認します。
文字がXになっているのとマウスオン時に表示される文字列が"Xでポストする"に変更されたのが確認できます。


次に背景色の変更です。今のままだと水色っぽい色なので黒色に変更していきます。Xのアイコンの色をカラーピッカーツールで確認します。
(カラーピッカーツールはマイクロソフトのPowertoysを使用しています。)

ネットでアイコンを調べて、カラーコードを確認すると"000000"で完全な黒であることが分かります。

Xのアイコンのカラーコードが分かったので、下記オレンジで印をつけた場所をXのカラーコードに変更します。

修正が終わったので、保存して変更が正しく反映されているか確認します。
問題なく背景色が黒色に変わっていることが確認できました。

Fontawsomeを使ってアイコンの修正をする

このままでもいいと思いますが、各SNSのアイコンを使用したいと考え、修正方法をまとめていきます。

今私のブログはFontawsome 5を使用しているのですが、XのアイコンがFontawsome 6以降じゃないと無いため、まずはFontawsome 6対応をします。

Fontawsome 6の対応

Fontawsome 5の途中から会員登録が必要となったみたいなので、まずは会員登録をします。

私の環境が原因なのか不明ですが、なぜかChorome環境だとサイトが上手く表示できなかったため、edgeから下記サイトにアクセスします。

アクセスしたら会員登録を行います。
会員登録が終わったらKitと呼ばれるものが生成されていると思うので、Kitの確認を行います。

このページに行くと"Set up icons in a project with 1 line of code"というリンクがあるので、そちらに飛びます。

このページに行くと下記のようなコードがあると思います。
このコードをコピーしてください。(アカウントごとにユニークなIDが割り当てられてそうでしたので、念のため一部塗りつぶしています)

コピーが終わったら再びHTMLの編集画面を開き、先ほどコピーしたコードを<head>タグより下、</head>タグより上に張り付けます。

私の場合は下記の場所に張り付けてました。

これでFontaesome6を使う準備が終わりました。

(補足)Fontawsome 6は下位互換性があり

私はFontawsome 5を使用していたのですが、Fontawsome 5で使用していた記述を特に変更することなく、使用することが出来ているため下位互換性があることが分かります。

但し、Fontawsome 4の下位互換性は完ぺきではないみたいで、お手当てが必要みたいです。詳細は下記リンク先を参照お願いします。
もし、Fontawsome 4から移行する方がいたら上記リンク先に対処方が記載されているため、ご確認お願いします。

Xのアイコンを表示するようにする

Fontawsome のサイトでXのアイコンを調べると下記ページが出てきます。
ここに記載されている文字列をコピーしてください。(クリックするだけでコピーが出来ます)


コピーが出来たら先ほどメンテナンスした箇所でaタグの後のt→Xに変更した箇所をコピーしたURLに差し替えます。
念のため今回使用したコードを張り付けておきます。該当箇所をこちらのコードに差し替えお願いします。
<a class='single-share-twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.canonicalUrl + &quot;&amp;text=&quot; + data:post.title' target='_blank' title='Xでポストする'>
<i class='fa-brands fa-x-twitter'/>
</a>

変更したら保存して、変更が反映されているか確認します。
問題なく反映されていることが確認できました。

(補足)Fontawsome 6でアイコンの設定を変えてみる

アイコンのページを見ていたら"Styling Tools"というものがあるのを見つけました。

こちらを押下してみると下記のような画面が表示されます。
これを見ると下記項目が変更できることが分かります。
①色
②サイズ
③アニメーションの有無
④アイコンの回転

とりあえず今回はBounceというものを選んでみます。
設定を変えるとコードも変更されるため、再度こちらのコードを先ほどの場所に張り付けます。
再度保存して反映されているか確認したところ、無事繁栄されていることが分かります。(アニメーションなので、実際に私のブログの記事を見て確認お願いします。アイコンがジャンプするようになりました。やかましいと思う人もいるかもしれませんが一旦これで様子を見てみます。)

まとめ

今回はQooQのSNSシェアボタンを修正し、Twitter→Xに変更しました。SNSのシェアボタンの作り方が分かったので、他のSNSでもシェアできるように改造していきたいと思います。

また、その他QooQのカスタマイズは下記記事にまとめているので、よろしければ参照お願いします。

自己紹介

はじめまして 社会人になってからバイクやプログラミングなどを始めました。 プログラミングや整備の記事を書いていますが、独学なので間違った情報が多いかもしれません。 間違っている情報や改善点がありましたらコメントしていただけると幸いです。

X(旧Twitter)

フォローお願いします!

ラベル

QooQ