wordpressとか、ライブドアブログでよくある、
最新記事などを画像付きで表示させるブログパーツ
seesaaブログfc2ブログでも似たように表示させようかと思って、
いろいろやってみた。

うん。自分用メモ


まずは、 既存のブログパーツは画像を表示することができなので、
Google Feed APIを使って表示します。

デフォルトのコードや説明は下記となります。

Google Feed API





 

 今回はindigonoteさんのコードを利用します。
 indigonote


本当に助かりました。


こちらのコードは、複数フィード別々の場所に配置ができるので便利です。



あれです。最新記事amazonアソシエイトRSSを配信したりとか便利なんです。
 amazonアソシエイトrss使って自動で表示させるのは、あとで書きます。

むしろ、このGoogle Feed APIの配置させできてしまえば簡単なので。






今回のコード

indigonoteさんのコードだと、画像付きじゃないので、画像付きにソースコードを書き換え。


amazonアソシエイト画像seesaa画像など、
画像のURLが「.jpg」で終わらない場合でも読み込み可能に書き換え。


gifpng画像も読み込めるように書き換え。


・画像がない記事の場合は、別画像を配置するように書き換え。






自分用メモなので動かなくても泣かないと約束できる方はご利用くださいw
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
var getRssFeed = function (_id, _urls, _length) {
    if(!_id || !_urls || (!(_urls instanceof Array)))    return;
    //変数
    var entriesArray = new Array();
    var complete = 0;
    //読み込み
    var init = function () { for (var e = 0; e < _urls.length; e++) getFeed(_urls[e], e)};
    
    function getFeed(_url, _num) {
        var feed = new google.feeds.Feed(_url);
        if(_length)    feed.setNumEntries(_length);
        feed.load(function(result) {
            if (!result.error) {
                html = '<dl class="feedbox">';
                for (var i = 0; i < result.feed.entries.length; i++) {
                    var entry = result.feed.entries[i];
                    var gazo = ""
                    var gazo = entry.content.match(/(src="http:){1}[\S_-]+\"/);
                    //画像がなかった場合に読み込む画像
                    var photo = ("<img src='ここに画像がない場合の画像のURLを書き込む' />");
                    if(gazo != null){
                    html += '<dt class="feedboxtext"><a href="' + entry.link + '">' + entry.title + '</a></dt>';
                    html += '<dd class="feedboximg"><a href="' + entry.link + '"><img ' + gazo[0] + ' /></a></dd>';
                    }else{
                    html += '<dt class="feedboxtext"><a href="' + entry.link + '">' + entry.title + '</a></dt>';
                    html += '<dd class="feedboximg"><a href="' + entry.link + '">' + photo + '</a></dd>';
                    }
                }
                
                html += '</dl>';
                entriesArray[_num] = html;
                complete++;
                if(complete == _urls.length){
                    echo();
                }
            }
        });
    };
    //出力
    var echo = function () {
        var container = document.getElementById(_id);
        for (var e = 0; e < _urls.length; e++)     container.innerHTML += entriesArray[e];
    };
    
    google.setOnLoadCallback(init);
};

var feed1 = new getRssFeed("feed1", ['ここにRSSのURLを設置。→は表示件数'], 10);
</script>

配置をしたい場所に下記のコードを追加。
<div id="feed1"></div>





ついでに、他の場所に新しいrss配置したいのだったら、</script>の上に下記を追加。
var feed2 = new getRssFeed("feed2", ['ここに新しいRSSのURLを設置。→は表示件数'], 10);

配置したい場所に下記のコードを追加。
<div id="feed2"></div>


というか、見て分かる通り、feed2feed3と増やせます。



ついでに、cssも置いておきます。

.feedbox{
	width:170px;
}

.feedboxtext {
	width: 160px;
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	font-size:0.7em;
	border-top-left-radius: 6px; 
	border-top-right-radius: 6px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px; 
	padding:5px;
	line-height:1.2;
	-webkit-box-shadow: 0px 0px 3px #ccc;
	-moz-box-shadow: 0px 0px 3px #ccc;
	box-shadow: 0px 0px 3px #ccc;
	border-top:1px solid #fff;
	border-left:1px solid #fff;
	border-right:1px solid #fff;

}

.feedboxtext a{
	color: #fff;
}
.feedboximg{
	margin:0 0 10px 0;
	display: inline-block;
	position: relative;
}

.feedboximg a{
	width:170px;
	max-height:140px;
	overflow:hidden;
	display: block;
	color: #fff;
	border-bottom-left-radius: 6px; 
	border-bottom-right-radius: 6px; 
	-webkit-border-bottom-left-radius: 6px; 
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	-moz-border-radius-bottomright: 6px;
	-webkit-box-shadow: 0px 0px 3px #ccc;
	-moz-box-shadow: 0px 0px 3px #ccc;
	box-shadow: 0px 0px 3px #ccc;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
}
.feedboximg a img{
	width:170px;
}



上記で、どうしてもできない。

という方には、複眼RSSをお勧めいたします。


複眼RSS アクセスを増やすブログパーツ


ただ、時々、広告の画像が挿入されるので、
それが嫌な方はGoogle Feed APIがおすすめですよ。






    このエントリーをはてなブックマークに追加 mixiチェック
Related Posts Plugin for WordPress, Blogger...