概要

最近作ったサイトで、Tweet機能を実装する際に、診断メーカーとかでよくある「ツイート内容を動的に書き換える」のにひと工夫必要だったので、ここでまとめておこうと思う。

機能の詳細

ツイートボタンをクリックすると、Javascriptが動いて、テキストを生成してツイート画面に遷移、という流れ

実装

まずTwitter公式が提供するテンプレートのツイートボタンを試してみる

Twitterの公式で、ツイートボタンを生成できる
リンク：https://publish.twitter.com/#
下にスクロールすると、下記のオプションがあるので、右の"Tweet Buttons"をクリック
下記のようなポップアップが出てくるので、今回は一番左の"Share Button"を押す
コードが生成されるので、コピーしてみる(下記はサンプル)

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

設定できるパラメータはここで見れる。よく使いそうなのは以下。

data-text="テキストの内容"
data-url="ツイートに埋め込むURL(デフォルトはボタンのあるページ)"
data-hashtags="ハッシュタグ"

仕組みとしては、"data-"の部分で内容が様々指定でき、それに従ってツイート画面へURLを生成してくれる
しかしこれでは、内容を静的にしか指定できない
そこで、Javascriptで動的にURLを生成することで好きなようにテキストをいじっていく

とりあえずツイートボタンを作る

さっき生成したaタグは使えないので、オリジナルでツイートボタンを作る
下記はFontAwesomeを使ったサンプル

index.html

<!-- FontAwesome5.1のCDN --!>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

index.html

<!-- ツイートボタン --!>
<div class="tweet" id="tweet">
    <button id="twitter-share-button"><i class="fab fa-twitter"></i>ツイートする</button>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

style.css

div.tweet {
    /* display: none; */
    text-align: center;
}

div.tweet button {
    /* font-family: serif; */
    text-align: end;
    border: none;
    font-size: 26px;
    background-color: #1DA1F2;
    padding: 6px 16px;
    border-radius: 100vh;
    color: white;
    cursor: pointer;
}

i.fa-twitter {
    font-size: 26px;
}

サンプル画像

ここからJavascriptでURLを生成する

今回は、テキストだけを動的に変えたい
他に指定するのは、サイトのURLとハッシュタグ
中身が変わるHTML要素を作成

index.html

<!-- 中身が変わる -->
<div class="tweet-text" id="tweet-text">
    <!-- ここのテキストをツイートしたい -->
</div>

index.js

// ツイートボタン押下時にテキストを動的に変更してツイート
document.getElementById("twitter-share-button").onclick = function() {
    // 出力結果を取得
    let text = document.getElementById("tweet-text").innerText;

    // オプションパラメータを設定
    let hashtags = "ハッシュタグ";
    let url = encodeURIComponent(location.href)  // location.hrefは今いるURL

    // URLを生成して遷移
    window.open("https://twitter.com/share?text=" + text + "&hashtags=" + hashtags + "&url=" + url);
}

URLは、"https://twitter.com/share?"の後ろに、設定したいパラメータをつなげていけば良い
完成

まとめ

ツイートボタンってもっと複雑なのかと思ってたけど、静的な内容ならテンプレートで完結するし、動的でもすぐ実装できることがわかった。
自分で何か作ったときには積極的に採用して、ツイートを見てニヤニヤしたい。
記事を読んでくださった方は、既読感覚でLGTMを押していただけるととても励みになるのでよろしくお願いします！

筆者

文系独学でプログラミングしてる大学生(@aiju__19)