アメブロの新着記事をHPに掲載したい(広告非表示で)

一番いいのは、自分のサーバーにブログも組み込んでしまうことだけど、大人の事情でそうもいかない場合など

使用するのはコレ↓
RSS Feeds Reader Plugin for jQuery

ダウンロードして、HPの<head>に組み込みます

<script src=”js/jquery.zrssfeed.js” type=”text/javascript”></script>

とりあえず、日付とタイトルを取得

<script type=”text/javascript”>
$(document).ready(function () {

$(‘#ID名’).rssfeed(‘自分のRSS のURL’, { limit:6,header: false,titletag: ‘span’,date:’true’,content: false? });
});
</script>

で、

<body>の表示したい部分に、

<div id=”ID名”></div>

あとは、cssで好きなように形成(↓こんな感じ?)

#ID名{
clear:both;
width:575px;
overflow:hidden;
}
.rssBody ul li{
margin:5px 35px 10px 45px;
border-bottom: dotted 1px #ccc;
padding-bottom:10px;
padding-top:5px;
list-style:none;
overflow:hidden;
}
.rssRow div {
float:left;
margin-right:15px;
}

★この状態だと、アメブロの広告も取得しちゃいます★

で、本体を気持ち改造

予断ですが、個人的に、日付の表示を変更したかったので、

// Format published date の日付表示部分を変更

※2桁表示で、○○○○/○○/○○ としました

var pubDate = entryDate.toLocaleDateString() + ‘ ‘ + entryDate.toLocaleTimeString();

var Mon2 = entryDate.getMonth() + 1;
var Day2 = entryDate.getDate();

if(Mon2<10){ Mon2 = ‘0’+Mon2; }
if(Day2<10){ Day2 = ‘0’+Day2; }

var pubDate = entryDate.getFullYear() + ‘/’ +Mon2+ ‘/’ +Day2;

に変更

本題@広告を表示させないために、// Add feed row のすぐ下に↓を挿入

if(entry.title.search(“PR:”) != 0){

// Alternate row classes のすぐ上に↓を挿入

}

広告表示についてる「PR:」がタイトルの一番最初にない時だけ、日付とタイトルを表示するように加筆しました

広告分、取得したデータのループが一回とんじゃうので、記事を5個取得したかったら、最初のjQueryの設定部分でlimit:6を指定してみました

広告が不確定な数字で出現するなら、ループの数字の取得方法を変更しなくちゃですねぇ