RSSフィードを活用する。

RSSフィードを使って外部ブログを表示する。

2015年12月4日追記

zrssfeedが再開？

面倒なのでワードプレスのプラグインをさがしていたら、

突如、表示が再開？

意味がわからないですが、とりあえず動いています。

—————————————-

2015年12月3日追記

zrssfeedが使用中止になりました。

公式ページへ行ったところ、

グーグルのなんたらかんたらと書いていましたが、

ようするに有料になったようです。

かなり使えるｊQuerだったのですが残念です。

また良いレスフィードがあったら紹介したいと思いますが、

忙しくて自分のサイトも更新できない有様なので期待しないでください。

以上、zrssfeedが使用中止なった件でした。

 

————————————————————————-

 

 

ブログからホームページへ。 あるいはホームページのリニューアルや乗換えなどで、 ホームページに外部ブログの表示を希望するクライアントが増えてきています。

もっとも多いのが、スタッフブログの表示などです。

 

 

  今まではブログへのリンクバナーが主流でしたが、 利便性やＳＥＯ対策に効果がるとして、 導入を希望する方が増えています。

 

  RSSフィードの詳しい説明は、 ブログが作りたい！＋FC2ブログの作り方＋　様の 「RSSとは？」 をご覧ください。

 

  上記ではＲＳＳフィードについて説明されており、 ホームページに貼り付ける方法は載っていません。 RSSリーダーを使って、ヤフーなどよく使うサイトや、 ブラウザのお気に入りに新着情報を自動で通知する方法が 簡単に説明されています。 ネットユーザーには便利な情報ですが、 これではホームページに貼り付けられません。

 

自分のホームページに外部ブログを表示させるには？

 

  ワードプレスのプラグインを使えば、 結構、簡単にできます。 「ワードプレス・ＲＳＳフィード・プラグイン」 で検索すれば、かなり見つかります。   ワードプレスを導入していれば、 プラグインもいいですが、 個人的にはプラグインはできるだけ最低限に抑えたいところです。

そこで‥

 

ｊQueryを使って導入する！

 

  RSSフィードを簡単に組み込むサイトがありますが、 無料バージョンは広告が入り、 有料バージョンで無広告にできるようですが、 WEBデザイナーなら自分で作りましょう！   検索すると色々なｊQuerが出てきてくれました。

そのなかでもループスライダーなどでお世話になりました。

black-flag.ne 様より

「jQueryでサイト内に簡単にRSSフィードを組み込めるプラグイン「zRSSFeed」

 

を参考にさせていただきました。 いつもありがとうございます。

上記サイトを見れば直ぐに導入できると思います。

 

RSSフィードの導入を実践する。

 

　ソースの配布先は海外の zazar　様で 配布ページ

http://www.zazar.net/developers/jquery/zrssfeed/

からファイルをダウンロードが可能です。   rss001

  写真の赤線を引いているところからダウンロードできます。

フォルダの中には沢山のファイルが入っています。

使うのは

jquery.zrssfeed.min.js

jquery.zrssfeed.js

の2つだけで、その中でも jquery.zrssfeed.min.jsだけで動作するようです。

jquery.zrssfeed.jsはオプション用みたいで、 設定を変えられるようです。

 

  画像挿入には対応していないようですが、 いじくれば、画像を引っ張ってくる事も可能かもしれません。

 

HTMLを部

 

<div id="feed"></div>

 

  まずは上の一行を記述するだけです。 このdivの中にRSSが生成される仕組みです。

 

スクリプト部

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.amagistudio.com/wp-content/themes/amagi_temp/Scripts/rss/jquery.zrssfeed.min.js"></script>
<script>
$(function(){     $('#feed').rssfeed('http://amagistudio.com/feed/rss/',{ limit: 5 }); });
</script>

  たったこれだけです。

 

※注意※　
ワードプレスの場合、設定の表示でRSS/ATOMの表示数を設定するところがあります。
その表示数が「limit: 5」の数より少ない場合、limit分の数が表示されないので注意してください。
もしワードプレスでRSSの数が表示されない場合は「設定の表示」を確認してください。
表示数を変更しても変らない場合は、「feed/rss/」を「feed/atom/」に変更してみてください。

 

  念のために「jquery」の本体を読み込むようにしていますが、 動作バージョンの「jquery」が導入されていれば記述する必要はありません。

 

$(‘#feed’).rssfeed(‘ここに表示したいRSSのURL‘,{ limit: 5　←数字が記事の表示数 表示したいRSSのURLについては、 僕の私の備忘録　様より

「【RSSフィードのURL】確認方法まとめ。Wordpress・ライブドア・FC2・Yahooブログ・その他。」

に詳しく紹介されています。

 

  上記のスクリプトが正常に作動すると、 このホーページの記事一覧が生成され、 出力されると思います。   rss002

  後は生成されたHTMLを解析して、 これにCSSでページにあったデザインにするだけです。

 

  解析すると日付と日時まで取り込んでしまうので、 今回は時間が出ないように設定しました。

スクリプトで言うとjquery.zrssfeed.min.jsファイル、 真ん中より上あたり

//修正前スマフォ対応
//,a=c.toLocaleDateString()
//修正後
a=c.getFullYear() + "年"+ (c.getMonth() + 1) + "月"+ c.getDate() + "日 "
//+" "+c.toLocaleTimeString()

  追記：5月7日スマフォ対応にいたしました。

toLocaleDateString()

を修正するこで、 スマフォでも日本語表記されます。 時間については

+" "+c.toLocaleTimeString()

 

をコメントアウトするだけです。

 

またスクリプト$(‘#feed‘)で、divタグのidを自由に変更でき、 名前を変えることで、 一つのページ内に複数のRSSを組み込むことが可能です。

決めたidから続くクラスを間違えなければ、 レイアウトの崩れはないと思います。

  上記のHTMLとスクリプトをコピペすれば 動作確認できると思いますが、 記載しているソース元は、 配布先のzazar　様より引用しています。

 

  生成されたHTMLを見てみると‥。

 

<div class="rssBody">
<ul>
<li class="rssRow odd">
<h4>
<a title="View this feed at 天城スタジオ" href="http://www.amagistudio.com/renewal/" target="_self">スマフォ対応リニューアル中</a>
</h4>
<div>2015年3月13日 </div>
<p>4月21日頃に行なわれる グーグルモバイルフ[…]</p>
</li>
<li class="rssRow even">
<h4>
<a title="View this feed at 天城スタジオ" href="http://www.amagistudio.com/memo20150213/" target="_self">フロートについてとか、レスポンシブで使うメモ。</a>
</h4>
<div>2015年2月12日 </div>
<p>フロートの解除方について   色々な方法がありますが、 clearfixを[…]</p>
</li>
<li class="rssRow odd">
<h4>
<a title="View this feed at 天城スタジオ" href="http://www.amagistudio.com/wp-load-phpcustomize/" target="_self">wp-load.phpを使ってワードプレスを部分使用する</a>
</h4>
<div>2014年12月19日 </div>
<p>ワードプレスを使って既存サイトをＣＭＳ化しよう！    […]</p>
</li>
<li class="rssRow even">
<h4>
<div>2014年12月5日 </div>
<p>アーカイブで特定のカテゴリーを表示する方法 ワードプレスでは、  […]</p>
</li>
<li class="rssRow odd">
<h4>
<a title="View this feed at 天城スタジオ" href="http://www.amagistudio.com/pointserviceannounce/" target="_self">WEBサイトの不具合修正サービス開始！！</a>
</h4>
<div>2014年10月3日 </div>
<p>ホームページにのポイント修正サービス開始しました。    […]</p>
</li>
</ul>
</div>
</div>

 

  上記の構造になって排出されます。

それぞれにclassがついているのが確認できます。 これをCSSで整えます。

 

CSS部

 

#feed {
	width: 500px;
	padding: 10px;
	background-color: #FEFDF1;
	border: 1px solid #903;
	margin-left: 20px;
	overflow: scroll;
}
#feed .rssHeader {
	font-size: 18pt;
	background-color: #FFF4F4;
}
#feed .rssBody ul {
	list-style-type: none;
}
#feed .rssBody ul .rssRow.odd,
#feed .rssBody ul .rssRow.even {
}
#feed .rssBody ul .rssRow.odd h4,
#feed .rssBody ul .rssRow.even h4 {
	margin-top: 0px;
	margin-bottom: 5px;
	font-size: 14pt;
	color: #CCC;
	background-color: #F4FFFC;
	background-image: none;
}
#feed .rssBody ul .rssRow.odd div,
#feed .rssBody ul .rssRow.even div{
	margin-top: 0px;
	font-size: 10pt;
	margin-bottom: 0px;
	text-align: right;
}
#feed .rssBody ul .rssRow.odd p,
#feed .rssBody ul .rssRow.even p {
	clear: both;
	margin-top: 0px;
	font-size: 11pt;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
}

 

  全ての記述が終えると、 下記のように天城スタジオの最新5件のRSSが表示されているかと思います。

 

 

RSSフィードをカスタマイズする。

  サイトによっては表示する範囲が決まっていたり、 表示したい項目が違うと思います。

 

  天城スタジオでも外部ブログと連携させ、 カスタマイズして表示させようと思います。

 

  必要な項目は 「ブログのタイトル」「記事のタイトル」「日付」だけです。

 

 

 

 

 

  必要な物は残しておいて、 不必要な物はディスプレイ：noneで対応すれば可能です。   私的にはサイドバーに貼り付ける程度だと思うので、 極簡単にしています。

加えて時間だけ先に消しているのは、 日付と同時に出力するようで、 CSSで対応できないので ｊsファイルを直接修正している感じです。

 

zip_bnr

  上記の結果のサンプルを用意しましたので、 自己責任でご活用ください。

 

5月7日追記：スマートフォンなど一部ブラウザ表示で、 日付が英表記になる不具合を修正しました。

 

  以上、「RSSフィードを使って外部ブログを表示する」でした。