Bloggerのクラシックテンプレート(FTP公開)でもラベル一覧を表示したい

07/12/11追記：下記スクリプトに不具合が見つかりました。こちらの記事を参照してください。

弊社Official Blogでは、Bloggerのクラシックテンプレート（FTP公開）でブログを公開しています。

記事の投稿時には、「この投稿のラベル」というところでラベルを設定できるのですが、設定したラベルの一覧をサイドバーに表示するタグは無いようなのです。

クリボウの Blogger Tips: ラベル一覧にフィードアイコン

クラシックテンプレートは…


クラシックテンプレートの利用者は、上に示したようなカスタマイズができません。というより、それ以前にブログにラベル一覧を表示する方法が用意されていません。

• Known Issues for the New Blogger

（クラシックテンプレートには、）サイドバーに全てのラベルを表示するタグはありません。サイドバーのラベルウィジェットを使う場合には、レイアウトテンプレートに変更する必要があります。

（クリボウ訳）

レイアウトテンプレートを使えない身（FTP 公開ブログ）としては、非常に残念です…。

なにか他の方法で表示できないかと調べていると、Javascriptでサイドバーにラベル一覧を表示する方法を発見しました！

phydeaux3: Automatic List of Labels for Blogger Classic Templates / FTP

Caveats - this only works for blogs that have their admin profile publicly available, and the blog must be publicly listed in that profile (this is as it should, if you haven't announced your blog publicly, then your metafeed shouldn't be public). It also does NOT return the number of posts in each label. Just the list of all the ones used.

Ok, you need two pieces of information for it to work. Your Blogger UserID number, and your Blogs ID number. Both of these you can get via your dashboard. For the USERID, click on the View Profile link and it's the long number at the end of that url. For the Blog ID number, again from the dashboard if you click on any links to change settings or create a post for that blog, all links will have blogID=XXXXXXX at the end where the X's will be that particular blog's ID number. Once you have that, here is code that will fetch and display the labels for your blog.

どうやら、プロフィールを公開している状態で、UserIDとBlogIDがあれば可能なようです。

上記サイトより早速コードを拝借して試してみると、日本語のラベルページにジャンプできません！

Bloggerより生成されたラベルページのファイル名を良く見てみると、なんと日本語が混じるとBase64でエンコードされたファイル名になっています。ですが、上記コードでは単純にencodeURIComponentしているだけのようです。海外ではこれでOKですが、日本ではちょっとまずいです。

というわけで、前置きが長くなりましたが、以下が改造後のソースです。

※Base64のエンコードには、Free code and tutorialsにある、Javascript base64 encodingを使用しています。

このファイルを予め読み込んでおく必要があります。

<div id="labelList"></div> <script type="text/javascript">
//<![CDATA[
function listLabels(root){
    var baseURL = '/blog/labels/';
    var baseHeading = "ラベル";
    var isFTP = true;
    var llDiv = document.getElementById('labelList');
    var entry = root.entry;
    var h2 = document.createElement('h2');
    h2.className = 'sidebar-title';
    var h2t = document.createTextNode(baseHeading);
    h2.appendChild(h2t);
    llDiv.appendChild(h2);
    var ul = document.createElement('ul');
    ul.id = 'label-list';
    var category = entry.category;
    labelSort = new Array();
    for(p in category){
        labelSort[labelSort.length] = [category[p].term];
        }
    labelSort.sort();
    for (var r=0; r < labelSort.length; r++){
         var li = document.createElement('li');
         var a = document.createElement('a');
         if(isFTP){
         var l = encodeURIComponent(labelSort[r]);
       if (l.indexOf('%', 0) >= 0) {
               var reg1=/\//g;
               l = Base64.encode(new String(labelSort[r]));
               l = l.replace(reg1, "__");
       }
             a.href = baseURL + l +'.html';
             }
         else {
             a.href = baseURL + encodeURIComponent(labelSort[r]);
             }
         a.innerHTML = labelSort[r] + ' ';
         li.appendChild(a);
         ul.appendChild(li);
         abnk = document.createTextNode(' ');
         ul.appendChild(abnk);
         }
    llDiv.appendChild(ul);
}
//]]>
</script>
<!--
The script source URL must be
http://www.blogger.com/feeds/<UserID>/blogs/<BlogID>?alt=json-in-script&callback=bloggerLabels
You can get your <UserID> at the end of your profile view URL.
And you can get your <BlogID> at the end of URL in your blog editor (and blog setting)
like http://www.blogger.com/posts.g?blogID=xxxxx, in this case xxxxx is your <BlogID>.
-->
<script type="text/javascript" src="http://www.blogger.com/feeds/UserID/blogs/BlogID?alt=json-in-script&callback=listLabels" ></script>

baseURLや、baseHeading等の値は環境に合わせて変更します。

詳しくは元記事をご覧下さい。