RSSフィードをサイト内に表示サムネイル付きで表示させる時。表示されない時の注意点も。

公開日: : JavaScript, Wordpress

RSS

外部サイトの更新を自分のサイト内に
サムネイル付きで表示させたい時。

ちょっとつまづいたのでメモ。

ちなみに、私は読むこむサイト、読み込みたいサイト。
どちらもWordpressを使用しています。

Google Feed Apiを読み込む

まずGoogle Feed Apiを読み込みます。

<script src="https://www.google.com/jsapi" type="text/javascript"></script>

t


JavaScriptを埋め込む

次に〜内に
以下のようなJavaScriptを埋め込みます。

google.load("feeds", "1");
var FA = new Array( //ここに、取得したいRSSフィードを加える
 "http://〇〇.com/feed/"
);
function initialize() {
 var feedsArr = new Array();
 var numEntr = 1; //フィードを読み込む数
 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 eimg = "";
    var imgCheck = entry.content.match(/(http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG)|(\.gif))/); //データを取得する拡張子を指定
    if(imgCheck){
     eimg += imgCheck[0]; //配列の1番目に格納されたデータを取得(つまり、1枚目の画像を取得)
    } else {
     eimg += ' '; //画像が取得できなかった場合の代替画像の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]]; // link
 feedsArr[ind][2] = entry[attributes[2]]; // publishedDate
 feedsArr[ind][3] = entry[attributes[3]]; // contentSnippet
 feedsArr[ind][4] = entry[attributes[0]]; // title
 feedsArr[ind][6] = eimg; // thumbnail
 }
 }
 cnt--;
 if (cnt == 0) {
 feedsArr.sort();
 feedsArr.reverse();
 for (var j = 0; j < feedsArr.length; j++) {
 var aE = document.createElement("a");
 var aE2 = document.createElement("a");
 var div = document.createElement("div");
 var div2 = document.createElement("div");
 var div3 = document.createElement("div");
 var div4 = document.createElement("div");

 aE2.href=aE2.title=feedsArr[j][1];//link
 var img_link = document.createElement("img");
 img_link.setAttribute("src", feedsArr[j][6] );
 img_link.setAttribute("width", "100%" ); //画像の幅
 aE2.appendChild(img_link); //img(画像)タグを出力
 div.appendChild(aE2);//link閉じ

 var pdate = new Date(entry.publishedDate);
 var pday = pdate.getDate();
 var pmonth = pdate.getMonth() + 1;
 var pyear = pdate.getFullYear();
 var strdate = pdate.getFullYear() + '年' + (pdate.getMonth() + 1) + '月' + pdate.getDate() + '日';

 div2.appendChild(document.createTextNode(strdate));//日付
 div.appendChild(div2);//div閉じ
 
 		
 aE.href=aE.title=feedsArr[j][1];//link
 aE.setAttribute("class", "feedtitle" ); //「rel」属性に「nofollow」を指定
 aE.appendChild(document.createTextNode(feedsArr[j][4]));//title
 div.appendChild(aE);//link閉じ
 
 
 div3.appendChild(document.createTextNode(feedsArr[j][3]));//抜粋
 div.appendChild(div3);//div閉じ

 container.appendChild(div);//divfeedへ挿入
 }
 }
 });
 }
}
google.setOnLoadCallback(initialize);


読み込みたい場所にdivタグを挿入

そして、RSSのフィードを表示させたい場所に、
以下のHTMLを記入します。

<div id="feed"></div>


この辺は、今村だけがよくわかるブログさんを参考に。
詳細は以下を見たほうが確実にわかりやすいです。

私の場合は、表示が画像・日付・タイトル・抜粋になるように変更しています。
画像とタイトルがリンク付き。

Google Feed APIでサムネイル付きで複数サイトの最新記事を取得する際、出力するhtmlコードを変更する方法 | 今村だけがよくわかるブログ

表示されない時にチェック

私はなぜかサムネイルだけが表示されなくて。
でも、理由は簡単でしたw

私はその外部サイトをWordpressで構築していたのですが、
表示させたい外部サイトのRSS/Atom フィードでの各投稿の表示
抜粋のみを表示になってました…。

抜粋のみ表示だと画像が表示されません。

WordPressメニューの『設定 -> 表示』をひらいて、
RSS/Atom フィードでの各投稿の表示を全文を表示に変更。

これだけで解決。

わたしのバカバカ….
このために結構時間無駄にした…。

ad

関連記事

Wordpress

WordPressのタグアーカイブページで、現在のタグスラッグを取得する方法

Wordpressで、 タグアーカイブページに 条件分岐をいれたくて必要でした。

記事を読む

Wordpress

超簡単!Twitterのようにページの最下部まできたら自動的にコンテンツを表示するWordPressのプラグイン『jQuery.autopager』

TwitterやFacebookみたいに、 ページの末端、フッターあたりまできたら

記事を読む

Wordpress

WordPressでトップページだけが表示されない時

いつかはしなきゃ... と思っていたサーバーの引っ越し。 今週ついに引っ越しまし

記事を読む

no image

WordPressでタグがあるかどうかの条件分岐

タイトルどおり。 Wordpressの条件分岐についてメモ。 タグがあるかどうか

記事を読む

Wordpress

[WordPress]サイドを追尾させるプラグイン『Standard Widget Extensions』が簡単でかなり使いやすい。

以前プラグインを使わず、 サイドバーを有効活用する一番いい方法として、 サイドを活用させ

記事を読む

Wordpress

WordPressで固定ページのタイトル部分を画像に。

各固定ページ部分のタイトルを画像に変更しました。 その時に使ったコードをメモ。

記事を読む

Wordpress

[WordPress]カスタムフィールドに設定したカテゴリの投稿一覧を固定ページに表示させたい時。

固定ページに投稿一覧を表示させたい。 カテゴリナIDをカスタムフィールドに登録して、

記事を読む

jQuery

WordPress&bootstrapでもスムーズでした、横並びの要素の高さを揃えるjQueryプラグイン『matchHeight』

私が運営するメインサイトは、 bootstrapをWordpressで使用しているので

記事を読む

Wordpress

WordPressで任意ページのタイトルだけ改行させる方法

私の場合、 ついついタイトルが長くなってしまうので、 表示させる時に見やすいように改

記事を読む

Wordpress

カスタムフィールドの値で投稿や固定ページを一覧表示する!

タイトル通り、特定のカスタムフィールドがある固定ページを 一覧表示させたかったのですが

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑