HTML&CSS

【Web制作】Twitterのツイートボタンを作る方法

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

そこで今回は「ツイートボタンの作り方」をご紹介します。

 

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

URLやハッシュタグを自動で表示してくれます。

Twitterのツイートボタンの作り方

ツイートボタンの作り方の手順です。

①headタグに下記のコードを貼り付ける。

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

 

②bodyタグに下記のコードを貼り付ける。

<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>

 

③カスタマイズしていきましょう。

Twitterのリンクボタンが押された時の処理をカスタマイズしていきます。

 

  1. data-textは、ツイートしたい文章を設定できます。
  2. data-urlは、シェアしたいサイトURLを記入します。
  3. data-langは、日本語サイトなら”ja”でOKです。
  4. data-hashtagsは、ハッシュタグを設定できます。

 

以上です。ありがとうございました。

これで、ツイートボタンが作れます。

 

個人開発したWebアプリの駆け出しエンジニアのタイピングゲームを広めたいと思い、ツイートシェアボタンを作りました。