【Twitterシェア】SNS共有機能をTypescriptで作る

よくあるブログのTwitter共有機能。注意点なども記載しつつ説明。仕組み自体はURLで構成されているので、他言語でも応用が可能です。

2023年01月14日

前提

Twitterに共有したい内容があること

2種類の共有方法

Twitter共有機能の導線は私が知る限り2パターンほど存在するようです。

/share の方でアクセスすると /intent/tweet にリダイレクトされるので、おそらく/intent/tweetが推奨なのだろうと解釈しております。

加えて、私が運営しているいわないずむというサイトでは、去年まで /shareを採用しておりました。
しかし、アンドロイドのTwitterアプリ（最新バージョン）にて謎エラーの発生を確認しております。

入力した単語の検索結果はありません。しばらくしてからやり直してください。

Twitter側のバグであることに間違いはないのですが、しばらく経っても改修がなかったので/intent/tweetに変更し対応しました。

このこともあり、可能な限り/intent/tweetを使った方が良さそう。

動作を確認

利用可能な全てのパラメーターを網羅したシェア用URLを作ったので、試しに叩いてみましょう!!

Tweet!!

https://twitter.com/intent/tweet?url=https://theblueback.com%0a%0a&text=Firebaseのお勉強をしよう！！%0a&via=yutahhhh_output&hashtags=Firebase,BlueBack,自分アンテナ&in_reply_to=1619695398016385025&related=Iwanai_rev_s,twitterapi,twitter

固定Tweetへのリプライとして表示されているはずです。
以降、それぞれのパラメーターを説明していきます。

テキスト（text）

Tweetしたい内容をいれます。

アカウント（via）

IDを指定します。
via ~ という形でTweetの末尾に含まれます。

ハッシュタグ（hashtags）

カンマ区切りで指定します。
#は含ませず、キーワードのみで繋げましょう。

リプライ（in_reply_to）

ここにTweetIDを指定することで、対象のTweetにリプライという形になります。
in_reply_toを指定しない場合、単体のTweetとなります。

改行

Tweet内容をパラメーターに含ませているので、通常の改行では上手くいきません。
なので、URLエンコードを使用します。
%0aと、改行したい位置に書けばOK!!

Data属性を使ったシェア機能

Twitterの開発者サイトにて、Data属性を使用したシェア機能も紹介されています。
使う予定があれば追記してみようと思います。（あまり有効な使い方が思い浮かばない）

以上です。
今後他の機能もアウトプットしていきますので、興味がある方はご覧くださいませ。
Twitterは開発者に優しいSNSですね。使いやすい。