« 最近のブログタイトルを表示-1 | トップページ | 安静日 »

2013年8月12日 (月)

最近のブログタイトルを表示-2

前回の記事で、niftyのブログ記事のタイトルを取得する為、RSSリーダーの設定をしましたが、元々、参考にさせていただいたのは、

JavaScript で外部サイトのフィードを取得 - Google AJAX Feed API を利用

6. フィードを取得するためのソースコード 

に記載されていたソースコードです。

こちらのソースコードを借用し、自分の目的に合わせて、そぎ落とし、自分のブログから情報を取り出せるように修正しました

【ソースコード】
script type="text/javascript" src="http://www.google.com/jsapi"></script
<script>
var blog = {
feedurl: "https://anocora.cocolog-nifty.com/blog/index.rdf", //自分のブログのRSSを表示するURL
numOfPost: 7, // 1 ページに表示する投稿数
url: "http://jutememo.blogspot.com/" //自分のブログのURL
}

// エントリーのタイトルをリンク付きにして div 要素に入れて返す。
function createTitleWithLink(entry, idx){
var div = document.createElement("div"); var anchor = document.createElement("a");
anchor.href = entry.link;
anchor.setAttribute("name", idx);
anchor.appendChild(document.createTextNode(entry.title));
div.className = "title";
div.appendChild(anchor);
return div;
}
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed(blog.feedurl);
feed.setNumEntries(blog.numOfPost)
feed.load(function(result) {
  if (!result.error) {
   var divFeed = document.getElementById("feed");
   for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    // フィードのタイトルを生成
    divFeed.appendChild(createTitleWithLink(entry, i));
   }
  }
  });
}
google.setOnLoadCallback(initialize);
</script>

動作を確認しながらそぎ落としていったので、まだ不要なスクリプトが残っているかも知れませんが、一応、目的は達成できています。

【HTML】
<!-- フィードの内容 -->
   <div id="feed"></div>

表示エリアの設定はこれだけです。

これを、従来のあのこらのホームページに追加しました。

動作確認用に作成した、WEBページは
http://www.anocora.com/anocora/newpage15.htmlに残してあります。

« 最近のブログタイトルを表示-1 | トップページ | 安静日 »

ホームページの修正」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: 最近のブログタイトルを表示-2:

« 最近のブログタイトルを表示-1 | トップページ | 安静日 »

今日の体温(下は昨日)

  • 36.3℃
    35.8℃

スライムパンク防止剤被害低減プロジェクト

川越市周辺の自転車屋MAP

埼玉県内出張修理店情報

自転車修理法の疑問はこちらへ

自転車出張修理のブログ

ブログランキング

カテゴリー

無料ブログはココログ