オリジナルのツイートボタンの呟き内容をjavascriptsで動的に変える方法
2015年9月25日 javascripts
【PR】当サイトにはアフィリエイト広告が含まれています。
WEBダイスを振った結果をツイートするボタンを作りたい！
……など、ブラウザ上でユーザーが行った動作の結果をツイートするボタンを作りたいことってありますよね。
ツイッター診断メーカーのような動きをするボタンが欲しいと思ったのですが、公式のツイートボタンのパラメーターを動的に変更する方法は、
http://offsidenow.phpapps.jp/archives/609
http://itra.jp/jquery_socialbutton_plugin/
↑
こちらのサイトさんで紹介されているように、簡単に実装できるプラグインがあったのですが、
公式のツイートボタンではなく、オリジナルデザインのツイートボタンで実装したいと思うと、上記では上手く動かせませんでした。
そこで、色々調べてみたところ、オリジナルボタンでも、なんとかツイート内容を動的に変更する方法がみつかりましたのでメモしておきます！
オリジナルのツイートボタンの呟き内容をjavascriptsで動的に変える方法
参考サイト：http://freefielder.jp/blog/2011/11/customized-tweet-button.html
それでは、「ユーザーがWEB上で６面ダイスを転がし、その結果をツイートする」ボタンを作成してみようと思います！
(1)HTMLの記述
まずHTMLの記述です。
|
1 2 3 4 5 6 |
<!--6面ダイス--> <input type="button" value="ダイスロールボタン" onclick="getDice();"> <span id="condice"></span> <!--ツイートボタン--> <a id="twitter_button" class="btn">この結果をツイート</a> |
ユーザーが<input type="button" value="ダイスロールボタン" onclick="getDice();">をクリックすると、
<span id="condice"></span>に６面ダイスを振った結果が表示されます。
この状態で<a id="twitter_button" class="btn">この結果をツイート</a>ボタンをクリックすると、
「あなたの出目は【○○】です」という内容をツイートできるようにします。【○○】の部分が動的に変更されます。
ツイートボタンのid="twitter_button"はjavascriptsで制御するためのid、class="btn"はcssでデザインを当てるためのクラスです。
javascriptsの記述に行く前に、オリジナルボタンのツイート内容を指定する方法を確認しましょう。
(2)オリジナルボタンのツイート内容の指定方法
参考サイト：http://freefielder.jp/blog/2011/11/customized-tweet-button.html
↑
こちらの参考サイトさんによりますと、
|
1 |
<a href="https://twitter.com/share?url=●URL●&text=●ツイート内容●&count=none&lang=ja"><img src="●画像のURL●" alt="" /></a> |
このように、aタグのhrefに必要な情報を渡す、もしくはjavascriptsでリンク先を指定すれば良いみたいです！
それでは、javascriptsを使って、hrefに動的なパラメータを渡してみましょう。
(3)javascriptsの記述
javascriptsの記述です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//ダイスロールボタンが押された時の処理 function getDice() { var dice = Math.floor(Math.random() * 6); document.getElementById('condice').innerHTML = (dice + 1); } //ツイートボタンが押された時の処理 $('#twitter_button').click(function() { //出目をHTMLから取得する var Deme = document.getElementById("condice").innerHTML; //ツイート内容をセット var tw_contents = ("あなたの出目は【" + Deme + "】です"); var url = "[my_home_url]"; //#twitter_buttonのhrefにパラメーターを渡す window.open().location.href = ("https://twitter.com/share?url=" + url + "&text=" + tw_contents + "&count=none&lang=ja"); }); |
1～5行目で、６面ダイスを回すための処理を書きました。
この結果、<span id="condice"></span>に出目が表示されます。
7行目から、ツイートボタンの記述に入ります。
#twitter_buttonをクリックすると、以下のjavascriptsが走ります。
10行目
|
1 |
var Deme = document.getElementById("condice").innerHTML; |
↑で、<span id="condice"></span>に表示されている出目を取得し、変数Demeに格納します。
12行目
|
1 |
var tw_contents = ("あなたの出目は【" + Deme + "】です"); |
↑変数tw_contentsに、ツイート内容を格納します。””内に不変の文言を書き、+で先ほど取得した変数Demeと連結して文章を作ります。
13行目
|
1 |
var url = "[my_home_url]"; |
↑こちらで、ツイート時に一緒に記載されるURLを指定します。ご自分のサイトのURLをご記入ください！
15行目
|
1 |
window.open().location.href = ("https://twitter.com/share?url=" + url + "&text=" + tw_contents + "&count=none&lang=ja"); |
location.hrefで、id="twitter_button"のaタグにリンク先を渡します。
location.hrefをwindow.open().location.hrefとすることで、target=_blankと同じ動きをさせることができます。
(4)デモ
また、当サイトで実際にツイートボタンを実装してあるページはこちらです！ご参考まで。
https://cthuwebdice.com/chara/
【PR】当サイトにはアフィリエイト広告が含まれています。
[…] 面に渡す必要があったのですが よく検索で出てくるのは <a>タグの中に色々書いていくものでこれではjsのデータを渡せなかったので結構調べてると こちらを見つけて解決しました。 […]