JavascriptでTwitterへの投稿機能を作る

今回はjavascriptを用いてTwitterで任意の文章の投稿ダイアログを表示する方法をまとめました。
以前Facebookへのフィード投稿を実装し、記事としてまとめましたが、
ゲームサイトとして、ゲームの結果をシェアするにはFacebookよりTwitterの方が用途にあっているような気はしています。

Facebookへフィード投稿する方法はこちら！ JavascriptでFacebookに投稿する

出来ること

文字列、URL、ハッシュタグ、リプライ先アカウントを指定して、自由にツイートすることが出来ます。
他にも色々設定できるパラメータはありますが、文字列以外は実質任意です。

実装手順

1.htmlファイルにメタデータを設定

上の画像のようなTwitter Cardを設定する部分になります。
シェア元URLを関連付けないで、テキストだけで投稿する場合はスルーしてOKです(その事例は大分レアだと思いますが、、、)

htmlファイルのmetaデータを書き換えて作成することとなります。
ogで設定すればほとんどのSNSで汎用性はあるかもですが、
Twitterとして用意されているので、一応専用のものを設定しておくと安心ではあります。
→phpで出し分けるなどすればあまり手間でもないので、、、

以下をhtmlのheadタグ内に記載すればOKです。【】内は必要な情報に書き換えて下さい。


<!-- 【】内は適宜書き換えて下さい -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="【アカウント名(例：@santmove_com)】" />
<meta name="twitter:title" content="【シェアするページのタイトル】" />
<meta name="twitter:description" content="【シェアするページの概要】" />
<meta name="twitter:image" content="【シェアするページのアイコン画像(絶対パス)】" />
<meta name="twitter:url" content="【シェアするページのURL】" />

なお、正常に設定されているかどうかは以下のサイトにURLを入力することで確認できます。
画像についてはすぐに反映されないようなので、小一時間ほど待ってから確認すればOKです。

Card Validator | Twitter Developers
https://cards-dev.twitter.com/validator

2.実は後はURLを開くだけ、、、

TwitterはWeb Intentsが用意されていて、URLにアクセスするだけで指定内容の投稿ページへ遷移できるので、Facebookと比べると本当に優しい仕様です。
santmove.comではゲーム内ボタンからjavascriptで立ち上げるような仕様にしていますが、aタグで開いても全然大丈夫です。

https://twitter.com/intent/tweet?　の後に、任意で以下のURLパラメータを送ってあげればOKです。
・text：投稿文
・url：シェアするURL
・hashtags：ハッシュタグ
・via：提供元アカウント
・related：ツイート後に表示させるユーザーアカウント名
・in_reply-to：引用ツイートする場合、引用するツイートのTweet ID

以下はsantmove.com内で使用している実際のjavascriptメソッドです。
上記の情報の内、ゲーム結果として必要かなぁと判断したのは投稿文、URL、ハッシュタグ、アカウントくらいかなぁと思ったのでそれのみに絞っています。
強いて言えば、結果画面が上書きされないようにwindow.openで別タブで開くようにしているくらいです。


//openTwitter(投稿文、シェアするURL、ハッシュタグ、提供元アカウント)
function openTwitter(text,url,hash,account) {
	var turl = "https://twitter.com/intent/tweet?text="+text+"&url="+url+"&hashtags="+hash+"&via="+account;
	window.open(turl,'_blank');
}

//呼び出し例：openTwitter("テスト","https://santmove.com","santmove","santmove_com");

参考サイト： Tweet Web Intent(Twitter Developer Documentation)

感想・リクエストなどは公式Twitterアカウント(＠santmove_com)まで是非ご連絡よろしくお願いいたします！
また、ゲームの感想なども励みとなりますのでよろしくお願いいたします！

ではまた！

santmove.