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で新着記事に日数を指定して『New!』マークを表示させる

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

記事を読む

Wordpress

カスタムフィールドに設定したものを表示させる方法

完全なるメモです。 カスタムフィールドにいれた情報を表示させたい時のコード。

記事を読む

Wordpress

WordPressのカスタム投稿タイプで記事一覧を表示させる

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

記事を読む

Wordpress

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

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

記事を読む

Wordpress

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

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

記事を読む

Wordpress

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

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

記事を読む

Wordpress

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

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

記事を読む

JetPack

Twitterへの自動投稿プラグインはこれに決定。WordTwit から『JetPack』へ

ワードプレスで記事を投稿したら、 自動的にTwitterへも投稿したい!というただその思いで 今

記事を読む

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 ↑