中小企業のマーケティングやブランディングのコンサルティング。事業運営、組織運営のPDCA改善やホームページの制作、ウェブサイト改善などITネット活用を中心にサービスを提供しています。

ブログの更新情報をウェブサイトに表示するJavaScript × JSON を作ってみた

Twitterのツイートをウェブサイトやブログに表示するJavaScript × JSON に触発されて、ブログの更新情報も同じように表示する JavaScript × JSON を作ってみた。


    1. 更新情報の json ファイルを出力。
    Movable Typeの「インデックステンプレートを作成」から
    タイトル「MTCallback」
    出力ファイル名「mt.json」
    テンプレートの種類「カスタムインデックステンプレート」
    で以下のソースを貼り付けて保存。json ファイルを出力。

    MTCallback([
    <mt:Entries glue=",">
    {
    "created_at":"<$mt:EntryDate format="%x %X"$>",
    "title":"<mt:EntryTitle escape="url" $>",
    "url":"<mt:EntryPermalink$>"
    }
    </mt:Entries>
    ]);
    

    記事を更新するごとに公開日時、タイトル、URLを含んだ json ファイルを出力してくれる。タイトルは URLエンコード化。

    2. あとは、ページにjsonファイルまでのブログURLを設定した三行のソースを貼り付けるだけ。JavaScriptファイル (blogger.js) はダウンロードして使ってもOK。

    <ul id="blog_update_list"></ul>
    <script type="text/javascript" src="http://project.thingslabo.com/MTCallback/blogger.js"></script>
    <script type="text/javascript" src="ブログURL/mt.json?callback=MTCallback"></script>
    

    JavaScriptのソース (blogger.js) は、こんな感じの10行。

    function MTCallback(MT) {
    var statusHTML = [];
    for (var i=0; i<MT.length; i++){
    var title = decodeURIComponent(MT[i].title);
    var url = MT[i].url;
    var date = MT[i].created_at;
    statusHTML.push('<li><a href="'+url+'">'+title+'</a> '+date+'</li>');
    }
    document.getElementById('blog_update_list').innerHTML = statusHTML.join('');
    }
    

    ブログサービスでも json ファイルで更新情報の出力に対応してほしいゾ。

    シェア

    ブログの更新情報をウェブサイトに表示するJavaScript × JSON を作ってみたへの2件のコメント

    1. bunbun

      大変役立ちました。
      JSON FEEDを他のやりかたでやっても
      トップの通常htmlには反応しませんでした。
      この方法だと、2階層目以下に設置したブログの
      新着情報が普通のHTMLのトップに反映できました。
      助かりました。
      ところで、一つ難点は表示件数を指定したいのですが
      どうすれば良いでしょうか?

    2. thingsym

      表示件数はデフォルトで、1ページに表示する記事件数の設定に依存すると思います。
      Movable Typeでテンプレートで対応するには、lastn=”N”で件数を制御できますよ。ご参考まで。http://www.movabletype.jp/documentation/appendices/tags/entries.html

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    購読