Archive for the ‘RSSフィード’ Category

複数のRSSフィードを表示 「Google Feed API」利用その2 フィードごとにアイコン表示

12月 2nd, 2011 by berry | No Comments | Filed in RSSフィード

Google AJAX Feed APIではフィードプロパティの値「author」を使ってブログ投稿者の名前を呼びだすことができるので、これを利用してフィードごとに違うアイコンを表示することができます。

以下は前回のJavaScriptコードのHTMLを呼び出す部分です。

wrap.innerHTML = eimg + ‘<li><span>’ + date.getFullYear() + ‘年’ + (date.getMonth() + 1 ) + ‘月’ + date.getDate() + ‘日</span><a href=”‘ + eLink + ‘” target=”_blank”>’ + eTitle + ‘</a>(’ + entry.blogName + ‘)</li>’;
container.appendChild(wrap);

ここの年月日とタイトルの間に赤字の部分を追加してみました。

wrap.innerHTML = eimg + ‘<li><span>’ + date.getFullYear() + ‘年’ + (date.getMonth() + 1 ) + ‘月’ + date.getDate() + ‘日</span><img src=”img/’ + entry.author + ‘.gif” /><a href=”‘ + eLink + ‘” target=”_blank”>’ + eTitle + ‘</a>(’ + entry.blogName + ‘)</li>’;
container.appendChild(wrap);

entry.authorの部分に投稿者名の名前が呼び出されるので
この場合img/の中の「投稿者名.gif」が呼び出されます。

※アメブロの場合は投稿者(name値)が設定されていない為か、呼び出されず「.gif」となってしまいます。
なので

<img src=”img/’ + entry.author + ‘.gif” />

<img src=”img/icon‘ + entry.author + ‘.gif” />

としておきimg/の中に「icon.gif」を入れておけばアメブロ用のアイコンとして表示されます。
その場合、他のアイコンは「icon投稿者名.gif」となります。

複数のRSSフィードをまとめて日付順に表示する方法 「Google Feed API」利用

11月 30th, 2011 by berry | No Comments | Filed in RSSフィード

wordpressの更新情報をwordpressでないページに一覧表示、
その他ブログサービスの更新情報を一覧表示する方法は「Google Feed API」の利用がおすすめです。

RSSフィードを登録するだけで簡単に一覧表示のコードを生成してくれるサービスもあるのですが、カスタマイズ性が低く、また広告入りになったりするので非常に使いづらいものでした。
「Google Feed API」はカスタマイズ性が高く、広告も表示されません。また、phpなどの特別なファイルを用意しなくてもhtmlファイル内で扱うことができるのが利点です。

「Google Feed API」を利用するには、まず「APIキー」を取得する必要があります。取得は簡単で1分でできます。

次のサイトに行き、「sign up for a API key」をクリックします。
http://code.google.com/intl/ja/apis/ajaxfeeds/

サイトのURLを入れろと言ってきますので、自分のサイトのURLを入れます。

 API keyが表示されます。これで取得完了です。

次はhtmlにコードを記載します。
<head></head>内または直接<body></body>内に以下のスクリプトを入力します。

<script type=”text/javascript” src=”http://www.google.com/jsapi?key=取得したAPIキー“></script>
<script type=”text/javascript”>
<!–//
google.load(“feeds”, “1″);
var entryArray = new Array();
var entryNum = 0;
function initialize() {
feedAdd(“フィードURL“, 3);
feedAdd(“フィードURL“, 2);
feedAdd(“フィードURL“, 1);
}//フィードURLを増やすごとに4、5、6と数値も増やす
function feedAdd(rssUrl, boolNum) {
var feed = new google.feeds.Feed(rssUrl);
feed.setNumEntries(3);//1つのフィードごとに取得したい記事数を入れる
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
entryArray[entryNum] = result.feed.entries[i];
var date = new Date(result.feed.entries[i].publishedDate);
entryArray[entryNum].sortDate = ( date.getFullYear()*1000000 ) + ( (date.getMonth() + 1)*3600*32 ) + ( date.getDate()*3600 ) + ( date.getHours()*60 ) + date.getMinutes();
entryArray[entryNum].blogName = result.feed.title;
entryNum+=1;
}
}
if(boolNum==1){
feedOutput(“feed”, 100);
}
});
}function feedOutput(feedId, listNum){
var container = document.getElementById(feedId);
entryArray = asort(entryArray, “sortDate”);
if(listNum > entryNum){ //修正箇所
listNum = entryNum;
}
for (var i = 0; i < listNum; i++) {
var entry = entryArray[i];
var date = new Date(entry.publishedDate);
var eTitle = entry.title;
var eCont = entry.contentSnippet.substring(0, 50);
var eLink = entry.link;
var eimg = “”;
var wrap = document.createElement(“ul”);
wrap.innerHTML = eimg + ‘<li><span>’ + date.getFullYear() + ‘年’ + (date.getMonth() + 1 ) + ‘月’ + date.getDate() + ‘日</span><a href=”‘ + eLink + ‘” target=”_blank”>’ + eTitle + ‘</a>(’ + entry.blogName + ‘)</li>’;
container.appendChild(wrap);
}
}
function asort(myArray, key){
return myArray.sort ( function (b1, b2) { return b1[key] > b2[key] ? -1 : 1; } );
}google.setOnLoadCallback(initialize);
//–>
</script>

最後に<body></body>内に

<div id=”feed”></div>

を記載

うまく動作すればこれで「日付」「記事タイトル」「ブログタイトル」の順でリスト表示されると思います。<li>にクラスをつけたり、#feed要素にスタイルを記述するなどして見た目をカスタマイズできます。

コードは以下のサイト様を参考にさせていただきました。
Google AJAX Feed API で複数のブログからフィードを取得して、しかも日付順に並び替えるコード