閲覧中ページをbitlyで短縮URLにしてからTwitterクライアントの投稿欄に入力するブックマークレット
これなに?
閲覧中サイトのURLを短縮URL化したうえで、Twitterクライアント(公式)のTweet投稿画面を開いてページタイトルと短縮URLを入力するものです。
例えば本ページの場合はこんな感じになります。
『 閲覧中ページをbitlyで短縮URLにしてからTwitterクライアントの投稿欄に入力するブックマークレット http://bit.ly/1cxACM7』
Mac / iOS(8.xで確認) いずれも Safari / Chrome で動作することを確認しています。
きっかけ
ブラウザで閲覧中のサイトをTweetして共有したいと思った時、
- URLをはりつけるのが面倒臭い
- ページタイトルも表示したいんだけどなぁ
- 文字数の節約/クリック数統計のためにbit.lyを使いたい
- iOS標準の共有機能によるTweetはいまいち好きになれない
といったシーンがあるかと思います。また、「家ではMacだけど外ではiPhone/iPadなんだよね」といったことも最近ではよくある話。そして、利用しているデバイスに応じて方法が変わるのも面倒くさい話。
というわけで、閲覧中のページを共有したい時 MacでもiPhoneでも、Twitter公式クライアントを入力窓にすればいいや、というのが今回の話。
使い方
普通のブックマークレットです。
bit.lyで短縮URLを作成するために自身のIDとAPIkeyを利用する前提で作っていますので、適宜書き換えてください。
それぞれ、i='your user name'
(メールアドレスではないもの)とk='your bitly API key'
(R_ から始まる桁数の多い文字列)の部分です。
Tweet w/t Bitly (Mac向けのリンク。お気に入り欄にドラッグして登録してください)
Tweet w/t Bitly (iOS向けリンク。iOSの場合はブックマークレットを直接お気に入り登録できないため、この仮URLをお気に入り登録したうえで、その後URLを下記のコードに書き換えてください。全部上書きでOKです)
なお、Safari も Chrome も、MacとiOS間でブックマークを共有(割と早い)する機能がありますので、その場合はブラウザで登録した方が楽です。
javascript:(function(d,l){ var i,k,u,s;i='your user name';k='your bitly API key';u='http://api.bit.ly/v3/shorten?format=json&callback=bitlycb&login='+i+'&apiKey='+k+'&longUrl='+encodeURIComponent(l.href);s=d.createElement('script');s.type='text/javascript';s.src=u;d.body.appendChild(s);})(document,location);var bitlycb=function(r){ var t,h;t=document.title;t=t?t:'';h='twitter://post?message='+encodeURIComponent(' || '+t+' '+r.data.url);console.log(h);location.href=h;};
他のTwitterクライアントを使いたい場合
ひとつのコードでMacもiOSも対応できる理由は、Twitterクライアントを起動するためのURIスキームが twitter://
となっており同一であるためです。ですので、以下の対応が可能です。
※注追記:macOSでの公式Twitterクライアントが配信停止されてしまったため、macOSでは twitter://
による起動が難しい状況に変わっています
- 他のTwitterクライアントでもMacとiOS対応しているものがあり、かつクライアントを呼び出すURLスキームの部分が同一である場合
- マルチデバイス対応なんていらない(例えばiPhoneだけでいいよ)という場合は、選択肢がグッと広がります。いくつかサンプルを記載しますが、色々ありますので調べてください。
- TheWorldの場合
theworld://scheme/post/?text=
- パラメータ有りiPhoneアプリのURLスキーム一覧
- TheWorldの場合
なお、これはTwitterクライアントに限定されるものではありません。
実装
(function(d,l){
var i,k,u,s;
i='your user name';
k='your bitly API key';
u='http://api.bit.ly/v3/shorten?format=json&callback=bitlycb&login='+i+'&apiKey='+k+'&longUrl='+encodeURIComponent(l.href);
s=d.createElement('script');
s.type='text/javascript';
s.src=u;
d.body.appendChild(s);
})(document,location);
var bitlycb = function(r){
var t,h;
t=document.title;
t=t?t:'';
h='twitter://post?message='+encodeURIComponent(' || '+t+' '+r.data.url);
console.log(h);
location.href=h;
};