Google Blogger Beta版で「はてなブックマーク数」を表示させるまでの苦労話

Google Blogger Beta版に１１月から切り替えたが、新しい仕組みになっていたので、HTMLやCSSの知識をあまり持たない私にとってはわからないことが多かった。今までBloggerでやっていたことをBeta版に移行させるのにいろいろと試行錯誤が続いた。わかっている人には何てコトもない話なのだろうが、概念的に仕組みを飲み込むだけでも時間がかかった。まだわからないことが多いが、私と同じような人もいるかもと思い、これまでの苦労話を綴ってみた。

Google Bloggerを使って自分のブログをたちあげた頃に、「はてなブックマーク登録」と「被ブックマーク数の表示」というものを自分の記事につけていた。この方法は、「はてな」のページの「ヘルプ」のなかに 自分のブログに被ブックマーク数を表示する という解説があり、Blogger用のHTMLコードもあって、これをコピーしてテンプレートに貼り付けるだけだったので私にも簡単にできた。

ところがBeta版に切り替えたら、HTMLテンプレートの編集方法がかわってしまい、素人の私には皆目見当がつかなくなった。とくに「ページ要素の追加」という新機能と「HTMLの編集」の関係が分かりづらかったし、HTMLテンプレートもBlogger Beta版独自のタグや表現形式にかわっているので、さっぱり解読できないでいた。

Bloggerの技術的なことはクリボウさんや@akaさんが詳しいので、この人たちの記事をいろいろ参考にさせてもらった。@akaさんには記事のコメントを頂いたときに私の方から質問もし、HTMLコードを貼り付ければいけるはずですということを教えてもらった。

ところが以前のソースコードを貼り付けるだけではBeta版は解釈してくれずエラーになってしまう。$BlogItemPermalinkUrl$というタグがBeta版では記述が変わっているようだということがわかり、data:post.url だろうというところまでは見当がついた。今度はそれをどのように記述したらいいのかがわからない。

そこで下記のような記事をいろいろ参考にさせてもらった。

クリボウのBlogger Tips
　Blogger betaのページエレメントタグ
clmemo@aka
　@ Blogger Beta でブログ・タイトルの下に AdSense を付ける

これらを読ませてもらって、ようやく「ページ要素」の ウィジットのテンプレートを展開することでHTMLに組み込まれてソースコードが展開するという仕組みはわかった。しかし、展開したソースを見てもBeta版独自のタグ表現になっているのでその意味がわからず、貼り付けるコードの記述方法がかわらない。

実際の記述方法については下記の記事が参考になった。

とくに、＜a href="・・・"＞ という表現のなかにBeta版独自のダグ表現のdata:post.urlなどを組み込むときは＜a expr:href=' "・・・"+data:post.url'＞＜img expr:src=' "・・・"＋data:post.url'＞というようにexpr:という記述を挿入する必要があるということがわかり、ようやくなんとか完成にこぎつけた。
しかしまだわからないことも多い。たとえば"＆amp;title=" + data:post.title などの＆amp;
ampersand（アンパサンド＆）のことだと思うが、この意味と役割がわからない。どなたか教えてくれませんか。

Blogger Beta Tips
　二つ目のサイドバーを追加する
　記事をオンラインブックマークへリンクする
　記事をオンラインブックマークへリンクする（更新）
　この記事の中で紹介された その他のブックマークリンク
Beautiful Beta
　Social Bookmarking Revisited

その他に、Blogger Beta版のHTMLテンプレートについて参考になった記事

Banana Stew
　Deconstructing Blogger Beta HTML Template Editing
　http://www.wilkinsons.com/Bananna/BetaCodeLargeType.htm