ブックマーク追加をポップアップで登録可能にする

popup.png

主要なソーシャルブックマーク追加ボタンを付けるの方法では、ブックマークに追加する際にページが移動するかtarget=”_blank”でウィンドウが開くので、実際使うと面倒な感じがします。

そこで、LightBoxのようにポップアップで表示してくれるJavascriptの「GreyBox」を使います。GreyBoxは画像だけでなくWEBサイトもポップアップ表示が可能。

これを使って、ブックマーク登録画面をその場でポップアップさせることで、訪問者の人にスマートなブクマ登録をしてもらえます。登録してくれる率が高まるかも?

GreyBoxのインストール

  1. Orangoo Labs – DownloadからGreyBoxをダウンロードして解凍
  2. 解凍してできた「greybox」フォルダをそのままFTPでアップロード
  3. テンプレートのヘッダ部分にタグを埋め込む。URL部分は全て自分のアップロードしたURLに変更します。
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    var GB_ROOT_DIR = "http://mydomain.com/greybox/";
    </script>
    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>

ブックマークボタンのタグ改変

あとは、ブックマークボタンのaタグに onclick="return GB_showCenter('ブックマーク', this.href)" を追加するだけです。target="_blank"は取り除くこと。

MovableTypeでは以下のようになります。

<a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink encode_url="1"$>" onclick="return GB_showCenter('ブックマーク', this.href)"><img src="./icon/hatena.gif" alt="このエントリをはてなブックマークに登録" width="16" height="12" border="0" /></a>
<a href="http://del.icio.us/post?url=<$MTEntryPermalink encode_url="1"$>&amp;title=<$MTEntryTitle encode_url="1"$>" onclick="return GB_showCenter('ブックマーク', this.href)"><img src="./icon/delicious.png" width="13" height="13" border="0" alt="このエントリを del.icio.us に登録" /></a>
<a href="http://clip.livedoor.com/clip/add?link=<$MTEntryPermalink encode_url="1"$>&amp;title=<$MTEntryTitle encode_url="1"$>&amp;jump=ref" onclick="return GB_showCenter('ブックマーク', this.href)"><img src="./icon/liveclip.gif" alt="このエントリをlivedoorクリップに登録" width="16" height="16" border="0" /></a>
<a href="http://bm.saaf.jp/bm/add?url=<$MTEntryPermalink encode_url="1"$>" title="このエントリをSaafブックマークへ追加" onclick="return GB_showCenter('ブックマーク', this.href)"><img src="./icon/saaf.gif" alt="このエントリをSaafブックマークへ追加" height="16" width="16" border="0" /></a>
<a href="http://newsing.jp/nbutton?title=<$MTEntryTitle encode_url="1"$>&url=<$MTEntryPermalink encode_url="1"$>" onclick="return GB_showCenter('ブックマーク', this.href)"><img src="http://image.newsing.jp/common/images/newsingit/newsingit_s.gif" width="16" height="16" alt="このエントリをnewsing it!へ追加" border="0" /></a>

ポップアップ表示のカスタマイズ

ポップアップウィンドウの表示位置や大きさなどは変更することが出来ます。GreyBox – Advance usageにて詳しく記載されています。