LoginSignup
141
115

More than 3 years have passed since last update.

Twitterシェアボタンの設置

Last updated at Posted at 2018-01-11

(2019年6月追記)

本記事はTwitter公式のシェアボタン設置方法をまとめたものですが、この実装だと読み込みのスピードが遅くなります。SEO的な観点を踏まえると、もう少し工夫して実装したほうがよいかもしれません。


多くの方の記事があったが、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

141
115
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
141
115