当サイトTOPページにもあるBlogPickupのうように他サイトの記事を
新着順に並べて表示する方法をメモしておきます。
まず、Google Feed APIを読み込む必要が有るので＜head＞内に次を記載
|
1 |
<script src="https://www.google.com/jsapi" type="text/javascript"></script> |
次にベージ内に表示させる為に必要なスクリプトを入れます。
この部分をそのまま＜head＞内に入れても外部のJSファイルにしても構いません
ソースはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<script type="text/javascript"> google.load("feeds", "1"); var FA = new Array( //この後に掲載したいfeedやrssのURLを入れる↓ "http://www.○○○.com/feed", "http://www.△△△.jp/rss.xml", "http://www.◇◇◇.com/feed", "http://www.□□□.co.jp/rss.xml" //複数指定可能です ); function initialize() { var feedsArr = new Array(); var numEntr = 1; //上記の各フィードの読み込む数 var container = document.getElementById("g-feed"); //表示する場所のID名 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 eimg = ""; var imgCheck = entry.content.match(/(http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG)|(\.gif))/); //画像取得する拡張子指定 if(imgCheck){ eimg += imgCheck[0]; //記事1枚目の画像を取得 } else { eimg += 'http://www.◆◆◆.com/imge/no-image.png'; //画像がない場合の代替画像のURL } 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]]; // 記事へのリンク feedsArr[ind][2] = entry[attributes[2]]; // 記事の日付 feedsArr[ind][3] = entry[attributes[3]]; // 記事内容 feedsArr[ind][4] = entry[attributes[0]]; // 記事タイトル feedsArr[ind][5] = result.feed.title; // サイト名 feedsArr[ind][6] = eimg; // 画像url } } cnt--; if (cnt == 0) { feedsArr.sort(); feedsArr.reverse(); for (var j = 0; j < feedsArr.length; j++) { var p = document.createElement("P"); var hr = document.createElement("HR"); var date = new Date(feedsArr[j][2]); var strdate = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'; //日付を年月日に整形 p.appendChild(document.createTextNode(feedsArr[j][3])); container.innerHTML +="<h4><a href='" + feedsArr[j][1] + "' target='_blank'>" + feedsArr[j][4] + "</a></h4>"; container.innerHTML +="<a href='" + feedsArr[j][6] + "' class='highslide' onclick='return hs.expand(this)'> <img src='" + feedsArr[j][6] + "'></a>"; container.innerHTML +="<span>投稿日 " + strdate + " 【" + feedsArr[j][5] + "】</span>"; container.appendChild(p); container.appendChild(hr); } } }); } } google.setOnLoadCallback(initialize); </script> |
表示するには＜body＞内の表示させたい場所に上記12行目で決めたIDを使い
|
1 |
<div id="g-feed"></div> |
このように記載するだけです、
後は、CSSで綺麗に表示するように整形すれば完了です。
