「Webサイトに共有ボタンを配置する」はシリーズになっています。
- ツイートボタン ←イマココ
- はてなブックマークボタン
はじめに
Webサイトにツイートボタンを配置する方法を紹介します。
ツイートボタンのHTML
ツイートボタンのHTMLを配置するのみです。
例
<a href="https://twitter.com/intent/tweet? \
text=001%202022-04-04%20%7C%20iOS%20Osushi%F0%9F%8D%A3& \
url=https://ios-osushi.github.io/posts/001-20220404& \
hashtags=ios_osushi& \
via=ios_osushi"
class="twitter-share-button">
ツイート
</a>
<script async src="https://platform.twitter.com/widgets.js">
このHTMLをWebサイトに表示すると、以下のボタンが表示されます。
ボタンを押下すると、Twitterのツイート画面が開き、以下のように文言が表示されます。
| ツイートボタン | ツイート |
|---|---|
 |
 |
class="twitter-share-button" を付けることで widgets.js がツイートボタンと認識し、ボタンが表示されます。
<a>...</a> タグで括った文字列は基本的に表示されませんが、ボタンの表示が遅い場合に一瞬だけ表示されることがあります。
クエリストリング一覧
https://twitter.com/intent/tweet のクエリストリングを紹介します。
クエリストリングはすべて任意であり、付ける場合はURLエンコードすべきです。
| パラメーター | 説明 | 例 |
|---|---|---|
text |
ツイートのテキスト | 001%202022-04-04%20%7C%20iOS%20Osushi%F0%9F%8D%A3 |
url |
ツイートに含めるURL | https://ios-osushi.github.io/posts/001-20220404 |
hashtags |
ハッシュタグ。複数ある場合はカンマで区切る | ios_osushi |
via |
ツイートのソースとなるTwitterのユーザー名 | ios_osushi |
related |
共有URIの内容に関連するアカウント。複数ある場合はカンマで区切る | twitterapi,twitter |
related のみ、どこに反映されるのかわかりません。
わかる方がいたら教えていただけると嬉しいです。
JSの読み込み
widgets.js を非同期で読み込むのみです。
おわりに
これでWebサイトにツイートボタンを配置できました！