comewalk.typepad.jp

「このエントリーを含むはてなブックマーク」ボタンを 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:

• はてなスターを TypePad に設置
• はてなブックマークカウンターを TypePad に設置
• はてなブックマーク - ヘルプ - 自分のブログに「このエントリーを含むはてなブックマーク」ボタン

はてなブックマークカウンターを TypePad に設置

やっぱり自分のブログがブックマークされているかって気になりますよね。はてなブックマークではブログの URL を渡すだけで画像でその URL を含むブックマークが何件あるか返してくれるサービスがあります。こちらでやり方が紹介されています。

さて、このやり方は HTML を直接編集できるサービスに限定されます。TypePad でも上級者テンプレートを利用すれば MT タグを駆使して手軽にはてなブックマークカウンターを設置できるわけですが、私は別のやり方で対応する方法をご紹介します。

前にご紹介しました「jQueryライブラリを使う」ウィジェットを導入しつつ、TypeList にスクリプトを追加することで、上級者テンプレートを使わなくてもはてなブックマークカウンターが設置できるようになります。

まずは「jQueryライブラリを使う」ウィジェットを導入してください。こちらのページから jQuery を使うウィジェットをインストールできます。

次に TypeList の「メモ」または「リンク」のメモ欄に以下の javascript を貼付けます。（「リンク」の TypeList を使う場合はそのリストの設定ページで「メモをテキストとして表示」を選択しておいてください）

<script type="text/javascript">
$("h1").append('<div class="hatena-entrylist"><a href="http://b.hatena.ne.jp/entrylist?url='+ $("h1 a").attr("href") +'"><img src="http://b.hatena.ne.jp/bc/de/'+$("h1 a").attr("href")+'" class="bcounter" alt="この日記のはてなブックマーク数" title="この日記のはてなブックマーク数"/></a></iv>');
$(".hatena-entrylist").css("margin-left", "10px").css("display", "inline");
</script>

これで完了です。ブログを見ますと、ブログのタイトルの横にはてなブックマークカウンターが表示されたと思います。ブックマークの件数が全てではないですが、ブックマークの件数が増えることがブログを続けるモチベーションにつながるときもあります。どうぞご利用ください。

seealso:

• はてなブックマークカウンターを自分のサイトに貼り付ける
• はてな、「はてなブックマーク」の新バージョン公開日程を決定　大規模リニューアで既存システムを改善

404 をカスタマイズする javascript

Google ウェブマスターツール で 404 ページに javascript を埋め込むと、Google ならではのちょっと気の利いた内容を出力してくれる javascript がありました。それが『拡張された 404 ページ』。（直訳すぎて痛いなぁw） ヘルプをみると『カスタム 404 ウィジェット』と呼ぶみたいですね。

404 ページっていうのは「このページは存在しません」というエラーページですね。

TypePad ではユーザが独自の 404 ページを設置することができないので、この Tips は自分でサーバを管理されている方やレンタルサーバをご利用の方には有効ですね。

私が利用しているレンタルサーバ （XREA）で試してみました。http://www.s14u.info/mt/archive というページもディレクトリも存在しませんが、こちらにアクセスしてみてください。検索窓が出たり、archives.html を候補ページを表示していたりしてちょっと気が利いた感じになりますね。

ニッチですがいい感じかも。

seealso:

• カスタム 404 ページ - ウェブマスター向けヘルプ センター 

• FAQ/サイト作成 - はやわかり XREA