ソーシャルブックマークサービスに追加するボタン : ブログ : エクスプレッションエンジン

ブログ

2008.4.10, 木曜 - Tutorials

ソーシャルブックマークサービスに追加するボタン

　「はてなブックマークに追加」とか、「del.icio.usボタン」とか、ソーシャルブックマークサービスに簡単にリンクするボタンをつけるのがはやっているみたいです。EEでも当然簡単にできるので、やり方をまとめてみました。

概要

　たいていのソーシャルブックマークサービスでは、URLの中に記事のURLやタイトルを埋め込んだリンクを設置してあげれば動作します。EEの場合、exp:weblog:entriesタグの中でtitleとpermalink、title_permalinkといったタグを使うことができます。

title：記事のタイトルです。MovableTypeでいうところの$MTEntryPermalinkに当たります。
permalink：記事へのリンク。MovableTypeでいうところの$MTEntryTitleですね。
title_permalink：これも記事へのリンク。

　permalinkとtitle_permalinkの違いですが、permalinkだと、http://www.example.com/123というようなEntryIDを使ったリンクになりますが、title_permalinkだと、http://www.example.com/hello_world という具合に、url titleを使ったリンクになります。
どっちを使ってもいいですが、混ぜて使うとリンクが分散してしまって好ましくないので、どちらか片方だけを使いましょう。

また、特定のテンプレートを使って記事を表示している場合、｛permalink=templateName｝という具合に、テンプレートネームを渡してあげる必要があります。
＃でも、そう言われて何の事だか分らない人は、きっと{permalink}のままで大丈夫^^;

ともあれ、これらをつかうと、各種ブックマークへのリンクを作成することができます。

はてなブックマーク

参考

やり方

<a href="http://b.hatena.ne.jp/entry/{permalink}">
<img src="http://b.hatena.ne.jp/entry/image/{permalink}">
</a>

<a href="http://b.hatena.ne.jp/entry/{permalink}">
<img src="{filedir_2}hatena16px.gif" width="16" height="12" style="border: none;"<BR/>
 alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" />
</a>

<a href="http://b.hatena.ne.jp/entrylist?url={permalink}">
<img src="http://b.hatena.ne.jp/bc/de/{permalink}" class="bcounter" <BR/>
alt="この日記のはてなブックマーク数" title="この日記のはてなブックマーク数"></a>

そうすると、こんな具合に見えます。

newsing

参考
：ピックアップボタン設置方法 - newsing（ニューシング）
コード

<iframe src="http://newsing.jp/newsingit?url={permalink}&title={title}" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" height="18" width="122" style="margin:0;padding:0;width:122px;height:18px;"></iframe>

<a href="javascript:window.location='http://newsing.jp/nbutton?title='+encodeURIComponent('{title}')+'&url='+encodeURIComponent('{permalink}');"><img src="http://image.newsing.jp/common/images/newsingit/newsingit_s.gif" width="16" height="16" alt="newsing it!" title="newsing it!" border="0" align="absmiddle" /></a>