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

Sponsored Link

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

Sponsored Link

10件のコメント

  1. kira2010年3月17日 7:30 PM返信

    ハラヒロケンタロウさん こんにちわ

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

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

    準備作業も結構楽しいものですよね w

    http://kira-ism.seesaa.net/

  2. kentaroharahiro2010年3月17日 12:07 PM返信

    私のブログにもボタン設置できました。
    ありがとうございました!!

    http://misoziotoko.seesaa.net/

  3. kira2010年2月8日 10:44 PM返信

    鈴木酒店さん こんにちわ

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

    ブログも拝見しました。
    色々やられていますね!
    手作りつぶやくアイコンもいい感じですねー

    http://kira-ism.seesaa.net/

  4. 酒ゲーム★鈴木酒店2010年2月8日 7:38 PM返信

    つぶやくボタンを設置(twitter)

    「Twitter(ツイッター)」は、140字以内で「今してること」や「今の気持ち」なんかをミニブログ&チャット的につぶやくゆる~い繋がりの注目度爆発なサービス。私のつぶやき(ツイート)はこちら▼http://twitter.com/sake_online…あまりつぶやいてないけどね(^^;で、最近は

    http://osake.eshizuoka.jp/e522901.html

  5. 鈴木酒店2010年2月8日 7:38 PM返信

    はじめまして。
    「つぶやくボタン」を設置しようと思ってこの記事に到着し、ご説明もソースもとっても参考になりました♪
    今ではいろいろなブログパーツもあったりしますが、やっぱあれですね、自分でオリジナルのを考えてった方が楽しいし、スッキリしますよね!笑。
    ありがとうございました(^-^)

    http://osake.eshizuoka.jp/

  6. ニート公務員の決意2009年10月1日 11:41 AM返信

    記事をツイットするボタンを設置

    kira-ismというブログの『seesaaブログに「twitterにつぶやくボタン」を簡単に設置する方法』 という記事を読み、早速使わせていただいた。kiraさんありがとう!

    http://excursionist2free.seesaa.net/article/129245593.html

  7. kira2009年9月30日 8:56 PM返信

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

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

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

    ソースへの埋め込み方の記述を後ほど追記しようと思います。

    http://kira-ism.seesaa.net/

  8. hidemonster2009年9月30日 1:43 PM返信

    kiraさん、はじめまして。
    Tweetのスクリプト、早速使わせて頂いています。
    アドバイス非常に助かりました。
    ありがとうございます!!

    http://excursionist2free.seesaa.net/

  9. ROUTE 36.22009年7月18日 1:26 AM返信

    JUGEMでtwitterボタンをエントリにつけてみた。

    誰も書いてなさそうなのでこっそりと… 的な。ついったー(twitter)との連携。つぶやきがブログパーツになってプラグインに表示されてたりって楽しそうだと思ったのですよ。それに、アタシ!HTMLくらいなら書けるしCSSも何とか…!と思ってやってみたのが、こちら。このソース↓をコピペして、赤い部分を任意の文字列に書き換えするとお使い頂けます。&lt;a href="javascript:window.location=’http://twitter.com/home?status= RT ‘+encodeURIComponent(‘{entry_title}’)+’ ‘+encodeURIComponent(‘{entry_permalink}’)+’ (via @YOU_5)’;" target="_blank"&gt;&lt;img src="画像の名前" title="この記事をTwitterでつぶやく" width="16" height="16" class="pict" /&gt;&lt;/a&gt;このエントリの右下にも、おなじみの青いアイコンがついてますので良ければぽちっと。

    http://route362.jugem.jp/?eid=38

コメントを残す