bit.lyで短縮された元のURLをプレビューする jQueryプラグイン

prebitlyの動作サンプル
prebitlyのサンプルファイルダウンロード

自分のサイト、ブログでbit.ly（短縮URL）を使いたいけど
ユーザー目線で考えると目的地がはっきりしないURLは不安じゃないですか？

短縮URLで飛ばした先でウイルス感染…とかもあるみたいですし。
慣れてる人はFirefoxのアドオンとか、Greasemonkeyを使えばいいんですけど
それだけじゃだめですよね。

prebitlyプラグインを導入すれば、bit.lyを使った短縮URLでも
プレビューチップで元のURLを表示するので、みんなが安心してリンクをクリックできます。
（さすがに、音声ブラウザまでは無理です…）

トピックス

• ダウンロード
• 導入方法
• 設定
• サンプル
• 動作環境

ダウンロード

JSのみ

prebitly.js(1KB)

サンプルファイル

prebitly.zip

導入方法

prebitlyプラグインを使うには、bit.lyのアカウントとAPIキーが必要です。
作成、取得は非常に簡単です。

bit.lyのアカウントを作成する

このページ左のCreate a Free bit.ly Accountから項目に入力してSign Upします。

AccountのページからAPIキーを取得する

右上のリンクから移動します。
そうすると左側に↓のように「API Login」「API Key」が表示されています。

ファイルを読み込む

prebitly.jsを読み込む前に、Login IDとAPI KeyでAPIにアクセスできる状態にします。
login= /ここにAPI Login
apiKey= /ここにAPI Key

<link rel="stylesheet" type="text/css" href="css/prebitly.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="http://bit.ly/javascript-api.js?version=latest&amp;login=norinorinori&amp;apiKey=R_e3f7b535791f579489b605e30356993b"></script>
<script type="text/javascript" src="js/prebitly.js"></script>

デザインを変える場合はCSSファイルから行ってください。
最後に実行します。

<script type="text/javascript">
  $(function(){
    $("a[href*='http://bit.ly']").prebitly();
  });
</script>

これだけで bit.ly で短縮されたURLにマウスカーソルが乗ったときに
プレビューが表示されるようになります。

設定

チップ表示位置の微調整、読み込み中の文言を変えることができます。
変更するときは以下のように記述します。

<script type="text/javascript">
  $(function(){
    $("a[href*='http://bit.ly']").prebitly({
      top: -40,
      left: 5,
      loadingText: "loading..."
    });
  });
</script>

prebitlyの動作サンプル
prebitlyのサンプルファイルダウンロード

動作環境

• IE6（後方互換モードは未確認）
• IE7
• Firefox3
• Opera9.5
• Safari3
• Chrome

ちなみに…

プレビューにサムネイルなど
もっと拡張した機能がほしい場合は bitly というプラグインがあります。