JSON フィードとは？

JSON フィードとは、ブログの更新情報を Javascript 形式で実装された情報です。
JSON フィードは全てのブログで自動的に生成され、feed.js というファイルで公開されています。ブログが更新されるとそのブログの JSON フィードも自動的に更新されます。
（JSON フィード対応前に上級者テンプレートに変換している場合は、 デフォルトテンプレート を参考に作成してください。）

例：http://example.lekumo.biz/feed.js

複数ブログのまとめページを作成する

Lekumo ブログOEM で複数のブログを作成している場合は、他のWEBページに JSON フィードを組み込んで、複数ブログの最新記事一覧ページを作成することができます。
具体的には、Javascript 形式の JSON フィードを他のページの HTML で、以下のようなスクリプトを読み込み、処理を記述することで利用します。

サンプルスクリプトを使用して複数ブログのまとめページを作成する

1. サンプルスクリプトをコピー & ペーストする
   JSON フィードを使用して更新履歴を表示したいページの HTML に、以下に用意されているサンプルスクリプトをコピー & ペーストします。
2. サンプルスクリプト内の JSON フィード URL を変更する
   サンプルスクリプトの以下の部分の URL を、表示させたいブログの JSON フィード URL （http://ブログ URL / feed.js）に変更します。
   たとえば、5 つのブログの新規記事一覧を表示させたい場合は、以下の指定を 5 回表記し、それぞれの URL を各ブログの JSON フィード URL に変更することで可能です。

<script type="text/javascript" src="http://goodpic.typepad.jp/sample2/feed.js" ></script>

3. 必要に応じて新規記事一覧の表示数を変更する
   JSON フィードで表示する新規記事の表示件数をコントロールするには、以下の部分の 3 の数値を変更します。

for (var i=0; i < Math.min(3, data.entry.length); i++) {

4. 編集した HTML を保存する
   サンプルスクリプトの編集が完了したら、HTML ファイルを保存し、表示を確認します。

注意：

• パスワード保護設定されたブログや、フィードの出力設定がオフになっているブログの記事一覧は表示できません。
• Lekumo ブログOEM から配信される JSON フィードは文字コードが UTF-8 となっています。外部の HTML にサンプルスクリプトを貼り付ける場合は、HTML の文字コードをあわせてください。

サンプルスクリプト

<script type="text/javascript">
<!--

function  Lekumo ブログOEM JsonCallback(data) {

  var content = document.getElementById("matome");

  var mydiv  = document.createElement("div");
  mydiv.setAttribute("class", "section updates");
  var title = document.createElement("h3");
  title.innerHTML = data.title;
  mydiv.appendChild(title);

  for (var i=0; i < Math.min(3, data.entry.length); i++) {
    entry = data.entry[i];
    var myli  = document.createElement("div");
    myli.innerHTML = "<h4><a href='" + entry.link + "'>"
      + entry.published.substr(5,2) + " / " + entry.published.substr(8,2) + " :  "
      + entry.title + "</a></h4><p>" + entry.summary
      + "　<a href='" + entry.link + "'>" + "詳しく読む" + "</a>"
      + "</p>";
    mydiv.appendChild(myli);
  }
  content.appendChild(mydiv);
}

-->
</script>

<div id="matome"></div>

<script type="text/javascript" src="http://goodpic.typepad.jp/sample/feed.js" ></script>
<script type="text/javascript" src="http://goodpic.typepad.jp/sample2/feed.js" ></script>