HTML
Twitter

Twitterシェアボタンの設置

多くの方の記事があったが、Twitter公式のコード生成ツールから作った記事はあまり見当たらなかったのでメモ。
(注意)2018年1月時点の情報です。

Twitter公式のコード生成ツールへ飛ぶ

https://publish.twitter.com/#
以下までスクロール。

image.png

Twitter Buttones をクリック

image.png

(以下からは用途に応じてですが単純なツイートボタンの生成を前提として)最左部の Share Buttonをクリック

image.png

Copy Code をクリック

コードの詳細

aタグとscriptタグで構成。直後に置くようにコード生成されるが、scriptタグは同htmlファイル上であればどこにおいても問題ない。

TwitterButtonSource.html
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

設置方法

Tweetボタンを設置したい場所に以下を挿入。scriptタグ部分は、既述の通りの場所に入れる。

index.html
<div class="twitter">
 <a href="//twitter.com/share" class="twitter-share-button" data-text="<!-- ここにTweetしたときにデフォルトでいれておきたい文字列を入れる -->" data-url="<!-- ここにTweetしたときに入れたいURLを入れる -->" data-lang="ja<!-- 日本語の場合 -->">
 Tweet
 </a>
</div>

シェアボタンのパラメタについての詳細

公式ドキュメントを参照(English)→https://dev.twitter.com/web/tweet-button/parameters