Tweetボタンでつぶやく内容を動的に変更する

Nov 11, 2018   #JavaScript 

はじめに

今回はWebページ設置するTwitterの共有ボタンからTweetを行う際、Tweetする内容を動的に変更する方法をご紹介します。

本文

Twitterの共有ボタンを設置するだけなら、Twitter公式サイトで生成できる以下のコードをHTMLに埋め込むことで簡単に実現できます。

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

しかし、この方法だとTweetする文章を動的に変更することはできません。

そこで、JavaScriptでTweetする内容を生成して、window.openメソッドでTweet共有用のURL(https://twitter.com/share) を呼び出すことで対応します。
URLに以下のパラメータを追加することで、ハッシュタグやアカウントを含めたTweetを行うことができます。

パラメータ 説明
text Tweetする文章
url Tweetに含めるURL
via Tweetに含めるアカウント
hashtags Tweetに含めるハッシュタグ
related Tweet後にフォローを勧めるアカウント

サンプルコード

以下がサンプルコードになります。
JavaScriptのコードが18行ありますが、ほとんどは現在時刻を求めているだけで、実際にTweetを行うのに必要なのは17行目のwindow.open(...);だけです。

See the Pen mQrWxz by foresukecom (@foresukecom) on CodePen.

Tweetボタンを押すと、以下のようなTweetを投稿できます。

※追記
Tweetが140文字を超えたらどうなるか確認したところ、以下のように403エラーとなりました。
実際に使うなら、文字数チェックの処理が必要ですね。

See the Pen dynamit_tweet_long by foresukecom (@foresukecom) on CodePen.

その他

最近Ultimate Chicken Horseをはじめました。
このゲームは4人対戦の2Dアクションゲームです。スタートからゴールまで早く到着したプレイヤーが勝ち、というシンプルなルールなのですが、試合ごとに足場やトラップを自由に設置できるので、後半になるほどカオスなコースになり、ワイワイと楽しむには最適なゲームです。

オンライン対戦に対応しているので、今は知らない人たちと野良で遊んでいるのですが、ボイチャをしてこそ真価を発揮するゲームだと思います。
おそらく年末のsteamセールの対象になるので、誰か買って一緒に遊んでください。

…作品名をアルティメイト・チキン・ヒーローズだと思っていたことは内緒です。