マネー報道 MoneyReport

仮想通貨に特化した自作EAを公開中！仮想通貨FXでMT4&MT5を活用し資産運用中！

カスタム相互RSSのご紹介♪SEO的に悪化しない相互RSS導入手順。コードも公開

アクセスアップ ブログ運営 はてなブログカスタマイズ
あとで読む スポンサーリンク

livedoor相互RSS以外の相互RSSを導入してみた！

アクセスアップのために、はてなブログでは相互RSSを導入する事を以前オススメさせて頂きました。
しかし、この時に紹介したlivedoor相互RSSだとスパムリンクと認定される恐れがある（まだ可能性の段階です）、との事を下の記事で紹介されていました。

SEOに影響の出ない相互RSSを設置する方法
livedoor相互RSSだとSEO的に悪影響がある可能性がある！こちらで紹介されている相互RSSの方が、対Google的には良いようですね。

Google検索への悪影響が懸念されるのを払拭する対策を打つ「rel=”nofollow”」を追加する方法を紹介してくれています。

ですので、こちらの新しい相互RSSを導入してみようと着手したのが3日前。
この相互RSS、設置はlivedoor相互RSSと比べると非常に大変です。
livedoor相互RSSならば、専用サイトに行ってRSSフィードさえ貼れば後は勝手に連動してくれますが、この相互RSS（・・・なんか名前が欲しいですね、私が作ったんじゃないですが便宜的に「カスタム相互RSS」と呼ばせて頂きます。以下本日紹介する相互RSSはカスタム相互RSSと表記します）はコードを自分でカスタマイズしつつ、RSSフィードも自分でコード上に直接記述する必要があり、一カ所でも記述を間違うと

「表示されなくなってる！なんで？」

となります。

当ブログのタイトル下部に表示されているのがカスタム相互RSSです。
こちらを使うことで、Googleからスパム認定されずに済み、今後もGoogleからの検索で訪れてくれる人を減らさずに済みます。

http://178.hatenablog.jp/entry/2013/12/01/120239
Google流入を減らさずに済む、相互RSS導入方法解説。使わせて頂きます。


2016/5/4現在元ネタとして使わせてもらった「http://178.hatenablog.jp/」のブログは閉鎖されているようです。

ちなみにカスタム相互RSSは、こちらのブログが大元で紹介してくれている所です。
私のブログでは左右に2つ並べたパターンを示しましたが、こちらのブログでは色んな表示パターン例を示してくれていますので、お気に入りのパターンを使わせていただきましょう！
（ただしこのブログのコードをそのまま貼ってもうまく動作させられませんでした。参考にするのはCSSの部分ですかね。）

この２記事を組み合わせて、私のブログにきれいに表示させるのに、ここ3日間くらい費やしてしまいました・・・。
大変でした。

カスタム相互RSS貼るだけ簡単ソースコード

うまくいかなくて困っている方向けに、私のブログで使ったソースコードをご紹介します！
皆さんも3日も掛かるなら取り付けたくないですもんね(^^;

ブログヘッダー下に左右に２つ表示させるパターンになります。
サンプルはこんな感じ
　　　↓↓↓
f:id:MoneyReport:20131213123843j:plain

ヘッダ　タイトル下

<!-- 相互RSS Start-->
<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="https://favicon.st-hatena.com/?url=' +entry.siteUrl + '" />';
            html += ' <a href="' + entry.link + '" title="' + entry.title + '" target="_blank"  rel="nofollow">' + entry.title + ' <img src="https://b.hatena.ne.jp/entry/image/' + entry.link + '"></a>';
        }
        html += '</ul>';
        container.innerHTML += html;
    };
    google.setOnLoadCallback(init);
};
//表示するRSSフィード
getRssFeeds("feed_1", [
	"http://earningmoney.hatenablog.com/feed",
	"https://moneyreport.hatenablog.com/feed",
	"http://dshocker.hatenablog.com/feed"
]);
getRssFeeds("feed_2", [
	"http://mizuka123.net/feed",
	"https://moneyreport.hatenablog.com/feed"
]);
</script>
<div class="multiFeed">
<div id="feed_1"></div>
<div id="feed_2"></div>
</div>
<!-- 相互RSS End-->

上のコードはヘッダ下に配置します。
「デザイン」→「カスタマイズ」→「ヘッダ」を表示し、下の方の「ＨＴＭＬを記述できます」の所をクリックし、大きくなった所に、上記コードを貼り付けます。

デザイン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,
#feed_2 {
	background: #FFF;
	width: 478px;
	height: 120px;
	padding: 0 10px 0 0;
	border: 1px solid #BBB;
	overflow-y: scroll;
	font-size: 13px;
}
#feed_1 ul,
#feed_2 ul {
	padding: 5px;
}
/* ----- 相互RSS End ----- */

スタイルシートは
「デザイン」→「カスタマイズ」→「デザインCSS」を選択し、出てきたテキストボックスに、上のCSSのコードを貼り付けます。

ブログ毎の調整部分

上記の「getRssFeeds("feed_1", [」と「getRssFeeds("feed_2", [」のRSSフィードを並べる所だけ自分のブログの相互RSSやっている相手のフィードを並べて書きます。

具体的には

//表示するRSSフィード　
getRssFeeds("feed_1", [
	"ここにRSSのURLを書く",
	"ここにRSSのURLを書く"
]);
getRssFeeds("feed_2", [
	"ここにRSSのURLを書く",
	"ここにRSSのURLを書く"
]);

と、なります。
今後相互RSS希望の方が増えたら、ここにRSSフィードを１つずつ追加していく感じです。
間に入れるものは後ろに「,（半角カンマ）」が必要で、最後の1行は後ろにカンマを付けませんので注意が必要です。

あと、表示するエントリー数も調整できます。
下記の部分の「1」と書かれている数字を、自分の好きな数字に書き換える事で反映できます。

    var entryNum = 1;//各RSSの読み込みエントリー数

ソースコードをはてなブログにきれいに貼り付けるには？

ブログにソースコードを貼り付けたらグチャグチャになって困ったのですが、下記ブログの記事を参考に書いたらきれいに表示できました！

はてなブログにソースコードを貼り付ける方法 - くりにっき
はてなブログでソースコードをきれいに表示する方法。普通に貼り付けたらひどい事になりました。ありがとうございます！助かりました！

まとめ

・相互RSSも「rel=”nofollow”」を入れないとSEO的に悪影響がある（かも）

・カスタム相互RSSの導入は結構大変

・カスタム相互RSS導入例として当ブログのコードを表示

・ソースコードをきれいに表示させるのにはテクニックが必要

興味のある方は、levedoor相互RSSからカスタム相互RSSに乗り換えてみるのも良いかもしれません。
Googleからの流入検索数がこれでアップしてくれると良いのですが。

追記

そうそう当ブログは随時相互RSS募集中です。はてなブログの方なら大歓迎♪
サイト名
マネー報道 MoneyReport

サイトフィード
https://moneyreport.hatenablog.com/feed

コメント、Twitter等でご連絡下さい。

追記　2014/3/23

すみませんが、相互RSSして頂ける方が増えてきて表示がきつくなってきてしまったので、今後は「はてなブログ」の方しか受け付けない事にさせて頂きます。
まとめサイトや他サービスのブログの方との相互RSSは今後出来ませんので、よろしくお願い致します。
はてなブログの方はこれまでどおり、受け付けていますのでご連絡下さい。