[JavaScript] ブックマークレットの追加ボタンを自動で挿入する

ブックマークレットの追加ボタンを自動で挿入するライブラリを作成した。

最近ではソーシャルブックマークサービスがかなり沢山あるが、サイト上にいちいち「このエントリを○○に追加！」といったボタンを配置するのが面倒なので、そこを自動化するためのJSライブラリを作成した（挿入されるタグを変えて2パターン作成）。個人的には、CSSなどでスタイル変え易いのでパターン2の方がいいと思う。

パターン1

仕様

class="sbmArea"のp要素を取得し、JSによって各SBMの追加ボタンを挿入する。
対象となるp要素内に予め値を設定している場合は、その値は削除されるが、ユーザがJSを切っている場合は、予め設定した値がそのまま表示される。
JSを編集することで、表示するボタンと非表示にするボタンを設定できる。
ボタン挿入対象とする要素とクラス名はJSを編集することで変更できる。

使い方

ZIPファイルを解凍後（中身はsbm.jsと画像のセット）、任意のディレクトリに配置し、本機能を実装したいhtmlでJSを読み込む。

<script type="text/javascript" src="common/js/sbm.js"></script>

追加ボタンを表示したい箇所にclass="sbmArea"を指定したp要素を記載する。

<p class="sbmArea">ブックマークレット登録</p>

JSで各ボタンの表示・非表示を設定する。

0：非表示　1：表示

conf : {
	hatenaFlg : 1,             // はてなブックマーク
	livedoorFlg : 1,           // livedoorクリップ
	yahooFlg : 1,              // Yahooブックマーク
	googleFlg : 1,             // Googleブックマーク
	niftyFlg : 1,              // @niftyクリップ
	deliciousFlg : 1,          // del.icio.us
	technoratiFlg : 1,         // テクノラティ
	fc2Flg : 1,                // fc2ブックマーク
	pookmarkFlg : 1,           // POOKMARK Airline
	choixFlg : 1,              // choix

	targetTag : 'p',           // 挿し込み対象の要素名
	targetCls : 'sbmArea'      // 挿し込み対象の要素のclass名
},

パターン2

仕様

class="sbmList"のul要素を取得し、取得したul要素内のli要素にJSによって各SBMの追加ボタンを挿入する。
各ボタンの追加はclass="SBM名"のli要素があれば行われるため、htmlで表示したくないli要素を削除することで、表示するボタンと非表示にするボタンを設定できる。
対象となるli要素内に予め値を設定している場合は、その値は削除されるが、ユーザがJSを切っている場合は、予め設定した値がそのまま表示される。
ボタン挿入対象とするクラス名はJSを編集することで変更できる。

使い方

ZIPファイルを解凍後（中身はsbm.jsと画像のセット）、任意のディレクトリに配置し、本機能を実装したいhtmlでJSを読み込む。

<script type="text/javascript" src="common/js/sbm.js"></script>

追加ボタンを表示したい箇所にclass="sbmList"を指定したul要素を記載し、 li要素に表示したいボタンのクラスを指定する。

<ul class="sbmList">
<li class="hatena">はてなブックマーク</li>
<li class="livedoor">livedoorクリップ</li>
<li class="yahoo">Yahooブックマーク</li>
<li class="google">Googleブックマーク</li>
<li class="nifty">@niftyクリップ</li>
<li class="delicious">del.icio.us</li>
<li class="technorati">テクノラティ</li>
<li class="fc2">fc2ブックマーク</li>
<li class="pookmark">POOKMARK Airline</li>
<li class="choix">choix</li>
</ul>

補足

ちなみに、JSの設定値はこんな感じなので、クラス名が気に入らない場合は変更可能である。

conf : {
	hatenaClsName : 'hatena',          // はてなブックマーク
	livedoorClsName : 'livedoor',      // livedoorクリップ
	yahooClsName : 'yahoo',            // Yahooブックマーク
	googleClsName : 'google',          // Googleブックマーク
	niftyClsName : 'nifty',            // @niftyクリップ
	deliciousClsName : 'delicious',    // del.icio.us
	technoratiClsName : 'technorati',  // テクノラティ
	fc2ClsName : 'fc2',                // fc2ブックマーク
	pookmarkClsName : 'pookmark',      // POOKMARK Airline
	choixClsName : 'choix',            // choix

	targetTag : 'ul',          // 挿し込み対象の要素名(※編集不可)
	targetCls : 'sbmList'      // 挿し込み対象の要素のclass名
},

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/39