「このエントリーを含むはてなブックマーク」ボタンを TypePad に設置
はてなブックマークがどれだけ好き
なんだろう
と聞きたくなるほどに、TypePad にはてな関連のネタを仕込む第 3 回目。
今回は自分のブログに「このエントリーを含むはてなブックマーク」ボタンを TypePad に設置します。
前にご紹介しました「jQueryライブラリを使う」ウィジェットを導入しつつ、TypeList にスクリプトを追加することで、上級者テンプレートを使わなくてもはてなブックマークボタンを設置できるようになります。
まず はてなブックマークのヘルプのページにあります 
の画像を自分の PC にダウンロードして、次に TypePad のコントロールパネルにあるファイルマネージャで今の画像をアップロードします。アップロードされた URL を http://yourname.typepad.jp/blog/images/b_entry.gif と仮定します。
次は「jQueryライブラリを使う」ウィジェットを導入してください。こちらのページから jQuery を使うウィジェットをインストールできます。
そして TypeList の「メモ」または「リンク」のメモ欄に以下の javascript を貼付けます。（「リンク」の TypeList を使う場合はそのリストの設定ページで「メモをテキストとして表示」を選択しておいてください）※の画像のパスは適宜読み替えてください。
<script type="text/javascript">
$(document).ready(function() {
$('.entry-footer-info').each(function() {
var permalink = $(this).find('.permalink').attr('href');
$(this).append(' <span class="separator">|</span>');
$(this).append(' <a href="http://b.hatena.ne.jp/entry/' + permalink + '"><img src="http://yourname.typepad.jp/blog/images/b_entry.gif" width="16" height="12" style="border: none;" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>');
});
});
</script>
これで完了です。ブログを見ますと、ブログのフッターの横にはてなブックマークボタンが表示されたと思います。どうぞご利用ください。
seealso:
Comments