so-net blog に「はてな」のカウンタを付けてみた

so-net blogにも、だいぶなれたので、いらない事をしてみたくなりました。 今日は、so-net blog 限定のネタです。

今日の話題は、HTMLを自分で書き換えるお話です。 失敗するとBLOGが正常に表示されなくなりますので、HTMLに不慣れな方には、お勧めできません。 自信のある方のみ、お試しください。

はてなのブックマークカウンターを表示する

某さわぎに関連して、はてなブックマークを参照していたら、 「はてなブックマークカウンターを自分のサイトに貼り付ける」という広告が出ていました。 読んでみたら、このBLOGでもできそうなので、付けてみました。 タイトル画像の右側の「なす」の下がそれです。

設定するところは、「管理ページ」の「デザイン」-「レイアウト」タブの中にあります。 ここでは、BLOGのサイド・バーの配置などの設定をすることが出来ますが、もっと高度なサイド・コンテンツの中身の編集もすることができます。 今回、ブックマークカウンタを付けたのは、「プロフィール」というコンテンツです。 「プロフィール」と書かれた所をクリックします。

すると、ブラウザ内に「プロフィール」ウィンドウが開きます。 このウィンドウの右上にある「コンテンツHTML編集」をクリックすると、「プロフィール」部分の中身を編集するエディタが開きます。 下から４行目に<% content.footer -%>と書かれた行があるので、その上に以下のように記述します。

<a href="http://b.hatena.ne.jp/entrylist?url=<% blog.page_url | html %>"><img
src="http://b.hatena.ne.jp/bc/pr/<% blog.page_url | html %>" class="bcounter"
alt="新適当マイコン電子工作研究所のはてなブックマーク数"
title="新適当マイコン電子工作研究所のはてなブックマーク数"></a>
<% content.footer -%>

alt属性とtitle属性は、お好みにより変更してください。 また、色もはてなのページを参照してお好みにより変更してください。 変更が終わったら、「保存」ボタンをクリックし、右上の「プロフィールの設定に戻る」をクリックし、戻った画面で「設定を保存する」をクリックします。 これで、「プロフィール」サイド・コンテンツに「ブックマークカウンター」が表示されるようになります。

はてなの被ブックマーク数を表示する

次は、「自分のブログに被ブックマーク数を表示する」に挑戦します。 タイトル画像の左側の矢印の部分です。 被ブックマーク数は、BLOGの記事ごとに表示させます。 「ブックマークカウンター」の設定の時と同様に「管理ページ」の「デザイン」-「レイアウト」タブを開きます。

今度は、「記事」と書かれたところをクリックします。 「プロフィール」の時と同じように「コンテンツHTML編集」をクリックし、エディタを開きます。 今回の変更箇所は、上から３分の１のところにある、<h2 class="articles-title">と書かれた行です。 この行は、かなり長々とした行です。 その最後尾にさらに以下の記述を追加します。

article.id %>">[編集]</a></span><% /if %><a
href="http://b.hatena.ne.jp/entry/<% article.page_url | html %>"><img
src="http://b.hatena.ne.jp/entry/image/large/<% article.page_url | html %>"></a></h2>
<% if:page_name eq 'article' -%>

編集が終わったら、「保存」ボタンをクリックし、右上の「記事の設定に戻る」をクリックし、戻った画面で「設定を保存する」をクリックします。 これで、記事に「被ブックマーク数」が表示されるようになります。 ただし、全くブックマークを付けられていない記事には、1ドットX1ドットの画像が表示されるので、何も無いように見えます。

はてなのブックマーク・ボタンを表示する

最後は、『あなたのブログに「このエントリーを含むはてなブックマーク」ボタンを表示させる』に挑戦します。 この設定を行う前に、ボタンの画像データをダウンロードしなくてはなりません。 上に示したWEBページからボタン画像をダウンロードして、so-netブログにアップロードします。 このとき、アップロード先のURLを記録しておきます。

設定変更箇所は、先ほどと同じ「記事」の「コンテンツHTML編集」です。 <h2 class="articles-title">と書かれた行をさらに以下のように変更します。

article.id %>">[編集]</a></span><% /if %><a
href="http://b.hatena.ne.jp/entry/<% article.page_url %>"><img
src="/_images/blog/_06e/noritan_micon/b_entry.png" width="16" height="12"
style="border: none;"
alt="このエントリーを含むはてなブックマーク"
title="このエントリーを含むはてなブックマーク" /></a><a
href="http://b.hatena.ne.jp/entry/<% article.page_url | html %>"><img
src="http://b.hatena.ne.jp/entry/image/large/<% article.page_url | html %>"></a></h2>
<% if:page_name eq 'article' -%>

alt属性とtitle属性は、お好みにより変更してください。 また、src属性の部分には、アップロードした「ブックマーク・ボタン」のURLを各自で設定してください。 これで、ブックマーク・ボタンが表示されるようになります。

---

このBLOGでは、それぞれの記事の最後にもボタンとカウンタを表示させています。 他の場所にも付けられると思いますので、工夫を凝らしてみてください。

コメント 2

うーん、上手くできませんでした。
と言うか、「はてなブックマーク」って何だろう？。
by hamayan (2008-04-06 01:03) 

最後の適用例でコロンが正しくエスケープされていませんでしたので、修正しました。それ以外は間違っていないと思います。

so-net BLOGは、HTMLを生成する方法が何箇所かあるらしく、私の場合には、「レイアウト」から参照される「コンテンツHTML編集」が反応しました。他にも「HTML編集」タブというのもありますが、ここを修正しても変化がありませんでした。

「はてなブックマーク」というのは、トラックバックみたいなものらしいのですが、トラックバックとは違い、ブックマークされた事はこちらには知らされないみたいです。そこで、「被ブックマーク数」カウンタをつけて、どこからブックマーク（リンク）されているかを知っておこうと思ったのです。

by noritan (2008-04-06 12:26)