日曜エンジニアのIT道場
ITを学び、DXに備える
    HTML&CSS

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

    「作った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ハッシュタグ

     

     

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

    記事を読んでくださりありがとうございました。参考になったという方は、広告をクリックしていただけると励みになります。よろしくお願い致します。