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

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

関連記事

no image

mixi日記と外部ブログの微妙な関係

前のエントリーでRSSからmixi日記に自動投稿する仕組みを作ったんですが、冒頭に少しだけキッカケを書きました。 自分が文章を書く場所はほとんどこのブログだけなのですが、mixiにも外部ブログ設定をし …

TopHatenarでこのブログを調査

TopHatenarがはてな意外のサービスにも対応したようです。 はてなダイアリーのランキングサイトとして公開してきたTopHatenarですが、今回、はてな以外の全ドメインのブログに対応しました。 …

Googleドキュメントのフォーム機能からGoogle Apps Scriptを使ってメール送信

【2014/12/26:追記】 この記事はGoogleの仕様変更などで内容が古くなっていたため、最新の情報で書き換えました。 リンク先の記事を参照してください。 Googleドライブのフォーム機能から …

“善”意でつながるブログリレーション「zenback」

去る6/28に参加させていただいたSix Apart Media Dayでシックス・アパート社から発表された「zenback」をブログに導入しました。まだベータ版とのことで申し込み制ですが、順次アカウ …

MAC OS X Snow Leopard (10.6) をインストールしました!

珍しく予約とかしちゃってウキウキしながら到着を待っていた Snow Leopard は、お昼前くらいになって会社に届きました。 雪豹カワイイよ、雪豹 パッケージ裏はこんな感じ 中身はこんなん。分厚いマ …

スポンサードリンク

スポンサードリンク