ヤフーショップにアメブロのRSSを表示する方法

ヤフーショップにアメブロのRSSを表示する方法

SPONSORED LINK

ヤフーショッピングにアメブロの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) + '&nbsp;';
// ここで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");

ではでは!!

ポチッ☆とクリックお願いします!
↓ ↓ ↓

  • にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

コメントは受け付けていません。

サブコンテンツ

TOP