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のカスタム投稿タイプで記事一覧を表示させる

カスタム投稿タイプの記事一覧を表示したい時のコードをメモ。 サムネイル付きで。

記事を読む

Wordpress

WordPressの固定ページで、テンプレート選択できなくなったとき

急に固定ページにてテンプレートが選択できなくなりました。 いろいろ調べた結果、、、

記事を読む

Wordpress

WordPressで新着記事に日数を指定して『New!』マークを表示させる

Wordpressで新着記事に 『New!』のマークを表示させる方法。 日数を指

記事を読む

Wordpress

覚えておきたいWordPressのリセットまとめ

get_postsに対してのリセットに少々手間取っていたら、これで一発でした(苦笑)。

記事を読む

Wordpress

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

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

記事を読む

Wordpress

WordPressで『the_excerpt』のpタグを消す方法

タイトル通り、 Wordpressで抜粋を表示させるタグ 『the_excerpt』

記事を読む

Wordpress

WordPressのカスタム投稿タイプで記事と同一タクソノミーの記事一覧をサムネイル付きで表示する

何だかタイトルでは、長いのでわかりにくいのですが、 要はカスタム投稿タイプを使って書い

記事を読む

Wordpress

[WordPress]一覧ページに記事の中の一番最初にある画像を表示させたいとき

タイトル通り、投稿一覧ページなどで サムネイル写真を表示させたいとき、 投稿記事中の一番

記事を読む

Wordpress

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

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

記事を読む

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 ↑