Google Blogger の複数ラベルが表示できる関連記事スクリプト

以前、実装していた関連記事スクリプトが何故か動作しなくなってしまいました。原因は不明です。
そこで他の関連記事スクリプトやガジェットを探してみたところ、２系統のスクリプトが見つかりました。

Google Blogger に実装してみたところ正常に稼動した関連記事表示用スクリプトがこの２種類です。 Google Blogger でエントリーの最後に関連記事（Related Posts)を追加するガジェットやスクリプトはさほど多くは無いように思いますが、ネットで検索してみた感じではこの２種類が今のところ主流のようです。

この記事では紹介するのは、Blogspot Tutorial, Free Template and Sites Info ブログの "How To Add A Related Post Widget" で紹介されていたスクリプトです。この関連記事表示の最大の特徴は複数ラベルの関連記事を表示させることができること。表示させるラベル数、ラベル毎に表示する記事数が変更できます。

但し、最大の問題は日本語のラベルが文字化けすること。
JavaScript自体やリストとして取得するラベルの charset を UTF-8 に置き換えるなど試してみましたが、とうとうラベルの文字化けは回避できませんでした。

指定したラベルの数ごとに指定した件数の関連記事が表示できるので、大変にユーザフレンドリーだしページビューも増えそうな予感がありますが、日本語が文字化けするので英語で運営しているブログか、全てのラベルを英語にするかの何れかでしか実装はできません。
例えば、エントリーに Google Blogger、Google Analytics、Google AdSense、Gmail という４つのラベルをつけたときには、そのエントリーの関連記事リストは次のように表示されます。

Related Posts
Google AdSense
・エントリー１
・エントリー２
・エントリー３
・エントリー４
・エントリー５

Google Analytics
・エントリー１
・エントリー１
・エントリー１
・エントリー１
・エントリー１

Google Webmasters
・エントリー１
・エントリー２
・エントリー３
・エントリー４
・エントリー５

Gmail
・エントリー１
・エントリー２
・エントリー３
・エントリー４
・エントリー５

ラベルにより分類されますから、閲覧者にとっても自分の読みたい関連記事が探しやすいのでは。ページビューの伸びも期待できそうです。

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts :</h3> /* タイトル hタグは任意 */
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 3;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 10; /* ラベル毎に表示する記事数 */
maxNumberOfLabels = 3; /* 表示するラベル数（アルファベット昇順） */


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

上記のコードをHTMLテンプレートに貼り付けます。

1. 管理者でログイン
2.「 レイアウト」－「HTMLの編集」を開く
3. 「ウィジェットのテンプレートを展開」をチェック
次の記述を探します。

<data:post.body/>

追記（続きを読む）機能を導入している場合は、そのコードの直下に貼り付けます。

設定オプションは赤文字部分の２つだけです。

表示するラベル数
maxNumberOfLabels = 3;

ラベル毎に表示する記事数
maxNumberOfPostsPerLabel = 10;

上の設定だと３つのラベルに10件の記事で30行（プラスα）のスペースが記事下に取られますから、設定値はバランスを見ながら適切に変更すると良いと思います。