ヤフーショップにアメブロのRSSを表示する方法
ヤフーショッピングにアメブロのRSSフィードを表示したい場合がありますよね。
そんな時は、トリプルにアメブロのフィードを読み込むhtmlをあげて、
フッターやサイドバーなどにiframeで読み込めばOKです！！
トリプルにあげるhtmlは以下のように作ってもらえばOKです！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ameblo</title>
<style>
ul#feed {
list-style-type: none;
margin: 0;
padding: 0;
width: 980px;
}
ul#feed li {
margin-bottom: 10px;
line-height: 120%;
font-size: 16px;
border-bottom: 1px dotted #ccc;
padding-bottom: 10px;
}
ul#feed li a {
text-decoration: none;
color: #2175E0;
}
span.info_data {
/* display: block; */
line-height: 190%;
font-weight: bold;
padding-right: 20px;
}
ul#feed li a:hover {
text-decoration: underline;
}
#amebloTitle{
background:url(http://shopping.geocities.jp/miyashima/img/icon_ameblo.png) no-repeat left;
padding-left:20px;
font-size:20px;
padding-bottom:10px;
margin-bottom:20px;
border-bottom:1px solid #ccc;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://rssblog.ameba.jp/miyashima01/rss.html");
// 3つ分記事を表示させたいのだが削除するPR記事が一つ含まれるので1つ増やして4にする
feed.setNumEntries(4);//←これを4にすると表示記事は3。
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
// 日付取得
var pdate = new Date(entry.publishedDate);
var strdate = (pdate.getYear() + 1900 ) + '/' + ('0' + (pdate.getMonth() + 1)).slice(-2) + '/' + ('0' + pdate.getDate()).slice(-2) + ' ';
// ここでPR記事全部表示させないif文
if (entry.title.match(/.*PR:.*/mi) == null) {
var element = document.createElement('li');
element.setAttribute("class", "feed_content");
// 以下でタイトルのリンク、タイトル名、記事本文、日付を表示
element.innerHTML += '<a href="' + entry.link + '" target="_blank"><span class="info_data">' + strdate + '</span>' + entry.title + '</a>';
}
container.appendChild(element);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
<div id="amebloTitle">最新ブログ記事一覧</div>
<ul id="feed"></ul>
</body>
</html>
styleはお好きなように変更していただいても構いません。
また、以下の部分のmiyashima01をご自分のアメブロアカウントに変更してください。
var feed = new google.feeds.Feed("http://rssblog.ameba.jp/miyashima01/rss.html");
ではでは！！
関連記事はこちら！
スポンサーリンク
ポチッ☆とクリックお願いします！
↓ ↓ ↓
