Twitterボタンの設置とカスタマイズのまとめです。ボタンのソースコードは以下の公式サイトから生成できます。ただし、jsの読み込みが必要になりページの読み込み速度も遅くなります。これを避けるためソースコードを自作することも可能です。
公式サイトでソースコードを生成した場合、共通で読み込みが必要なjsは以下になります。
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>■ Share Button（デフォルト）
公式サイトでShareボタンをデフォルトの設定で作成した場合、ページのタイトルとURLがツイートされます。aタグにはclass="twitter-share-button"が指定され、リンク先は自動的に別タブで開きます。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>■ Share Button（大きいサイズのボタン）
aタグにdata-size="large"を指定するとボタンのサイズが大きくなります。公式サイトでコードを生成した場合、唯一できるボタンの見た目のカスタマイズです。ボタンのテキストを変更することはできません。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-show-count="false">Tweet</a>■ Share Button（テキスト・URL・Twitterアカウント・ハッシュタグ設定）
デフォルトの設定でツイートされるページのタイトルとURLを変更する場合、data-text="テキスト"、data-url="https://blog.brick-plan.jp/"のように指定します。その他、data-via="brick_plan"でTwitterアカウント、data-hashtags="ハッシュタグ"でハッシュタグが指定できます。ハッシュタグの指定に「#」は付けません。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="テキスト" data-url="https://blog.brick-plan.jp/" data-via="brick_plan" data-hashtags="ハッシュタグ" data-show-count="false">Tweet</a>■ Share Button（テキスト内ハッシュタグ・ハッシュタグ設定）
data-hashtags="ハッシュタグ"を指定するとツイートの末尾にハッシュタグが追加されます。テキスト内にハッシュタグを入れるには対象の文字の前に「#」を付けます。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="テキスト #テキスト内ハッシュタグ テキスト" data-hashtags="ハッシュタグ" data-show-count="false">Tweet</a>■ Share Button（テキスト内で改行）
テキストの途中で改行する場合、ソースコードを改行するしかありません。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="ダミーテキスト
ダミーテキスト" data-show-count="false">Tweet</a>■ Share Button（オリジナルの画像ボタン）
オリジナルのボタンを使用する場合、カスタムデータ属性の「data-」の部分を削除してaタグのhref属性にパラメータで指定します。公式サイトでソースコードを生成した場合に付与されるclass="twitter-share-button"は削除します。そしてリンクを別タブで開くには、aタグにtarget="_blank"の指定が必要になります。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw&text=テキスト&url=https://blog.brick-plan.jp/&hashtags=ハッシュタグ&via=brick_plan" target="_blank" rel="nofollow noopener"><img src="images/btn_tweet_pc.png" alt="tweetして投票する"></a>■ Share Button（オリジナルのテキストボタン）
画像ではなくオリジナルのテキストボタンにすることも可能です。aタグに独自のクラス名を付与してCSSで装飾します。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw&text=テキスト&url=https://blog.brick-plan.jp/&hashtags=ハッシュタグ&via=brick_plan" target="_blank" rel="nofollow noopener" class="btn-twitter">tweetして投票する</a>■ Share Button（オリジナルのテキストボタン・ポップアップで表示）
リンクをポップアップで開く場合、aタグのonClick属性でJavaScriptを指定します。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw&text=テキスト&url=https://blog.brick-plan.jp/&hashtags=ハッシュタグ&via=brick_plan" rel="nofollow noopener" class="btn-twitter" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;">tweetして投票する</a>■ Share Button（オリジナルのテキストボタン・テキスト内ハッシュタグ）
テキスト内にハッシュタグを入れる場合、対象の文字の前に「%23」を付けます。エンコード前の「#」を付けると正常に動作しません。その他、aタグのhref属性で特定の意味を持つ「&」や「?」を入れたい場合もエンコードが必要です。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw&text=テキスト %23テキスト内ハッシュタグ テキスト&url=https://blog.brick-plan.jp/&hashtags=ハッシュタグ&via=brick_plan" target="_blank" rel="nofollow noopener" class="btn-twitter">tweetして投票する</a>■ Share Button（オリジナルのテキストボタン・テキスト内で改行）
テキスト内で改行する場合、改行したい箇所に「%0a」を挿入します。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw&text=ダミーテキスト%0aダミーテキスト&url=https://blog.brick-plan.jp/&hashtags=ハッシュタグ&via=brick_plan" target="_blank" rel="nofollow noopener" class="btn-twitter">tweetして投票する</a>■ Follow Button（デフォルト）
Followボタンも公式サイトでソースコードを生成できます。
<a href="https://twitter.com/brick_plan?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @brick_plan</a>■ Follow Button（Twitterアカウント非表示）
data-show-screen-name="false"を指定すると、Followボタンに表示されていたTwitterのアカウント名が非表示になり、「フォローする」の表記に変更できます。
<a href="https://twitter.com/brick_plan?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-screen-name="false" data-show-count="false">Follow @brick_plan</a>■ タイムラインを表示
aタグのhref属性に「https://twitter.com/Twitterアカウント名」を指定することで、対象のTwitterアカウントのタイムラインを表示するリンクが作成できます。
<a href="https://twitter.com/brick_plan" target="_blank" rel="nofollow noopener" class="icon-twitter"><i class="fab fa-twitter"></i></a>
