GreyBoxを利用したブックマークのリンク方法
ブログでソーシャルブックマークなどのリンクアイコンをよく見かけます。ブックマーク登録をする際に、機能提供しているサイトを開く必要が出てきます。その為、別ウインドウで表示する、または画面遷移する方法しかありません。
今回は「はてなブックマーク」を例にして 
の実装を行います。
GreyBoxの設置
GreyBoxの最新版をダウンロードしてから、/greybox フォルダごとアップロードしてください。その他のファイルなどは必要ありません。HTMLヘッダへの記述
<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>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
パスの記述部分は、アップロード場所に合わせて変更します。また、GB_ROOT_DIR の呼び出し部分でも同様にパスを変更してください。
はてなブックマークへのリンク記述
<a href="http://b.hatena.ne.jp/append?（ブックマークするURL）" title="はてなブックマークに登録" rel="gb_pageset[bookmarks]"><img src="（ボタン画像のパス）" /></a>
ブックマークアイコンを表示したい部分に記述します。ブックマークアイコンなどあらかじめ用意してください。
紹介した方法以外にも、キャプション表示、表示サイズの指定などが可能です。リンク部分の修正だけで、その他のソーシャルブックマークにも対応できます。是非、試してみてください。
サイトの最新情報をRSSで受信できます
- 関連記事 リスト
FeedBurnerのフィードカウントを簡単にデザイン変更
FeedBurnerのフィードカウントをブログなどでよく見かけます。しかし、Fe...続きを読む
RSSをPing送信するサービス
Ping送信することで、新規ユーザーや更新情報をチェックしているユーザーに通知...続きを読む
ユーザーコメントを管理する専用サービス
Webページにユーザーからのコメントを表示・管理するのに便利なサービスが、In...続きを読む
便利なブックマークボタンを作成するサービス
ソーシャルブックマークは会社や外出先でブックマークしたお気に入りを、自宅など別...続きを読む
ブログのPing送信を一括するフリーサービス
ブログの最新情報を配信する機能として定着しているPing送信機能。Push型コ...続きを読む
GreyBoxを利用したブックマークのリンク方法
ブログでソーシャルブックマークなどのリンクアイコンをよく見かけます。ブックマーク...続きを読む
