2011年5月2日月曜日

Bloggerにはてブボタン、EvernoteのClipボタン、Facebookのイイネ!ボタンを付ける

「デザイン」「HTMLの編集」「テンプレートを編集」と進んで
「ウィジェットのテンプレートを展開」にチェックを入れる。

まず、ページ内を「/header」で検索するとヘッダの閉じタグが出てくるので、
その直前に

<script src='http://static.evernote.com/noteit.js' type='text/javascript'/>

を入れます。

次にページ内を「header-line」で検索すると

<div class='post-header-line-1'/>

という行が出てくるはずなので、そのすぐ下に

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>

<a expr:onclick='&quot;Evernote.doClip({providerName:\&quot;&quot; + data:title + &quot;\&quot;, title:\&quot;&quot; + data:post.title + &quot;\&quot;, url:\&quot;&quot; + data:post.url + &quot;\&quot;}); return false;&quot;' href='#'><img alt='Clip to Evernote' src='http://static.evernote.com/article-clipper.png'/></a>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&layout=button_count&show_faces=false&width=75&height=20&action=like&font=lucida+grande&colorscheme=light&send=false&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:75px; height:20px;'/>

を追加します。
これでOK。
実際に試して、動作を確認してください。

↑の例だとタイトルのすぐ下に出てきますが
別のところにおくこともできるので色々試してみてください。

様子をみてmixiイイネ!など他のサービスのボタンも試してみようと思います。