(cache) 【はてなブログカスタマイズ】ライブドアじゃない相互RSS始めました！　導入方法やソースコードなど

f:id:uwasanoaitsu:20160428093027p:plain

最近、セブンイレブンのプレミアムバニラアイスばかり食べていて（食事制限があるのに）血液検査に引っかかってしまいました。

どうも、だいちゃん(∀)です。

皆さん、相互RSSって知っていますか？

２ちゃんねるまとめブログなどのヘッダ（トップ）の部分にある四角い窓に他のブログへのリンクがズラッと並んでいるものです。

この度、実験的に私のブログにも導入してみました。

モバイルからこのブログを読んでいる方は分からないかもしれませんので、この記事のトップ画像に自分の相互RSSを導入したものを載せています。

さて、２ちゃんねるまとめブログなどは何故、こぞってこういった相互RSSを導入しているのでしょうか？

相互RSSの利点

相互RSSを導入することによって、そのブログ一つを読みに来るだけで他のブログの情報も得ることが出来る、と思ってもらえてそのブログ自体の読者数を増やすことが出来ます。

そして、お互いに導入することで、自分のブログの読者さんに他のブログを紹介することが出来ます。すると、紹介してもらったブログも読者が増える（アクセス数が増える）ことになります。また、お互いに導入しているので、他のブログから自分のブログを紹介してもらえて、自分のブログのアクセス数の増加が見込める、ということです。

例えるなら、自分が飲食店を経営していたとします。そこで、

「他の店でも飲みたいんだけど、どこかいいお店知らない？」

と聞かれて、仲のいい（お勧め出来る良いお店）を紹介するのと似ていますね！

そうやって、お互い仲良くすることでwin-winの関係を築き、アクセス数をお互いに増やしましょう！　というのが相互RSSを導入するメリットです。

また、トップページからの相互リンクなどは今はグーグルからペナルティを食らう可能性が出てきましたが、今回紹介する相互RSSはそういった心配はございません。

では、今から相互RSSの導入方法やソースコード、参考にしたブログなどを紹介していきます。

相互RSS導入方法

参考にしたのはこのブログ！

moneyreport.hatenablog.com

このブログに掲載されているソースコードを少しいじって私のブログには導入しています。

ソースコード

【スクリプト】

<div class="rss">

<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
var getRssFeeds = function (_id, _urls, _maxLength) {
if(!_id || !_urls || (!(_urls instanceof Array))) return;
var entryNum = 1;//各RSSの読み込みエントリー数
var maxLength = (_maxLength)? _maxLength : 0 ;
var entriesArray = new Array();
var complete = 0;
var init = function () {
for(var i=0 ; i < _urls.length ; i++){
var feed = new google.feeds.Feed(_urls[i]);
feed.setNumEntries(entryNum);
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
entriesArray.push(entry);
var pdate = new Date(entry.publishedDate);
var arr = entriesArray[(entriesArray.length-1)];
arr.sortDate = pdate.getTime();
arr.siteTitle = result.feed.title;
arr.siteUrl = result.feed.link;
}
}
complete++;
if(_urls.length == complete) echo();
});
}
};
var echo = function () {
entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順ソート
var feedLength = (_maxLength)? _maxLength : entriesArray.length;
var container = document.getElementById(_id);
var html='<ul>';
for (var i = 0; i < feedLength; i++) {
var entry = entriesArray[i];
html += '<li>';
html += '<img src="http://favicon.st-hatena.com/?url=' +entry.siteUrl + '" />';
html += ' <a href="' + entry.link + '" title="' + entry.title + '" target="_blank" rel="nofollow">' + entry.title + ' <img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '"></a>';
}
html += '</ul>';
container.innerHTML += html;
};
google.setOnLoadCallback(init);
};
//表示するRSSフィード
getRssFeeds("feed_1", [
"この部分に追加したいブログのRSSフィードのURLを入れる",
"この部分に追加したいブログのRSSフィードのURLを入れる",
"この部分に追加したいブログのRSSフィードのURLを入れる"
]);
getRssFeeds("feed_2", [
"この部分に追加したいブログのRSSフィードのURLを入れる",
"この部分に追加したいブログのRSSフィードのURLを入れる"
]);
</script>
<div class="multiFeed">
<div id="feed_1"></div>
<div id="feed_2"></div>
</div>
</div>

【CSS】

/* ----- 相互RSS Start ----- */
.feedArea ul {
margin: 0;
padding: 0;
font-size: 90%;
line-height: 1.6;
list-style: none;
}
.feedArea ul li a img {
vertical-align: middle;
}
.multiFeed {
overflow: hidden;
}
#feed_1 {
float: left;
}
#feed_2 {
float: right;
}
#feed_1 {
background: #FFF;
width: 500px;
height: 250px;
padding: 0 10px 0 0;
border: 1px solid #BBB;
overflow-y: scroll;
font-size: 13px;
}
#feed_2 {
background: #FFF;
width: 500px;
height: 250px;
padding: 0 10px 0 0;
border: 1px solid #BBB;
overflow-y: scroll;
font-size: 13px;
}
#feed_1 ul,
#feed_2 ul {
padding: 5px;
}

.rss { width: 1025px;
margin-left: auto;
margin-right: auto;}
/* ----- 相互RSS End ----- */

こんな感じになります。

ソースコードの、

getRssFeeds("feed_2", [
"この部分に追加したいブログのRSSフィードのURLを入れる",
"この部分に追加したいブログのRSSフィードのURLを入れる"
]);

この部分を消せば窓を一つにすることが出来ます。

#feed_1 {
background: #FFF;
width: 500px;
height: 250px;
padding: 0 10px 0 0;
border: 1px solid #BBB;
overflow-y: scroll;
font-size: 13px;
}
#feed_2 {
background: #FFF;
width: 500px;
height: 250px;
padding: 0 10px 0 0;
border: 1px solid #BBB;
overflow-y: scroll;
font-size: 13px;
}