【Twitterのシェアボタン実装】

どうも、こや丸です!

今回は、フロントエンドエンジニアとして働いている僕が
Webサイトの制作業務で
【Twitterのシェアボタン実装】
に携わった話を書こうと思います。

※自身の学習記録、備忘録的な面が強いです。
ご了承ください。

OGPを指定

og:titleに記載したものの、ローカルサーバーでTwitterのシェアボタンを押してもは文言が反映されず。
ogp周りはデバッガーでの確認もシェアも含め、本番リリースされないと
確認できなかったような・・・?

Chromeの拡張機能で、一応の確認はできるものの、もう少し考えてみた。

ボタンを押すとタイトル・description・OGPが確認できるChromeの拡張機能作ったよ!【LIGアドベントカレンダー16日目】

data属性でカスタマイズ

data-urlとかdata-hashtagを入れると、シェアボタン押した際に
ツイートに表示されるらしいが、実装したところされなかった・・・

シェアボタンの設置方法とカスタマイズ

URLにクエリパラメータを実装

URLに?や&や%とかつなげて、title, URL, hashtagを追加したところ、表示された・・・!

公式
https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent
その他参考にしたサイト
https://level-up-notebook.com/css/1214/

TwitterはIEのサポートを終了している

TwitterはIEでのサポートを終了したので、
IEでシェアボタン押した場合、
twitter.comには遷移はするものの
・IEではサポートおわったよ
・他のサポート中のブラウザに切り替えて見てね
・twitterがサポート中のブラウザについてはヘルプセンターに書いてるよ
って表示が出る

まとめ

というわけで、今回は

Twitterのシェアボタンの話でした。
今後も学習記録として、書いていければと思います。

では、また!

タイトルとURLをコピーしました