オリジナルのツイートボタンの呟き内容をjavascriptsで動的に変える方法

2015年9月25日 javascripts


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上で6面ダイスを転がし、その結果をツイートする」ボタンを作成してみようと思います!

 

(1)HTMLの記述

まずHTMLの記述です。

ユーザーが<input type="button" value="ダイスロールボタン" onclick="getDice();">をクリックすると、
<span id="condice"></span>に6面ダイスを振った結果が表示されます。
この状態で<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

こちらの参考サイトさんによりますと、

このように、aタグのhrefに必要な情報を渡す、もしくはjavascriptsでリンク先を指定すれば良いみたいです!

それでは、javascriptsを使って、hrefに動的なパラメータを渡してみましょう。

 

(3)javascriptsの記述

javascriptsの記述です。

1~5行目で、6面ダイスを回すための処理を書きました。
この結果、<span id="condice"></span>に出目が表示されます。
 

7行目から、ツイートボタンの記述に入ります。
#twitter_buttonをクリックすると、以下のjavascriptsが走ります。
 

10行目

↑で、<span id="condice"></span>に表示されている出目を取得し、変数Demeに格納します。
 

12行目

↑変数tw_contentsに、ツイート内容を格納します。””内に不変の文言を書き、+で先ほど取得した変数Demeと連結して文章を作ります。
 

13行目

↑こちらで、ツイート時に一緒に記載されるURLを指定します。ご自分のサイトのURLをご記入ください!
 

15行目

location.hrefで、id="twitter_button"のaタグにリンク先を渡します。
location.hrefwindow.open().location.hrefとすることで、target=_blankと同じ動きをさせることができます。

 

(4)デモ

デモページはこちら

 
また、当サイトで実際にツイートボタンを実装してあるページはこちらです!ご参考まで。
http://cthuwebdice.session.jp/chara/


コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

カテゴリ

CONTACT

管理人:いのり

何かあればこちらよりお問い合わせください。

お問い合わせ