スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

RSSの最新記事をブログに表示する。javascript編

JavaScriptでブログなどの最新記事を表示するサンプルスクリプトです。
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
 
  google.load("feeds", "1");  

function initialize2() {
 siteurl2 = document.form2.siteurl.value;  // 入力ボックスから値を取得

  google.feeds.lookupFeed(siteurl2, function (result){//フィードを探す  
    if (!result.error){  // エラーが発生していない場合の処理
      if (result.url != null) {  // フィードが見つかった場合
        var feed = new google.feeds.Feed(result.url);
          feed.setNumEntries(3);// 最新記事を最大5件読み込む
        feed.load(function (result){
          if (!result.error){ // 読み込みに成功したときの処理
            var container = document.getElementById("box1");
            var htmlstr = "";
            htmlstr += '<h2><a href="' + result.feed.link + '">' + result.feed.title + '</a></h2>'; // サイトのタイトルを出力
            htmlstr += '<p>説明 :' + result.feed.description + '</p>'; // サイトの概要を出力
            

            for (var i = 0; i < result.feed.entries.length; i++) {
               // 各記事のタイトルと概要、日付 を出力
              var entry = result.feed.entries[i];

              htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>'; 
       
             htmlstr += '<p>内容 :' + entry.contentSnippet + '</p>';
     var pdate = new Date(entry.publishedDate);
        var strdate = (pdate.getMonth() + 1) + '月' + pdate.getDate() + '日';
              
              htmlstr += '<p>日付 :' + strdate  + '</p>';
              htmlstr += '<p>カテゴリ :';
              for (var j = 0; j < entry.categories.length; j++) {
                htmlstr += '[' + entry.categories[j] + ']';
              }
              htmlstr += '</p>';
            }
            container.innerHTML = htmlstr;
          }else{
            alert(result.error.code + ":" + result.error.message);
          }
        });
      }
    }else{
      var container = document.getElementById("box1");
      container.innerHTML = "フィードがありません";
    }
  });
}

</script>
</head>
<body>
<form name="form2">
<input type="name" size="60" name="siteurl" value="http://blog130.blog65.fc2.com/">
<input type="button" onclick="initialize2()" value="送信" >
  </form>
<p>最新記事の表示</p>
<div id="box1"></div>
</body>

【URL/RSS】入力欄



RSSで取得した情報を表示します。



■参考にしたサイト
JavaScriptで外部フィードを手軽に取り込める
指定したサイトのフィードを検索
サイトに外部ブログのRSSを表示する方法

■RSS表示用ブログパーツ
FeedWind(フィードウィンド)
関連記事

コメント


管理者のみに表示
ニューハーフ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。