ウェブサイトにツイートボタンを表示する方法

「作ったWebサイトをTwitterで拡散したい」って時は、Webサイトにツイートボタンを貼りましょう。

この記事では「ウェブサイトにツイートボタンを表示する方法」をご紹介します。

下のようなリンクボタンを押すと、Twitterアプリが起動し、ツイートできるボタンです。

ウェブサイトにTwitterのツイートボタンを表示する方法

ウェブサイトにツイートボタンを表示する方法を手順を追って説明します。

①headタグにスクリプトを記述する

HTMLのheadタグ内に以下のスクリプトを記述します。

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

②bodyタグにHTMLを記述する

bodyタグにHTML要素を記述します。

<div class="twitter">
   <a href="//twitter.com/share" class="twitter-share-button" data-text="駆け出しエンジニアのタイピングゲーム" data-url="https://taiyosite.com/typing_game" data-lang="ja" data-hashtags="駆け出しエンジニアのタイピングゲーム">ツイート</a>
</div>

③カスタマイズ

ツイート内容をカスタマイズします。

aタグの内容をカスタマイズします。

data-text	ツイートしたい文章
data-url	シェアしたいサイトのURL
data-lang	日本語のサイトなら”ja”でOKです
data-hashtags	ハッシュタグ