1. まとめトップ

自分がまとめたNaverまとめのサムネイル付き新着記事をブログに表示する簡単な方法

NaverまとめのRSSフィードを読み込んで、サムネイル付きの新着記事をお使いのブログに表示する方法をまとめました。サムネイル付き、という点が重要です。

更新日: 2015年03月07日

2 お気に入り 1204 view
お気に入り追加

この記事は私がまとめました

tokinohitoさん

自分がまとめたNaverまとめの新着情報を、サムネイル付きで、自分のブログに掲載したい、と思った事はありませんか?

自分はあります。そして、実践しようとしました。

どうやら「Google Ajax Feed API」を利用する事で、新着記事の表示が可能であることはすぐにわかりました。しかし、調べても調べても

サムネイルの表示方法がわからない

のです。幾ら調べてもわからないのであれば、自力で何とかするかしないと考え、試行錯誤して最終的に何とか解決しました。

このまとめでは、『自分がまとめたNaverまとめの新着記事を、サムネイル付きでブログに掲載する方法』について掲載しています。我流な部分が多いので、わかりづらかったりスクリプトが汚かったりするかもしれませんが、ご容赦ください。

←のような感じになります。ブログのサイドバーにピッタリです。

1.下記をコピペして『naver.js』という名前で保存

google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://matome.naver.jp/feed/hot"); //読み込むRSS Feed(後で変更してください)
feed.setNumEntries(5); //読み込む件数(後で変更してください)
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.load(function(result) {
if (!result.error){
var container = document.getElementById("naver_feed");
var xmlDoc = result.xmlDocument;
var items = xmlDoc.getElementsByTagName("item");
var html = '';
for (var i = 0; i < items.length; i++) {
var title = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
var link = items[i].getElementsByTagName("link")[0].firstChild.nodeValue;
var thumbnail = google.feeds.getElementsByTagNameNS(items[i], "http://search.yahoo.com/mrss/", "thumbnail")[0].attributes[0].nodeValue;

//デザインここから(後で変更してください)
html += '<a href="' + link + '" target="_blank"><img src="'+ thumbnail + '" style="float:left;width:40px;height:40px;"></a>';
html += '<p><a href="' + link + '" target="_blank">' + title + '</a><div style="clear:both;"></div></p>';
//デザインここまで(後で変更してください)
}
container.innerHTML = html;
}
});
}
google.setOnLoadCallback(initialize);

2.『naver.js』をアップロードしてください

ここからは、ブログのテンプレート自体の変更箇所になります。

3.テンプレート上部の<HEAD>~</HEAD>内に下記をコピペ

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
</script>

4.テンプレート下部の</BODY>の一つ上の行に下記をコピペして、「変更してください」の箇所を手順2でアップロードした『naver.js』のURLに変更

<script type="text/javascript" src="「変更してください」"></script>

5.新着記事を表示したい場所に下記をコピペ

<div id="naver_feed"></div>

以上が、最低限の手順になります。

手順を間違えていなければ、これでひとまずは成功します。

サムネイル付きの新着記事を表示することに成功しました。実際にはこのように表示されます。
http://blog-imgs-73.fc2.com/f/u/t/futanarikei/naver_rss01.html

しかし、このままだと色々とダメなので…

・自分がまとめたNaverまとめの記事が表示されていない
・表示件数をもっと増やしたい/減らしたい
・デザインがダサい

手順1の『naver.js』の該当部分を「自分がまとめたNaverまとめのRSSフィード」に変更してください

var feed = new google.feeds.Feed("http://matome.naver.jp/feed/hot"); //読み込むRSS Feed(後で変更してください)

「自分がまとめたNaverまとめのRSSフィード」の確認方法

まず、Naverまとめからログアウトしてください。
もしくは、Naverまとめにログインしていない別ブラウザを立ち上げてください。

次に、
http://matome.naver.jp/mymatome/○○○
(○○○…貴方のユーザーID)
にアクセスしてください。

例:自分の場合
http://matome.naver.jp/mymatome/tokinohito

赤字の左のマークの部分が、「自分がまとめたNaverまとめのRSSフィード」へのリンクになっています。これをコピペして保存してください。

表示件数をもっと増やしたい/減らしたい場合は、『naver.js』の該当部分の数字を変更してください(デフォルトは5件)

feed.setNumEntries(5); //読み込む件数(後で変更してください)

デザインを何とかしたい場合は、『naver.js』の該当部分を変更してください

//デザインここから(後で変更してください)
html += '<a href="' + link + '" target="_blank"><img src="'+ thumbnail + '" style="float:left;width:40px;height:40px;"></a>';
html += '<p><a href="' + link + '" target="_blank">' + title + '</a><div style="clear:both;"></div></p>';
//デザインここまで(後で変更してください)

↓ちなみに、自分はこう変えました。↓

//デザインここから(後で変更してください)
html += '<div style="width:220;text-align:left;border-bottom:dotted 1px #666666;padding:5px;margin-bottom:3px;">';
html += '<a href="' + link + '" target="_blank"><img src="'+ thumbnail + '" style="float:left;width:40px;height:40px;"></a>';
html += '<p style="padding:0px;margin:0px;padding-left:4px;margin-left:4px;overflow:auto;"><a href="' + link + '" target="_blank">' + title + '</a>';
html += '<div style="clear:both;"></div></p></div>';
//デザインここまで(後で変更してください)

CSSなどで表示箇所を整形した結果…!

1 2