プレイ無料!ブラウザで遊べるHTML5ゲームサイト!

TOP> 記事一覧> JavascriptでTwitterへの投稿機能を作る

2017/04/24

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.

矢印Fever

矢印Fever

ノリノリでフリックしてフロアを沸かそう!手持ちの音楽を聴きながらのプレイがオススメ!


当サイトはブラウザで遊べるゲームサイトです。

最新のゲームです!
Rotate Number Panels

Rotate Number Panels

ロテパネって呼んでね!キレイなパネルをクルクル回して数字を並べよう!相当頭をつかうよ!

人気のゲームです!
避けて食べてペンギンタワー

避けて食べてペンギンタワー

ペンギンだって暖を取りたい!氷を避けて登って、アツアツ料理を食べよう!

よかったら遊んでいって頂けると幸いです!面白かったら是非シェアしてください!

また以下のリンクよりお買い物頂けるとサイト運営の助けとなりますので、もしよろしければ是非よろしくお願いいたします!

楽天市場

amazon

良ければ是非いいね・シェアしてください!

このエントリーをはてなブックマークに追加

この記事のコメント

この記事にはまだコメントがありません。
はじめてコメントしてみませんか?


ログインするとコメント出来ます!
ログイン
無料アカウント作成

ログインしていません!

アカウントを作るとスコアの保存・閲覧が可能です!(無料です)
アカウントを作る!

サイト運営者

運営:サントムーブ

案件の依頼や問い合わせなどはコチラ!

メンバー

santmove.

プログラマー(代表)

最近更新されたゲーム

うなかぞえ

New! 2019/07/17 更新

萬雀 -マンジャン-

New! 2019/07/13 更新

夜景と炒飯

2019/04/14 更新

新着公開ゲーム

Rotate Number Panels

2019/03/10 公開

記憶丼

2019/02/24 公開

スシバタケ

2019/02/17 公開