昨日のナニゴダカシラベルーノの更新で実装したんですが、ボタンからつぶやく際の内容を動的に変更するようにしてあります。

ひと手間だったのでやり方を公開しておきます。なんか強引でBKちっくなので、もっとうまいやり方あれば教えてください。

Twitterボタン

本家サイトから。

任意の内容でつぶやくボタンはここで作る事ができます。それはそれで良いんですが、動的に変更するにはひと手間かかるわけです。

iframeのURLを確認

先に結論を述べますが、TwitterボタンのiframeのURLを変更します。

公式サイトで得られるコードはaとscriptだけでiframeはないのですが、このコードを貼付けると、画面表示時にスクリプトが実行されてa要素は消え、代わりにボタンを表示するiframe要素が設置されます。このiframeに指定しているURLに応じてボタンが生成されるようです。

例えばこんな感じのURL。

http://platform.twitter.com/widgets/tweet_button.1326407570.html#_=1326949500872
&_version=2&count=horizontal&enableNewSizing=false&id=tweet-button&lang=ja&origi
nal_referer=http%3A%2F%2Fginpen.com%2Flab%2Fwhatlang%2F&size=m&text=%E4%BD%95%E8
%AA%9E%E3%81%A0%E3%81%8B%E8%AA%BF%E3%81%B9%E3%82%8B%E3%82%84%E3%81%A4%20%2F%20%E
3%83%8A%E3%83%8B%E3%82%B4%E3%83%80%E3%82%AB%E3%82%B7%E3%83%A9%E3%83%99%E3%83%AB%
E3%83%BC%E3%83%8E%20http%3A%2F%2Fginpen.com%2Flab%2Fwhatlang%2F&url=ginpen.com%2
Flab%2Fwhatlang%2F

パラメーターというか世に言うところのハッシュ#なんですが、まあともかく整理してみるとこんな感じです。

  • http://platform.twitter.com/widgets/tweet_button.1326407570.html# …
name value
_ 1326949500872
_version 2
count horizontal
enableNewSizing false
id tweet-button
lang ja
original_referer https://ginpen.com/lab/whatlang/
size m
text 何語だか調べるやつ / ナニゴダカシラベルーノ https://ginpen.com/lab/whatlang/
url ginpen.com/lab/whatlang/

どうやらtextの値を変更すれば良さそうです。

動的に変更する

iframeで表示しているページはオリジンが異なるのでアクセスする事はできない（location.hrefは触れない）が、iframe要素オブジェクトのsrcプロパティは読み書きが可能です。

取得できたら後は書き換えるだけですね。正規表現が楽で良いでしょう。

<span id="twbutton">（ここにボタン）</span>

// iframe要素とURLを取得
var elTwFrame = document.querySelector('#twbutton iframe');
var url = elTwFrame.src;

// 任意の文章のボタンを表示するURLを生成
var nextUrl = url
  .replace(/([#&]text=)([^&]+)/, function(s, m1, m2) {
    return m1 + encodeURIComponent("任意の文章");
  });

// URLを書き換え
// （"#"以降の書き換えだと画面が再読み込みされずボタンが変わらないので、
//   一度別のURLに変更してから目的のものを設定する。）
elTwFrame.src = 'about:blank';
setTimeout(function() {
  elTwFrame.src = nextUrl;
}, 1);

setTimeout()使うあたりがナンダカナーなので、もっと良いやり方あれば教えてください。Twitter側でそういうAPIあったりするのかな？