本ブログはhttp://kira-ism.com/に移転しました。

続きはhttp://kira-ism.com/でお楽しみ下さい。

2009年06月04日 Tweet It!  このエントリーをはてなブックマークに追加

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

twitter上で

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

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


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

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


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

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

と思い、

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


というお話。

特に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ユーザ間で情報共有できれば嬉しいです。





posted by kira at 09:00 | Comment(6) | TrackBack(3) | internet/IT | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
kiraさん、はじめまして。
Tweetのスクリプト、早速使わせて頂いています。
アドバイス非常に助かりました。
ありがとうございます!!
Posted by hidemonster at 2009年09月30日 13:43
お役に立ててよかったです。

ソースへの埋め込み方はseesaaのカスタマイズをしたことのない方には分からない部分だったかもしれません。

ついったーでのつぶやきを見てそれを気づかされました。
ありがとうございました。

ソースへの埋め込み方の記述を後ほど追記しようと思います。
Posted by kira at 2009年09月30日 20:56
はじめまして。
「つぶやくボタン」を設置しようと思ってこの記事に到着し、ご説明もソースもとっても参考になりました♪
今ではいろいろなブログパーツもあったりしますが、やっぱあれですね、自分でオリジナルのを考えてった方が楽しいし、スッキリしますよね!笑。
ありがとうございました(^-^)
Posted by 鈴木酒店 at 2010年02月08日 19:38
鈴木酒店さん こんにちわ

お役に立ててよかったです。

ブログも拝見しました。
色々やられていますね!
手作りつぶやくアイコンもいい感じですねー
Posted by kira at 2010年02月08日 22:44
私のブログにもボタン設置できました。
ありがとうございました!!
Posted by kentaroharahiro at 2010年03月17日 12:07
ハラヒロケンタロウさん こんにちわ

お役に立ててよかったです。

ブログも拝見しました。
再開準備中なのですね。

準備作業も結構楽しいものですよね w
Posted by kira at 2010年03月17日 19:30
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック

JUGEMでtwitterボタンをエントリにつけてみた。
Excerpt: 誰も書いてなさそうなのでこっそりと… 的な。ついったー(twitter)との連携。つぶやきがブログパーツになってプラグインに表示されてたりって楽しそうだと思ったのですよ。それに、アタシ!HTMLくらい..
Weblog: ROUTE 36.2
Tracked: 2009-07-18 01:26

記事をツイットするボタンを設置
Excerpt: kira-ismというブログの『seesaaブログに「twitterにつぶやくボタン」を簡単に設置する方法』 という記事を読み、早速使わせていただいた。kiraさんありがとう!
Weblog: ニート公務員の決意
Tracked: 2009-10-01 11:41

つぶやくボタンを設置(twitter)
Excerpt: 「Twitter(ツイッター)」は、140字以内で「今してること」や「今の気持ち」なんかをミニブログ&チャット的につぶやくゆる〜い繋がりの注目度爆発なサービス。私のつぶやき(ツイート)はこちら▼htt..
Weblog: 酒ゲーム★鈴木酒店
Tracked: 2010-02-08 19:38
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。