はじめに
今回は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(...);だけです。
Tweetボタンを押すと、以下のようなTweetを投稿できます。
※追記
Tweetが140文字を超えたらどうなるか確認したところ、以下のように403エラーとなりました。
実際に使うなら、文字数チェックの処理が必要ですね。
その他
最近Ultimate Chicken Horseをはじめました。
このゲームは4人対戦の2Dアクションゲームです。スタートからゴールまで早く到着したプレイヤーが勝ち、というシンプルなルールなのですが、試合ごとに足場やトラップを自由に設置できるので、後半になるほどカオスなコースになり、ワイワイと楽しむには最適なゲームです。
オンライン対戦に対応しているので、今は知らない人たちと野良で遊んでいるのですが、ボイチャをしてこそ真価を発揮するゲームだと思います。
おそらく年末のsteamセールの対象になるので、誰か買って一緒に遊んでください。
…作品名をアルティメイト・チキン・ヒーローズだと思っていたことは内緒です。