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

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

関連記事

YouTubeがようやくオレのアイデアをパクりだした

タイトルは釣りです。調子こいてスミマセン>< 今、YouTubeみてたら微妙な変化に気付きまして。 トップとか検索結果画面の一覧で、HD画質に対応している動画のタイトル横に白い「HD」アイコンが追加さ …

no image

PukiWiki, MovableType, そしてGoogleガジェット

何やら楽しげなこのタイトルは一体なんなのか。 (注:同業界の人しか分からないと思いますが・・・) 正解は今週俺がやっている仕事の一部です。 前職の同僚に「お前は遊んでいるのか?」と疑われそうです。 い …

YouTubeが無料で商用利用も可能なオーディオライブラリーを公開。約160曲がダウンロード可能!作業用BGMにも最高!

YouTubeでは管理画面内の編集機能で利用できるオーディオトラックが15万曲も用意されていますが、あくまでYouTube内での利用しかできない制限がありました。今回ダウンロード可能なオーディオライブ …

祝『攻殻機動隊ARISE』新シリーズ制作記念で『攻殻機動隊S.A.C』がYouTubeで全26話無料配信中

ついにベールを脱いだ攻殻シリーズの最新作『攻殻機動隊ARISE -GHOST IN THE SHELL-』ですが、その制作記念としてついさきほどから、1stシリーズの『攻殻機動隊 STAND ALON …

MacのFinderでWindowsのエクスプローラーみたいにアイコンをプレビュー表示にする方法

いまさらで、当たり前な方法なのかもしれませんが、 自分が最近会社の先輩に教えてもらい、多いに幸せになった事をメモしときます。 Windowsのエクスプローラーだと、 [表示] → [縮小版] とやると …

スポンサードリンク

スポンサードリンク