Google AJAX Feed APIでフィードを読み込む

フィードをサクっと表示できるものを探していたら、「Google AJAX Feed API」なるものを提供しているという記事を発見。
備忘録も兼ねて、メモ。

dlで表示してみる

jsの内容

参考:Google AJAX Feed APIでRSSを読み込もう

こちら、汎用性の高い「dl」で表示されるように作成されていました。ほとんどそのまま使えて大助かり。

とりあえずファイル名を「feed.js」として、以下を記述します。

google.load("feeds", "1");
// 読込処理
function initialize() {
// 読み込むRSSのURLを設定する。
var feed = new google.feeds.Feed("ここに表示したいフィードのurl");
// 取得件数を引数に設定。
feed.setNumEntries(5);
// 読込実行
feed.load(function(result) {
// 正常に読み込めたか判定
if (!result.error) {
// idがrssAreaのオブジェクトを取得
var container = document.getElementById("rssArea");
// 要素の削除
// (※ここでrssArea内の要素をすっきりきれいに削除。)
while ( container.firstChild ) {
container.removeChild( container.lastChild );
}
// 取得した記事情報が0件の場合は、記事情報が無い旨を出力して終了。
if (result.feed.entries.length == 0) {
var p = document.createElement("p");
var pStr = "現在、記事情報はありません。";
p.appendChild(document.createTextNode(pStr));
container.appendChild(p);
return;
}
// dlタグを生成
var dl = document.createElement("dl");
// 取得した記事情報分処理を実行
for (var i = 0; i < result.feed.entries.length; i++) {
// 取得した記事情報を取得。
var entry = result.feed.entries[i];
var dt = document.createElement("dt");
var dd = document.createElement("dd");
var a = document.createElement("a");
// 日付の書式設定
// (※ここで取得した記事情報から日付を取得。)
var date = new Date(entry.publishedDate);
var dateY = date.getFullYear();
var dateM = date.getMonth() + 1;
var dateD = date.getDate();
var dtStr = dateY + "/" + dateM + "/" + dateD;
// dtの設定
dt.appendChild(document.createTextNode(dtStr));
// aの設定
// (※ここで取得した記事情報のURLを取得してリンク先に設定。)
a.setAttribute("href", entry.link);
a.setAttribute("target", "_blank");
// (※ここで取得した記事情報のタイトルを取得して、リンクを設定。)
a.appendChild(document.createTextNode(entry.title));
// ddの設定
dd.appendChild(a);
dl.appendChild(dt);
dl.appendChild(dd);
}
container.appendChild(dl);
}
});
}
// 作成した関数(initialize)が読込時に呼び出されるようにコールバック関数として登録。
google.setOnLoadCallback(initialize);

<head>内に記述する内容

参考にしたサイトでは「API Keyが必要」と記述されていますが、現在API Keyは不要の模様。

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

表示したい場所に記述する内容

<div id="rssArea"><p>Now Loading...</p></div>

<p>の中は、もちろん画像でも大丈夫。

表示サンプル

こちらからどうぞ。

アメブロのフィードを「PR:」なしで表示する

アメブロは、フィード内に広告が入ります。その広告を除去した状態で表示します。
※都合によりサンプルなし

参考:グーグルのAPIを利用したアメブロの記事埋め込み|田舎のWEBコンポーザーの日課

google.load("feeds", "1");   
function initialize()
{   
 var feed = new google.feeds.Feed("ここにアメブロのフィードurl");   
 feed.setNumEntries(15)   
 feed.load(function(result) 
 {   
  if (!result.error) 
  {
 var container = document.getElementById("feed");
 while ( container.firstChild ) {
 container.removeChild( container.lastChild );
}
// 取得した記事情報が0件の場合は、記事情報が無い旨を出力して終了。
if (result.feed.entries.length == 0) {
 var p = document.createElement("p");
 var pStr = "現在、記事情報はありません。";
 p.appendChild(document.createTextNode(pStr));
 container.appendChild(p);
 return;
}
   var list = "";
    list = '<dl>';
   for (var i = 0; i &lt; result.feed.entries.length; i++) 
   {   
    var entry = result.feed.entries[i];  
    if(entry.title.match(/^PR:/)) {
    }
    else{
	 var strdate = createDateString(entry.publishedDate);
     list += &#039;<dt>' + strdate + '</dt>';
	 list += '<dd>';
     list += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
	 list += '</dd>';
    }
        } 
     list += '</dl>';
     container.innerHTML = list;
     }   
   });   
} 

function createDateString(publishedDate)
{
 var pdate = new Date(publishedDate);
 var pday = pdate.getDate();
 var pmonth = pdate.getMonth() + 1;
 var pyear = pdate.getFullYear();
 var phour = pdate.getHours();
 var pminute = pdate.getMinutes();
 var psecond = pdate.getSeconds();  
 var strdate = pyear + "/" + pmonth + "/" + pday ;
 return strdate;
} 
google.setOnLoadCallback(initialize); 

<head>内に記述する内容、表示したい場所に記述する内容は同じです。

3 件のコメント

  • ありがとうございます。
    ウェブデザイン初心者の私にも表示させることができました。
    PHPわからないのですごく助かりました。

    • コメントありがとうございます。
      返信遅くなりまして申し訳ありません。
      お役に立ててよかったです!

  • 初心者です。すごくわかりやすかったです。

    ちなみに、日付とタイトルが2段構えになっていますが、それを一行表示にすることはできるのでしょうか?ぶしつけなのですが、教えていただけるとたすかります。

  • コメントを残す

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

    CAPTCHA