Google Ajax Feed API でホームページにRSSを表示させるメモ

ご無沙汰です。

暑かった夏もようやく終わってくれたようで、ここ数日はクーラーをつけづに仕事をしています。

先週から仕事仲間と一緒にサイト制作&一部WordPressの組み込み+携帯サイトの導入作業をしています。
今日は『サイトトップページにWPの記事一覧を表示する』の一つの方法メモ。

★今回は「Aカテゴリー」「Bカテゴリー」の記事をそれぞれ独立して構築したかったのでWPは2つ設置。
 Ver3.0からMTのようなマルチブログ化も可能になりましたが、
 今回は『Aカテゴリー』だけの検索フォームが必須項目だったので、ちょっとアナログな方法で
 こうちくすることに・・・しました!

逆に『Bカテゴリー』のみすべての記事をWebサイトのトップページに表示したかったので、
今回は「RSSを表示させる」方法をとることにしました。

仕掛けは「Google Ajax Feed API」を利用すること。
今回はこちらで紹介している方法を参考にさせてもらいました。
jQueryでRSSを取得しリストで表示

<br />
<HTML></p>
<p>    //head内にjQueryを&lt;script type=&quot;text/Javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt; //body内にリスト表示させる場所を作ってあげる&lt;div id=&quot;list-01&quot;&gt;&lt;!-- ここにフィードの内容が表示される --&gt;&lt;/div&gt;</p>
<p><JavaScript></p>
<p>    $(function(){<br />
    //RSSが同じドメインにある場合<br />
    $.ajax({<br />
    //同じドメインにあるXMLファイルのある場所を指定してあげる<br />
    url: 'rss.xml',<br />
    //非同期通信<br />
    async: true,<br />
    //通信結果をキャッシュしない<br />
    cache: false,<br />
    dataType: &quot;xml&quot;,<br />
    success: function(xml){<br />
    $(xml).find('item').each(function(i){<br />
    if (i == 10) {<br />
    return false;<br />
    }<br />
    var title = $(this).find('title').text();<br />
    var url = $(this).find('link').text();<br />
    var date = $(this).find('pubDate').text();<br />
    //月表示を数字表示に変換する<br />
    date = dateChanger(date);<br />
    //idがlist-01の箇所にリストで書き出す<br />
    $('#list-01').append('&lt;li&gt;' + date + '&lt;a href=&quot;' + url + '&quot;&gt;' + title + '&lt;/a&gt;&lt;/li&gt;');<br />
    });<br />
    //idがlist-01にあるliをolで括る<br />
    $('#list-01 li').wrapAll('&lt;ol&gt;&lt;/ol&gt;');<br />
    },<br />
    //エラー表示<br />
    error: function(xml){<br />
    $('#list-01').append('&lt;p&gt;Feedの読み込みに失敗しちゃいました。&lt;/p&gt;');<br />
    }<br />
    });<br />
    //月表示を数字表示に変換する<br />
    var dateChanger = function(str){<br />
    var mydate = new Date(str);<br />
    yy = mydate.getFullYear();<br />
    mm = mydate.getMonth() + 1;<br />
    dd = mydate.getDate();<br />
    if (mm &lt; 10) { mm = &quot;0&quot; + mm; }<br />
    if (dd &lt; 10) { dd = &quot;0&quot; + dd; }<br />
    datestr = yy + &quot;年&quot; + mm + &quot;月&quot; + dd + &quot;日&quot;;<br />
    return datestr;<br />
    };<br />
    });<br />

これを実際にトップページで読み込ませて設置。
今回は日付の表示はいらないので(タイトルだけでOK)
日付に関する表示はCUTしました。

今回は『同じドメイン内にRSSが設置されていることが前提』の方法です。

違うドメインからのRSSを引っ張ってくるやり方はまた別で。



コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください