サイトにRSSフィードを表示させる方法


 [動画王を持っている方必見の情報です]

サイトのトップページ、ブログのトップページなどに
自分のブログの更新情報を載せたい場合があります。

こうした時に、RSSフィードを取得して
HTMLサイトに表示する方法はないかと探していました。


そこで見つけたのが[Google Feed API]なんです。

って、これだけじゃ全然分からないので、
サンプルコードを載せて説明しますね。


以下のコードを<head>~</head>内に書きます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
var FA = new Array( //取得したいRSSフィードを↓↓↓加える
 "http://******"			//(1) ブログのフィードURL
);
function initialize() {
 var feedsArr = new Array();
 var numEntr = **;			//(2) 各RSS毎のフィード数
 var container = document.getElementById("feed");
 var cnt = FA.length;
 for (var k=0; k<FA.length; k++) {
  var feed = new google.feeds.Feed(FA[k]);
  feed.setNumEntries(numEntr);
  feed.setResultFormat(google.feeds.Feed.JSON_FORMAT); //JSONフォーマットに整形
  feed.load(function(result) {
  if (!result.error) {
   for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
var attributes = ["title", "link", "publishedDate", "contentSnippet"];
 var ind = feedsArr.length;
 feedsArr[ind] = new Array();
 feedsArr[ind][0] = Date.parse(entry[attributes[2]]); // 日付でソート(並び替え)
 feedsArr[ind][1] = entry[attributes[1]]; // link
 feedsArr[ind][2] = entry[attributes[2]]; // publishedDate
 feedsArr[ind][3] = entry[attributes[3]]; // contentSnippet
 feedsArr[ind][4] = entry[attributes[0]]; // title
 feedsArr[ind][5] = result.feed.title; // site title
 }
 }
 cnt--;
 if (cnt == 0) {
 feedsArr.sort();
 feedsArr.reverse();
 for (var j = 0; j < feedsArr.length; j++) {
 var aE = document.createElement("A");
 var h3 = document.createElement("H3");
 var p = document.createElement("P");
 var spanD = document.createElement("SPAN");
 aE.href=aE.title=feedsArr[j][1];
 aE.appendChild(document.createTextNode(feedsArr[j][4]));
 h3.appendChild(aE);
 spanD.appendChild(document.createTextNode(feedsArr[j][2]));
 spanD.appendChild(document.createTextNode(" ("+feedsArr[j][5]+")"));
 p.appendChild(document.createTextNode(feedsArr[j][3]));
 p.appendChild(spanD);
 container.appendChild(h3);
 container.appendChild(p);
 }
 }
 });
 }
}
google.setOnLoadCallback(initialize);
</script>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

(1)に、RSSのURLを入れます
(2)は、RSS毎の表示件数を入れます


次に、RSSフィードを表示させたい部分に
以下のコードを<body>~</body>内に書きます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div id="feed"></div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


こちらが、アダルトアフィリエイトツールの
動画王のトップページに作ってみたモノです。

⇒ 『日刊エロ動画情報局』


上記のコードには複数のRSSを登録できるのですが、
ブログ作成の度にHTMLを手作業で書き換えて
上書きアップロードするのがメンドイので、
こちらのRSSフィード取得・表示ツールが
出力しているRSSを利用しています。

⇒ 『RSSフィード取得・表示ツール=ピンクタイフーン』


ブログの方は、こちらのツールを使用しています。

⇒ 『アダルトアフィリエイトツール=動画王』


PS:動画王購入者の方は、
 コード&広告の入ったサンプルファイルを
 ダウンロードできるようにしました。

 HTMLファイルを参考にしながら、
 広告コードなどを差し替えて使ってください。

⇒ 『サンプルHTML』

 ※修正箇所は、コメントアウトしている箇所になります



コメントを残す

サブコンテンツ

格安フリーSIM


タブレット、ポケットWi-Fiや
スマホに私も使っています♪

オススメ 教材&ツール

その他


ページビューランキング
SEO対策相互リンク集
自動上位ツール
  • seo

このページの先頭へ