2014年11月24日月曜日

ゲームのスコアをtwitterボタンを押したときのツイートコメントに表示する(javascript)

javascriptで計算して出したゲームのスコアを
twitterボタンを押したときのツイートコメントに表示するには
どうすればいいのだろうか

と、調べていたら、すごくわかりやすいページを見つけた。
http://marcus-christie.blogspot.jp/2011/07/how-to-dynamically-change-tweet-buttons.html

とりあえず、自分でも確認
HTMLの部分に下の呪文を書くとtwitterのボタンの絵が表示される。

<iframe id="tweet-button" allowtransparency="true" frameborder="0" scrolling="no"
            src="http://platform.twitter.com/widgets/tweet_button.html?via=miyuki&amp;text=Replace%20Me&amp;count=horizontal"
            style="width:110px; height:20px;"></iframe>


javascriptの部分には

onload = function() {game_start();};//サイトを立ち上げたときに動かす関数

function game_start(){
score=0;//ゲームのスコアをscore変数に保存、スコアは変わる
score=score+12;//なんとなく12を足してみる
game_over();
}

function game_over(){
//ゲームオーバー時にtwitterボタン押した時のコメント変えるよ
var message="あなたのスコアは"+score+"です";
updateTweetButtonText(message);
}

/*この関数がtwitterボタンを押したときのコメントをスコアによって変える関数*/
function updateTweetButtonText(message) {
  var tweetButton = document.getElementById('tweet-button');
  tweetButton.src = tweetButton.src.replace(/&text=[^&]+/, "&text=" + encodeURIComponent(message) );
}

-----------------------

さて、これでどうなったかtwitterボタンを押して確かめてみよう。
あなたのスコアは12ですと出てきたと思います。

これができると、javascriptプログラム内に出てきた変数の値をtwitterボタン押した時に出せます。
また、これは、ゲームをしているうちに成績が変わっても、変わった後の成績を出すことができます。

<どうでもいい追記> twitterボタンじゃなくてツイートボタンかこれ

0 件のコメント:

コメントを投稿