6.40 ソーシャルブックマークアイコンを表示する ★
ソーシャルブックマーク用画像（sbm_icon.zip） 注：展開してお使いください
P.577
●新着表示用スクリプトの作成とアップロード
sbm.js
show_sbm_icon = function(url, title) {
var icon_dir = 'http://user-domain/img/icon/';
document.writeln('<span class="sbm_icon"><a href="http://b.hatena.ne.jp/append?' + url + '" rel="nofollow" title="Hatena ブックマークに追加"><img src="' + icon_dir + 'hatena.gif" width="16" height="16" alt="Hatena ブックマーク" /></a><a href="http://del.icio.us/post?url='+ url + '&title=' + title + '" rel="nofollow" title="del.icio.us に追加"><img src="' + icon_dir + 'delicious.gif" width="16" height="16" alt="del.icio.us" /></a><a href="http://clip.livedoor.com/redirect?link=' + url + '&title=' + title + '" rel="nofollow" title="livedoor クリップに追加"><img src="' + icon_dir + 'livedoor_clip.gif" width="16" height="16" alt="livedoor" /></a><a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=' + url + '&title=' + title + '" rel="nofollow" title="Google Bookmarks に追加"><img src="http://www.google.co.jp/favicon.ico" width="16" height="16" alt="Google Bookmarks" title="Google Bookmarks に追加" /></a><a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=' + title + '&u=' + url +'" rel="nofollow" title="Yahoo!ブックマークに登録"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマーク" title="Yahoo!ブックマークに登録" /></a><a href="http://pookmark.jp/post?url=' + url + '&title=' + title + '" rel="nofollow" title="POOKMARK Airlines に追加"><img src="' + icon_dir + 'pookmark.gif" width="18" height="16" alt="POOKMARK Airlines" /></a><a href="http://clip.nifty.com/create?url=' + url + '&title=' + title + '" rel="nofollow" title="ニフティクリップに追加"><img src="' + icon_dir + 'nifty_clip.gif" width="16" height="16" alt="ニフティクリップ" /></a><a href="http://buzzurl.jp/entry/' + url + '" rel="nofollow" title="Buzzurl に追加"><img src="http://buzzurl.jp/static/image/api/icon/add_icon_mini_01.gif" alt="Buzzurl" title="Buzzurl に追加" width="21" height="15" /></a><a href="http://newsing.jp/nbutton?title=' + title + '&url=' + url + '" rel="nofollow" title="newsing it! に追加"><img src="http://image.newsing.jp/common/images/newsingit/newsingit_s.gif" width="16" height="16" alt="newsing it!" title="newsing it! に追加" /></a></span>');
};P.578
(X)HTMLマークアップのイメージ
<span class="sbm_icon">
<a href="ソーシャルブックマークサービスAのURL" title="..." re="nofollow">
<img src="ソーシャルブックマークサービスAのアイコン" alt="..." ...中略... />
</a>
<a href="ソーシャルブックマークサービスBのURL" title="..." re="nofollow">
<img src="ソーシャルブックマークサービスBのアイコン" alt="..." ...中略... />
</a>
</span>...前略...
var icon_dir = '<mt:blogURL />img/icon/';
...後略...●head要素にscript要素を追加
「ヘッダー」テンプレートモジュール（サンプルテンプレート）
...前略...
<script type="text/javascript" src="<mt:blogURL />sbm.js"></script>
</head>
<body class="<mt:getVar name="page_layout" />"<mt:if name="body_onload"> onload="<mt:getVar name="body_onload" />"</mt:if>>
...後略...デフォルトテンプレートの場合、「HTMLヘッダー」テンプレートモジュールのCCLicenseRDFタグの直前に、script要素を追加します。
★「HTMLヘッダー」テンプレートモジュール（デフォルトテンプレート）
...前略...
<script type="text/javascript" src="<mt:blogURL />sbm.js"></script>
<$mt:CCLicenseRDF$>
...後略...P.579
●ソーシャルブックマークアイコン表示用のscript要素を追加
「メタデータ」テンプレートモジュール
...前略...
<li>タグ：<mt:pageTags glue=", "><a href="<mt:tagSearchLink />&IncludeBlogs=<mt:blogID />" rel="tag"><mt:tagName /></a></mt:pageTags></li>
</mt:pageIfTagged>
</mt:if>
<li><script type="text/javascript">show_sbm_icon('<mt:entryPermalink />','<mt:entryTitle encode_url="1" />');</script></li>
</ul>★「ブログ記事の概要」テンプレートモジュール（デフォルトテンプレート）
デフォルトテンプレートのメインページ・アーカイブページ（ブログ記事ページを除く）の各ブログ記事に表示する場合、「ブログ記事の概要」テンプレートモジュールに、ソーシャルブックマークアイコン表示用のscript要素を追加します。006の1行を追加しています。
...前略...
001: <MTUnless name="hide_counts" eq="1">
002: <MTIfCommentsActive><span class="separator">|</span> <a href="<$MTEntryPermalink$>#comments">003:<$MTEntryCommentCount singular="コメント(1)" plural="コメント(#)"$></a></MTIfCommentsActive>
004: <MTIfPingsActive><span class="separator">|</span> <a href="<$MTEntryPermalink$>#trackbacks"><$MTEntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)"$></a></MTIfPingsActive>
005: </MTUnless>
006: <script type="text/javascript">show_sbm_icon('<mt:entryPermalink />','<mt:entryTitle encode_url="1" />');</script>
007: </div>
008: </div>
009: <div class="asset-content entry-content">
010:<MTIfNonEmpty tag="EntryBody">
...後略...★「ブログ記事」アーカイブテンプレート（デフォルトテンプレート）
デフォルトテンプレートのブログ記事ページに表示するには、「ブログ記事」アーカイブテンプレートに、ソーシャルブックマークアイコン表示用のscript要素を追加します。007の1行を追加しています。
...前略...
001:<MTIfCommentsActive>
002: <span class="separator">|</span> <a href="<$MTEntryPermalink$>#comments"><$MTEntryCommentCount singular="コメント(1)" plural="コメント(#)"$></a>
003:</MTIfCommentsActive>
004:<MTIfPingsActive>
005: <span class="separator">|</span> <a href="<$MTEntryPermalink$>#trackbacks"><$MTEntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)"$></a>
006:</MTIfPingsActive>
007:<script type="text/javascript">show_sbm_icon('<mt:entryPermalink />','<mt:entryTitle encode_url="1" />');</script>
...後略...●スタイルシートの変更
「スタイルシート」インデックステンプレート
...前略...
.sbm_icon img {
margin-left: 3px;
vertical-align: middle;
}
...後略...
