Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

Twitter 技術情報

見ているページをTwitterに投稿するBookmarkletとブログ用ボタン

投稿日:


[2009/06/18:追記]
bit.lyに対応したスクリプトも書きましたので、こちらもどうぞ。
【bit.ly対応版】見ているページをReTweetするブログ用ボタン [C!]

いしたにさんがブログにTumblrボタン付けて、Twitterボタンもつけたいようなので持っていたBookmarkletから在庫放出しますw

自分のブログのエントリーにTumblrに1クリックで投稿するボタンつけました。
(snip)
twitterボタンお待ちしてます!

via: 自分のブログのエントリーにTumblrに投稿するボタンつけた:[mi]みたいもん!

Tumblrボタンは単純にTumblr純正の bookmarklet をリンクにしているだけなので、Twitterも同じ要領でできます。

見ているページをTwitterに投稿するBookmarkletとブログ用ボタン

まずは、元となるBookmarkletから。
Surfing Page to Twitter
ソース中身はこんな感じ(便宜上、改行しています。)

javascript:
var d=document,
w=window,
l=location,
e=encodeURIComponent,
t=(d.selection)?d.selection.createRange().text:
(w.getSelection)?w.getSelection():
(d.getSelection)?d.getSelection():'',
f='http://twitter.com/home/?status='+e(t)+'+Surfing:+%22'+e(d.title)+'%22+'+e(l.href)+'+%2523webclip';
if(!w.open(f,'surfing'))l.href=f;
void(0);

このブックマークレットを実行すると、見ているページの情報が下記のようにTwitterの投稿フォームにセットされます。
Twitter画面
フォーマットは下記の通り。

{(あれば)引用} Surfing: "{ページタイトル}" {URL} #webclip

「Surfing:〜」とか「#webclip」はそんな書き方をしているツールが多そうなので採用しましたが、適宜書き換えてもいいかも。
で、これをブログに設置するには下記のようなコードを挿入します。

<a href="javascript:var%20d=document,w=window,l=location,e=encodeURIComponent,t=(d.selection)?d.selection.createRange().text:(w.getSelection)?w.getSelection():(d.getSelection)?d.getSelection():'',f='http://twitter.com/home/?status='+e(t)+'+Surfing:+%22'+e(d.title)+'%22+'+e(l.href)+'+%2523webclip';if(!w.open(f,'surfing'))l.href=f;void(0);">add Twitter</a>

こんなリンクボタンができます。
add Twitter
この場合内容的に、「Bookmarked:〜」とかにした方がいいかもですね。

見ているページをReTweetするブログ用ボタン

上でやった方法を応用するとReTweetボタンも作成可能です。
下記のHTMLコードを「yager」になっている部分をご自分のTwitterアカウントに差し替えて、ブログのテンプレートの好きな所に貼付けてください。

<a href="javascript:var%20tid='yager',d=document,w=window,l=location,e=encodeURIComponent,t=(d.selection)?d.selection.createRange().text:(w.getSelection)?w.getSelection():(d.getSelection)?d.getSelection():'',f='http://twitter.com/home/?status='+e(t)+'+RT+%40'+e(tid)+':+%22'+e(d.title)+'%22+'+e(l.href);if(!w.open(f,'retweet'))l.href=f;void(0);">ReTweet</a>

こんなリンクボタンができます。
ReTweet
フォーマットは(押してみれば分かるのですがw)下記の通り。

{(あれば)引用} RT @{あなたのTwitterアカウント}: "{ページタイトル}" {URL}

@記法を使っているので、だれがReTweetしてくれたのか分かりやすくていいですよね!

まとめ

ちなみにMacのFirefoxとSafariで動作確認しましたが、その他のブラウザは分かりませんw
変だったら教えてください。
あと、分かりづらいかもしれませんがここで紹介したスクリプトは「引用」に対応しています。見ているページの気になる部分を選択してからBookmarkletなりリンクボタンを押すと、選択部分がちゃんとフォームに入ります。Twitterをクリッピングツールとして使うのにも便利ですね。
ちなみに選択範囲の処理はこちらのエントリーで紹介した方法の使い回しですw
Deliciousでreblog:選択範囲をNOTESにコピーできるブックマークレット [C!]
enjoy!

-Twitter, 技術情報

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

Mii Editor で似顔絵作った

会社でMii Editorなるものがあると聞いて試してみたらナカナカ面白かったので、自分の似顔絵も作ってみる事にした。  ・Mii Editor: Create and Edit Mii Charac …

300エントリー突破で考える「クチコミの技術」

7月のランキングをまとめていた時に偶然気がつきました。 いつのまにか累計エントリー数が300を超えていたのです。 (ちなみに300番目は「夜景がキレイ」という気の抜けたminiエントリーだった…)

Googleが空回して意外な結果を返してきた

あまりにもビックリしたのでエントリーします。(ネタです) ちょっとlog4phpを調べようと思ってググって見たら、Googleさんの回答は以下の通り。 フィ、フィリピン・・・ペソ!?

ついに、iPadが整備済製品に初登場。apple_outletでチェック!

iPadの成功は誰一人予測してなかったのかどうかはさておいて、ついにAppleStoreのアウトレットとも言える、整備済製品にiPadが登場したんですよー! で、Appleの整備済製品といえば・・・こ …

Google:Gmailをストレージとして使用するFirefox拡張「Gspace」

Gmail は 無料で 2GB 以上のスペースを利用できる便利なWEBメールサービスなのだが、その容量をオンラインストレージとして利用してしまおうというアイデアからなるツールがこの「Gspace」です …

スポンサードリンク

スポンサードリンク