seesaaブログに「twitterにつぶやくボタン」を簡単に設置する方法

Tweet

twitter上で

「○○○○○ http://hoge」
(○○○○○は「おもしろい」等、twitter-er自身の感想)

という形式のつぶやきをよく目にする。

しかし、この手のつぶやきはあまりにシンプルすぎて
何についての感想なのか、何について書かれたページなのかが
分からないので非常に残念。

TLの流れは速いので、
そういうつぶやきはスルーしてしまいがちだ。
もしかすると、自分に重要な情報なのかもしれないのに。

そこで、少なくとも自分のブログには、

自分が満足する形式でTweetされる仕組みを設置したい
しかもseesaa限定でもいいのでシンプルなコードがいい

と思い、

簡単Tweetスクリプト(seesaa blog設置専用) を作ったよ！
みんな、自由に使ってね！

というお話。

Sponsored Link

**************************************
このブログはかつてseesaaブログで書かれており、この方法でのボタンの設置された様子や当時のエントリはseesaaブログに「twitterにつぶやくボタン」を簡単に設置する方法 | kira-ism / yesterdayを御覧ください。
**************************************

特にwebプログラミングの経験がない(web以外ならある)自分でも「自作できるな」と思ったのは、@msngさんのいま見ているページを認証不要でTwitterに投稿するブックマークレット – 頭ん中というエントリがきっかけ。

そこで紹介されていたのは、「見ているページ」のタイトルとURLをつぶやくためのシンプルなブックマークレットだ。

しかし、自分は「ブログのトップページからでも、各エントリのタイトルとURLをつぶやけるもの」がほしいと思ったので、そこはちょっと工夫が必要。

とはいえ、seesaaは独自関数でそういったものを変数として簡単に取得できるので、簡単にコードが作れるはず！という読みもあった。

実際のところ、
seesaaにもいつの間にかtwitterにつぶやくボタンが用意され、
すでに使っているAddClipsにも同様の機能があるが、
これらのtwitterポスト機能は使いたくなかった。

その理由については、別途エントリを書くつもり。

調べてみると、
twitterにポストするコードの紹介はいくつもあったが、
seesaaに特化したものは見つからなかった。

そこで、まず参考にしたのは記事をTwitterに投稿できるアイコンを追加しました: Podcast journal – ポッドキャストジャーナル。
(ここで言及されているTweetMemeへの考え方は自分と同じ)

MovableTypeだとこんなに簡単に出来てしまうのか！
「ならば、MTベースのseesaaでも容易なんだろう」とこの時点でコードを自作したが、日本語が全て文字化けしてしまった。

「何でかなー？」と思いながら、次に参考にしたのはブログにTwitterボタンを付ける方法 － Blog on Publickey。

こちらもMovableTypeでの解説だけど、
「URLエンコード処理が抜けたままTwitterボタンの作成方法を紹介しているWebサイトもありましたが、リンクとして表現するのですからURLエンコードは必要だと思います。」
の記述に注目した。

確かに、ここで紹介されているサンプルコードには「encode_url=”1″」なんてオプションが付いている。

頭ん中さんのサンプルコードを見直してみると、こちらでもencodeURIComponentでURLエンコードしてる。
(実はここでようやくencodeURIComponentというものを学習した)

そこで、上述の自作コードにencodeURIComponentを組み込んだところ、文字化けは見事に解消された。

しかしその後に、つぶやきのするフォーマットに「(via @kira88)」の語句を加えたら、今度は全く動作しなくなってしまった。

その理由はPHPとJSのURIエンコード比較を見て明らかになった。

つまり、URLエンコーディング不可の文字をエンコードしようとして、JavaScriptがコケていた、ということらしい。
これになかなか気が付かず、かなりハマってしまった・・・。

そこで「(via @kira88)」をURLエンコードしないように修正したら、ようやく完璧に動作して、大いに喜んだという次第。

尚、見ているページをTwitterに投稿するBookmarkletとブログ用ボタン [C!]もかなり参考になった。
しかし、変数に文字列を代入して・・・というプログラム的なことはしない、つまり極力シンプルなコードにするのが目標だったので、ここで書かれているようなスタイルは採らなかった。

勿論どっちが優れている、っていうことではなくて、好みの問題でしかないんだけれどね。

つぶやきのフォーマットは愛用しているTwitのReTweetのフォーマットが非常に良いと感じていたので、それをベースにし、「RT」の文字を「Browsing」に変更した。

尚、参考にしたTwitのReTweetフォーマットは以下の通り。

RT:引用文字列 (@hoge)
(@hogeは引用元のオリジナル発言者のID)

自分のtwitter上でのつぶやきをReTweetしてもらうのではないから「RT」はそぐわない、と判断したんだけど、
見ているページをTwitterに投稿するBookmarkletとブログ用ボタン [C!]をはじめ、「ReTweet」の文言を使っているサイトが多いことには違和感を感じた。

自分は「ReTweet」や「RT」を避けて、「Browsing」を使ったけれど、「Surfing」を使っているサイトも散見された。
「Surfing」もいいかもしれないね。

で、結局出来上がったコードは以下の通り。

<a href="javascript:window.location='http://twitter.com/home?status= Browsing:'+encodeURIComponent('<% article.subject %>')+' '+encodeURIComponent('<% article.page_url %>')+' (via @kira88)';" target="_blank"><span style="color:#33CCFF;">Tweet It!</span></a>

念のためseesaa独自関数について解説。
< % article.subject %> はエントリのタイトルを取得するseesaa独自関数
< % article.page_url %> はエントリのURLを取得するseesaa独自関数

■■20090930追記ここから■■
先日、ニート公務員の決意の@hidemonsterさんからこんなつぶやきを頂き、seesaaのカスタマイズをしたことのない方には、作ったコードの埋め込み方が分かりにくいことに、はたと気が付いたので、コードの埋め込み方を追記。

・上記のソースの埋め込み方
1.管理画面のデザインタブをクリックし、「コンテンツ」へ移動
2.「記事」を選び右上の「コンテンツHTML編集」をクリック
3.ここで表示されるソースに作成したコードを埋め込む

この「コンテンツHTML編集」で出てくるソースに埋め込まないと、独自タグは反映されません。

自分の場合は、コードを埋め込む場所はを<h2 class="date">～</2>で囲まれた部分の末尾にしていますが、これは勿論「ご自由に」ですね。
■■20090930追記ここまで■■

リンクはボタンにしたかったのだが、適当な画像がなかったので、取り合えず「Tweet It!」というテキストをリンクに使い、そのフォントカラーをtwitter blue(#33CCFF)に変更してみた。

更にリンクであることを示す下線が目障りなので消したいのだが、これはCSSを弄るのが面倒だし、ボタン画像があれば不要になるので放置している。

ということで、
次は「Tweet It!」のボタン用画像を作ろうかな！

●seesaa blogユーザの方はご自由にお使いください

これを気に入っていただけたら、ご自由にお使いください。

上記のコードのtwitter IDを書き換えれば、そのまま使えます。

Browsingとかvia～とかTweet It!もご自由に書き換えて下さい。

●読んでいただいた皆様へのお願い

「こうしたほうがいいよ」とか「それは違うよ」等あれば、
是非コメントをお願いします。

seesaaユーザ間で情報共有できれば嬉しいです。

Tweet