公式な方法に準拠して、Wordpressにtwitterボタンをカスタマイズして挿入する方法

20011年5月20日あたりから、twitterボタン(ツイートする)ボタンの暗黙の了解というか先人の知恵というか、普及していた、 「http://twitter.com/home?status=hogehoge」 っていう方法が使えなくなってしまったようです。

公式ツイートボタンを設置している場合は気になりませんが、ボタンの形状をカスタマイズしたい場合、これは痛い。 公式なウィジェットJavascriptとそのなかのiFrameで自動的にスタイルを定義されてしまいますので、ボタンの形状やスタイルを適用できません。 ゴニョゴニョやっててもJS→iFrame→そのなかのCSSまで追いかけないといけない。

しかし、最も簡単な方法に到達しました。 特にWordpressでスタイルをあわせているような人も少なくないのではないかと思います。

デベロッパーズの解説では少し分かりにくいっていうか、読んで思い出すのが面倒くさいのでメモです。

Wordpressではタイトルからのような動的な文字列を渡せるので、この方法は汎用性があると思います。

アンカー(Aタグ)パラメータ付きURLを記述してblankウィンドウを開くだけです。 公開された公式な方法(http://twitter.com/home?ではなくhttp://twitter.com/share?のほう)だと、URLエンコードは属性パラメータのlang=jaにするだけで、自動的にエンコードしてくれるみたいです。わざわざエンコードしないでもいいなんて、最高!さすが公式! もしかしたら、古いブラウザだとやっぱエンコードしないとだめかも!

以下、Wordpressの場合で自動的にtwitterの入力フォームや値を渡すパラメータ名

url <?php the_permalink() ?>
via 自分のtwitterアカウント
text <?php the_title(); ?>(記事のタイトルを入れる場合)
related 関連アカウントとか自分のアカウント(入れても入れなくても可)
count カスタマイズの場合いらないかな?
lang 日本語ではja
counturl カスタマイズの場合いらないかな?

記述例:

<a href="http://twitter.com/share?text= the_title(); ?>&amp;via=自分のアカウント&amp;lang=ja&amp;url=<?php the_permalink() ?>" target="_blank">ここにボタン画像とかテキストとか</a>

テキストだとこんな感じ 超簡単!

5/26追記: 公式の情報があった http://dev.twitter.com/pages/intents ちなみに「http://twitter.com/?status=hogehoge」だったら、まだ有効だった。 なんなのこれ。

ほんでちょっと詳しい記事も見つけました http://blog.diginnovation.com/archives/1042/