Xoopsで構築したサイトにソーシャルブックマークボタンを設置

Xoopsで構築したサイトにソーシャルブックマークボタンを設置してみたいと思っていろいろ調べてみたのだが、MTやブログなどの記事はあるが、xoopsで良い記事を見つけられなかったので、自分で各ソーシャルブックマークなどのヘルプなどを参考にして、ソーシャルブックマークボタン設置のソースを作ってみた。

要件として、基本的にポップアップではなく同一画面内遷移で統一することとした（ポップアップブロックが遮断されたらイヤだなぁってこととブックマークしたらまた同じページに戻る安心感があるので）。
それと各ソーシャルブックマークでブックマークされている人数についても表示されるようにした。

なお、時間と気力の問題でYahoo!、はてな、livedoorの3社のみとさせてもらった。また後日他のソーシャルブックマークについて調べてみたいと思う。

■Yahoo!ブックマーク

解説ページ：「Yahoo!ブックマークに登録」ボタン・アイコン

採用ソース：「Yahoo!ブックマークに登録」アイコン（同一画面内遷移）

<a href=”javascript:location.href=’http://bookmarks.yahoo.co.jp/action/bookmark?t=’+encodeURIComponent(document.title)+’&u=’+encodeURIComponent(location.href);“><img src=”http://livedoor.blogimg.jp/musilog/imgs/f/9/f96bf1cb.gif” width=”16″ height=”16″ alt=”Yahoo!ブックマークに登録” style=”border:none;”></a>

解説ページ：「ブックマーク人数表示」画像

採用ソース：「ブックマーク人数表示」画像文章で表示（文字サイズ小）

<script src=”http://num.bookmarks.yahoo.co.jp/numimage.js?disptype=small“></script>

と、ここまで書いたところで、上記の組み合わせページもありました。

解説ページ：ブログパーツの組み合わせ

採用ソース：

<a href=”javascript:location.href=’http://bookmarks.yahoo.co.jp/action/bookmark?t=’+encodeURIComponent(document.title)+’&u=’+encodeURIComponent(location.href);“><img src=”http://livedoor.blogimg.jp/musilog/imgs/f/9/f96bf1cb.gif” width=”16″ height=”16″ alt=”Yahoo!ブックマークに登録” style=”border:none;”></a><script src=”http://num.bookmarks.yahoo.co.jp/numimage.js?disptype=small“></script>

■はてなブックマーク

解説ページ：自分のブログに このエントリーを含むはてなブックマーク ボタン

この解説を読んでいるとつまり、こういう書き方すればいいってこと？

<a href=”http://b.hatena.ne.jp/entry/現在のページURL”>
<img src=”アップロードした画像のURL” width=”16″ height=”12″ style=”border: none;”
alt=”このエントリーを含むはてなブックマーク” title=”このエントリーを含むはてなブックマーク” />
</a>

というわけで、smarty変数を使って、
採用ソース：

<a href=”http://b.hatena.ne.jp/entry/<{$xoops_url}><{$xoops_requesturi}>”>
<img src=”/images/b_entry.gif” width=”16″ height=”12″ style=”border: none;”
alt=”このエントリーを含むはてなブックマーク” title=”このエントリーを含むはてなブックマーク” />
</a>

※b_entry.gif画像をあらかじめ/imagesディレクトリ以下にアップします。

解説ページ：自分のブログに被ブックマーク数を表示する

ここも同様に。ブックマーク数を画像で取得するAPIを利用しています。
採用ソース：

<a href=”http://b.hatena.ne.jp/entry/<{$xoops_url}><{$xoops_requesturi}>”>
<img src=”http://b.hatena.ne.jp/entry/image/small/<{$xoops_url}><{$xoops_requesturi}>”>
</a>

■livedoor クリップ

解説ページ：ブログに「clip!」ボタンを設定しよう！

「livedoor Blogの場合」とありますが、このソースを参照してソースを書いてみたいと思います。

採用ソース：

<a href=”http://clip.livedoor.com/redirect?link=<{$xoops_url}><{$xoops_requesturi}>&title=<{$xoops_pagetitle}>%20-%20<{$xoops_sitename}>&ie=euc” class=”ldclip-redirect” title=”この記事をクリップ！”><img src=”http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif” width=”16″ height=”16″ alt=”この記事をクリップ！” style=”border: none;vertical-align: middle;” /></a>

解説ページ：クリップ数を画像で取得する API

採用ソース：

<img src=”http://image.clip.livedoor.com/counter/small/<{$xoops_url}><{$xoops_requesturi}>”>

というわけで、この三種類のソーシャルブックマークを貼りつける場合は下記ソースになります。人数表示の部分もリンクが有効な形にしました。これをテーマ中の表示させたい部分に貼り付けます。

最終的なソース

このページのブックマーク：
<!– yahoo –>
<a href=”javascript:location.href=’http://bookmarks.yahoo.co.jp/action/bookmark?t=’+encodeURIComponent(document.title)+’&u=’+encodeURIComponent(location.href);“><img src=”http://livedoor.blogimg.jp/musilog/imgs/f/9/f96bf1cb.gif” width=”16″ height=”16″ alt=”Yahoo!ブックマークに登録” style=”border:none;”><script src=”http://num.bookmarks.yahoo.co.jp/numimage.js?disptype=small“></script></a>
<!– hatena –>
<a href=”http://b.hatena.ne.jp/entry/<{$xoops_url}><{$xoops_requesturi}>”>
<img src=”/images/b_entry.gif” width=”16″ height=”12″ style=”border: none;”
alt=”このエントリーを含むはてなブックマーク” title=”このエントリーを含むはてなブックマーク” />
<img src=”http://b.hatena.ne.jp/entry/image/small/<{$xoops_url}><{$xoops_requesturi}>”>
</a>
<!– livedoor –>
<a href=”http://clip.livedoor.com/redirect?link=<{$xoops_url}><{$xoops_requesturi}>&title=<{$xoops_pagetitle}>%20-%20<{$xoops_sitename}>&ie=euc” class=”ldclip-redirect” title=”この記事をクリップ！”><img src=”http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif” width=”16″ height=”16″ alt=”この記事をクリップ！” style=”border: none;” />
<img src=”http://image.clip.livedoor.com/counter/small/<{$xoops_url}><{$xoops_requesturi}>”></a>