HTML/CSS

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

 

「WebサイトやサービスをTwitterで拡散したい」って思ったときの「ツイートボタンの作り方」をご紹介します。

 

下のようなリンクボタンを押すと、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”でＯＫです。
  4. data-hashtagsは、ハッシュタグを設定できます。

 

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

 

私は「駆け出しエンジニアのタイピングゲーム」を広めたいと思い、ツイートボタンを作ってみました。

「この記事が参考になった」という方はぜひ、駆け出しエンジニアのタイピングゲームで遊んでいって下さい。よろしくお願いします。

関連記事