「作った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のリンクボタンが押された時の処理をカスタマイズしていきます。
- data-textは、ツイートしたい文章を設定できます。
- data-urlは、シェアしたいサイトURLを記入します。
- data-langは、日本語サイトなら”ja”でＯＫです。
- data-hashtagsは、ハッシュタグを設定できます。
これでツイートボタンが作れます。
私は「駆け出しエンジニアのタイピングゲーム」を広めたいと思い、ツイートボタンを作ってみました。
「この記事が参考になった」という方はぜひ、駆け出しエンジニアのタイピングゲームで遊んでいって下さい。よろしくお願いします。
スポンサーリンク
