「ココログプロ」で、「はてブ」こと「はてなブックマーク」へブックマーク登録できるリンクを配置してみました。
この記事を書いている時点では、「ココログ」には「はてブ」との連携機能はありません。Twitterにつぶやくことはできますけど。ということで、ならば自前で入れてしまえとやってみました。
まず最初に。テンプレートがカスタマイズできるココログプロでないと、ここで書く内容は使えません。ココログフリー、ココログプラスでは、「リスト」機能を使って「はてブ」連携する方法が紹介されていますよ。
さて、まずは情報集めです。「はてブ」の本家サイトに行きますと、このための情報がしっかりありますので、基本としてマークしておきましょう。
自分のブログに「↑B」「B!」アイコンを表示する
自分のブログに「○○users」を表示する
それぞれのページに、「ココログプロ」という項目がありますので、そこを見て下さい。基本的に、ここに書かれているとおりにやればよいはず…。なのですが、実際はそうは行きませんでした。
どうやら、テンプレートの構造が変化したか、私のテンプレートが古いのか、いずれにしろそのままでは適用できませんでした。
常人ならそこで諦めてしまうのでしょうが、私は超人です。または往生際が悪いともいえましょう。テンプレートを解析して、然るべき場所に然るべきアンカータグを入れることで目的を達成できました。
まず、「はてブ」のためのアンカータグを作っていきましょう。上記の2つのページから入手できますから、こんな感じでまとめておいて下さい。まとめておけば、あとはテンプレートの然るべき場所にこれを貼り付けるだけで結構です。
<a href="http://b.hatena.ne.jp/entry/add/<$MTEntryPermalink>"><img src="http://naosan.way-nifty.com/blog/b_append.gif" width="16" height="12" style="border: none;" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" /></a> <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink>"><img src="http://naosan.way-nifty.com/blog/b_entry.gif" width="16" height="12" style="border: none;" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a> <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink>"><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink>" alt="はてなブックマーク – <$MTEntryTitle$>" title="はてなブックマーク – <$MTEntryTitle$>"></a>
ここでは、追加ボタン、エントリー表示ボタン、ユーザ数表示ボタン、3つ並ぶようにしてみました。ちなみにボタンのアイコン画像は上記のページから入手して、自分のブログの適当な箇所にアップロードしておいて下さい。
私は、ブログサイトのトップに置いておきました。GIFファイルのURLに注意して下さい（上のマークアップのままですと、私のブログにある画像が表示されます。笑）。
マークアップの準備ができたら、いよいよテンプレートを触りましょう。テンプレートを触るときの基本、わかっていますか？そうです、作業前のテンプレートのバックアップは必ずとっておく、です。何か訳のわからないことになっても、少なくとも作業前に戻せますから。
触るテンプレートは、
- Main Index Template
- Category Archives
- DateBased Archives
- Indivisual Archives
の4種類です。それぞれ、トップページ、カテゴリ別アーカイブページ、日付別アーカイブページ、個別ページに相当します。他にもあったような気がしますが、これだけやっておけば十分でしょう。
それぞれのテンプレートで、触る箇所は同じです。ただし、Main Index Templateだけは2箇所触ります。2箇所ですが、同じような場所を触ります。触る、触るというと何となく淫靡な雰囲気になってきますね。
それぞれのテンプレートをココログデザインページから開いたら、こんな場所を探して下さい。
<MTWeblogIfExposePostFooterLinks><br /><$MTEntryPostFooterLinks$></MTWeblogIfExposePostFooterLinks>
これは、記事の最後に表示されるリンク群を自動発生させる部分です。Twitterの投稿ボタンも、ここで自動発生されます。ここの直後に「はてブ」リンクを設置してみましょう。置き方は簡単で、この直後に上記のマークアップを入れるだけです。
Main Index Templateについては2箇所ありますから注意して下さい。
それぞれのテンプレートは保存し、最後に一括で「反映」しましょう。オススメは、上の順番でテンプレートを書き換えて、最後のテンプレート（Individual Archives）を保存した直後に「全ファイル」へ反映するのがよいでしょう。
記事数が多いと、この反映作業だけで相当時間がかかります。
反映が終了すれば終わりです。ブログのトップページを表示させてみて、こんな感じで「はてブ」のボタンが出ていれば成功です。
ちなみに、ユーザ数は0の場合には見えません。縦横1ピクセルの透明画像になるということなので、要するに何も見えません。
すでに「はてブ」にブックマークされている記事があれば、ユーザ数が出るでしょう。私のブログで随一の人気記事？ではこんな感じでした。
この記事が役立ちましたら、どうぞ「はてブ」して下さいね。