ブログBLOG

  1. HOME
  2. ブログ
  3. 備忘録
  4. Google AJAX Feed APIで、外部サイトをホームページに表示

BLOGブログ

Google AJAX Feed APIで、外部サイトをホームページに表示

ホームページとブログを両方運用している時、
トップページにブログの更新情報が自動掲載されたら良いと思いませんか?

以前は表示されるまでに数時間~数日のタイムラグがあったgoogleのRSS表示ですが、最近は本当にすぐに掲載されるようになりました。

導入の詳しい方法は、色々なサイトで詳しく述べられているので、
ここでは、表示方法のカスタマイズについてメモ的に掲載します。

私は新着情報の更新などは、下記のように作ることが多いので、
それに合わせて、ブログも日付&タイトルのデータを取得したい
<dl>
<dt>2009年12月11日</dt>
<dd>内容を記載します</dd>
</dl>

—————————————————–

google.load(“feeds”, “1”);
function initialize() {
//読み込むフィードのURLを指定
var feed = new google.feeds.Feed(“読み込むフィードのURLを指定”);

//読み込むフィードの数を指定
feed.setNumEntries(5);

feed.load(function(result) {
if (!result.error) {
var container = document.getElementById(“feed”);

for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var date = new Date(entry.publishedDate); //各HTML要素を生成 var div = document.createElement("div"); var dl = document.createElement("dl"); var dt = document.createElement("dt"); var dd = document.createElement("dd"); var a = document.createElement("a"); //記事のタイトルを取得 var entryTitle = entry.title; //記事のパーマリンクの値を取得 var entryLink = entry.link; //[2009年12月11日]の形式で日付を取得 var entryDay = date.toLocaleDateString(); //dt要素内に、content要素をHTMLコードとして挿入 dt.innerHTML=entryDay; dd.appendChild(a); dd.getElementsByTagName("a")[0].setAttribute("target","_blank"); //a要素に対して、link要素の文字列をhref属性の値として設定 dd.getElementsByTagName("a")[0].setAttribute("href",entryLink); //a要素の子要素として、title要素をテキストノードに変換して挿入 dd.getElementsByTagName("a")[0].appendChild(document.createTextNode(entryTitle)); dl.appendChild(dt); dl.appendChild(dd); container.appendChild(dl); } } }); } google.setOnLoadCallback(initialize); ----------------------------------------------------- ※今回、上記コードを作成するにあたりこちらのサイトを参考にさせていただきました。 http://www.ficc.jp/labs/archives/suzuki/google_ajax_feed_api/