体が硬いどっとこむ

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

5月
24

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=<?php 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/

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

  1. マッタックわかりませんが、ありがとうございます。こういう事の積み重ねが、サイトを支える事がわかっただけでも勉強&感謝です!

  2. 今のところ、
    http://twitter.com/intent/tweet?text=
    でも通るみたいですね。でも、また、いつ仕様変更されるかわからないから、
    リダイレクト前のhttp://twitter.com/share?text= を使いたい。でも、小窓が出るのは魅力的な部分もあるな〜
    ていうか、http://twitter.com/intent だと、twitterのapi内部アカウントにジャンプするから、変わる可能性がないとはいえないか。

  3. Pingback: オリジナルのツイートボタンにしたい場合

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください