Google AJAX Feed APIで静的HTMLに外部ブログを読み込み表示させる

静的なHTMLページに、Google AJAX Feed APIを使って、feedを呼び出し表示させる方法です。
何度かやっているのに、毎回忘れて調べ直すので忘れないようにメモ!

jsファイルを用意する(外部として読み込み)

参考にさせていただいたサイト
http://ascii.jp/elem/000/000/407/407910/

function loadFeed() {
    var feed = new google.feeds.Feed("フィードのURL");
    feed.setNumEntries(読み込む記事の最大数);
    feed.load(function(result) {
        if (!result.error) {
            フィード全体の情報(サイトのタイトル等)を出力
            for (var i = 0; i < result.feed.entries.length; i++) {
                個々の記事の情報を出力
            }
        }
    });
    google.setOnLoadCallback(loadFeed);
}

こう書けば出力してくれるそうですが、リスト表示にしたり、表示件数を調整したり、日付を入れたり、タイトルにリンクを貼ったりしたかったので触ってみました。
それがこちら↓

// JavaScript Document
google.load("feeds", "1");

function initialize() {
  var feedurl = 'http://feedのURL';

  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(5);
  feed.load(dispfeed);

  function dispfeed(result){
    if (!result.error){
      var container = document.getElementById('feed');
      var htmlstr = '';

      htmlstr += '<ul>';
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var text = entry.contentSnippet.substr(0,100);
        text = text + '...';
    htmlstr += '<li class=\"blog_list_day\">';
        htmlstr +=  createDateString(entry.publishedDate);
        htmlstr += '</li>';
        htmlstr += '<li class=\"blog_list_title\">';
        htmlstr += '<a href=\"' + entry.link + '\">' + entry.title + '</a> ';
        htmlstr += '</li>';
        htmlstr += '<li class=\"blog_list_text\">';
        htmlstr += text;
        htmlstr += '</li>';
      }
      htmlstr += '</ul>';

      container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + ':' + result.error.message);
    }
  }
}

//日付表記を変換
function createDateString(publishedDate){
  var pdate = new Date(publishedDate);

  var pday = pdate.getDate();
  var pmonth = pdate.getMonth() + 1;
  var pyear = pdate.getFullYear();
  var strdate = pyear + "年" + pmonth + "月" + pday + "日" ;

  return strdate;
}

google.setOnLoadCallback(initialize);

※5行目の var feedurl = ‘http://feedのURL’; の部分に表示したいブログのfeedURLを入れます。
※8行目のfeed.setNumEntries(5);の(5)(10)にすれば、10件表記に出来ます。

head内にscriptを記述

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="js/google_rsscode.js"></script>

※今まではこの機能を使うにあたり、APIキーというものを取得しないといけなかったので下記のように記述していました。
<script type=”text/javascript” src=”https://www.google.com/jsapi?key=APIキー”>

それが今はこのように書けばAPIキーなしで動くようです。
<script type=”text/javascript” src=”https://www.google.com/jsapi>

表示したい部分にHTMLを挿入

<!--ブログ更新リストここから -->
<div id="feed"></div>
<!--ブログ更新リストここまで -->

先に記述したjavascriptのコードは、リスト表示しているのでそのまま使うならこのCSSも一緒に使うといい感じに仕上がります!
※名前などは適当に変えて下さいね↓

/* 最新ブログ記事読み込み feed */
#feed{
	margin-bottom: 20px;
}
.blog_list_day{
	padding: 5px 10px;
	float: left;
	color: #9F9C20;
}
.blog_list_title{
	border-bottom: 1px dashed #CCC;
	padding: 5px 10px;
}
.blog_list_text{
	padding: 5px 10px 15px;
}

関連記事

  1. Googleカレンダーをホームページに表示させる方法

  2. レスポンシブデザインでインラインフレームをフィットさせる

  3. CSS3でドロップシャドウ(影)を付ける

  4. WEBサイト内の電話番号表記がskype番号になってしまうのを制御する…

コメント

  1. この記事へのコメントはありません。

  1. 2015年 6月 19日

CAPTCHA


最近の記事

  1. 「雑誌取材」や「TV番組取材」という名目の広告営業にご注意!
  2. フリーランスに必要な「稼ぎ力」「継続力」を身につける
  3. ブログって何をどう書いたらいい?
  4. ホームページ・ブログ・SNS それぞれの特徴と役割そして使い分け

アーカイブ

制作実績一覧

  1. まごころ本舗様
  2. アロマ時間
  3. 芦屋気功療法院
  4. ホメオスタジア 敏感肌・乾燥肌用クレンジング&洗願ジェル
  5. office-aki
  6. looplus 神戸の不動産買取・売却・リフォーム
  7. 12starz
  8. SOARist
  9. ダンスウェア ララック様