サイト内にRSSフィードを読み込む方法はたくさんありますが、
jQueryを使って簡単に組み込めるプラグインがないか探したところ、
必要最低限の要素で組み込むことが可能となる理想のプラグイン
「zRSSFeed」に辿りついたのでここでも紹介してみます。
zRSSFeed – RSS Feeds Reader for jQuery
zRSSFeed – RSS Feeds Reader for jQuery
上記ページからダウンロードできるプラグインファイルと併せて
実行させる為のIDをつけた＜div＞などを用意し、
スクリプトを実行するだけ。
実装方法のサンプルについて。
HTMLは下記の様に任意のID名がついたブロック要素を配置します。
※今回のサンプルではID名を「feed」にします。
◆HTML <div id="feed"></div>
そして下記の様にID「feed」に対して、スクリプトを実行させます。
※今回のサンプルで呼び出すRSSフィードはこのブログのものにします。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.zrssfeed.js"></script>
<script type="text/javascript">
$(function(){
$('#feed').rssfeed('http://black-flag.net/feed',{
limit: 5
});
});
</script>
「.rssfeed」の後に読み込むRSSフィードのURLを記述して、
「limit」のオプションで表示する件数を設定します。
これを実際に実行させたサンプルは以下の様な感じになります。
（生成された後のテキスト装飾は別途CSSでの指定が必要です。）
表示オプションは件数の他にも
いろいろ用意されているのでプラグインファイル配布ページより
ご確認ください。
ID名が違うブロック要素を用意すれば
1ページ内に複数のRSSフィードを表示することも可能です。
手軽にRSSフィードを組み込めるので
この先重宝しそうです。
サイト内にRSSフィードの表示が必要になった際に是非。。。
いつもお世話になってます！
RSSの便利さを知り、さっそく会社のブログを読み込もうと
設定してみたのですが・・・
Feed could not be loaded.
と出ます！
なんでですかね！？
ちなみにテストとしてblack-flagさんのhttp://black-flag.net/feed
を読み込んだときはきちんと表示されました！
勝手に使って申し訳ないです。
ブログはアメーバで行っています。
何か考えられる問題点はありますかね？
よろしくお願いします！
こんにちは。
コメントありがとうございます！
以前、私もこのjQueryプラグインを使ってアメブロのＲＳＳを表示しましたが
実装できましたよ。（今でも動いています）
アメブロの場合、RSS FEEDは
———————————————————————-
http://feedblog.ameba.jp/rss/ameblo/○○○○○
———————————————————————-
となると思います。（「○○○○○」のところがブログＩＤ）
このjQueryプラグインで実装する際には
———————————————————————-
$(‘#○○○’).rssfeed(‘http://feedblog.ameba.jp/rss/ameblo/○○○○○’,{limit: 5});
———————————————————————-
このような書き方になります。
実際にアメブロ自体のブログ機能を使ったことなはいのですが
RSS FEEDを吐き出す設定がちゃんとされているか、についても確認してみてください！
よろしくお願いします！
ありがとうございます！
見事組み込むことができました！！
自動で更新って本当に便利です！
勉強のため只今Google AJAX Feed APIでも
実験中です！笑
またお世話になります！！
無事に組み込むことが出来たようで安心しました！
RSSの組み込み方法も、やり方は様々なので
自分が使いやすいものをいろいろ探してみるのもいいかもしれませんね。
また何かありましたらご連絡くださいませ！
RSSなどのxmlファイルを静的なHTMLに表示させる方法あれこれ ｜ くろひつじのメモ帳 | 2012.01.25 1:47
[...] 自分で書くのが面倒！よくわからない！場合はプラグインで。 これ系のプラグインは色々有りますが、色々試した中では「zRssfeed」がカスタマイズしやすくて便利でした。 プラグインならzRssfeedがオススメ！ 参考）jQueryでサイト内に簡単にRSSフィードを組み込めるプラグイン「zRSSFeed」 [...]
はじめましてこんにちは。zRSSFeedについて調べていたところこちらのサイトを見つけました。
画像の引きこみ方法が本サイトのサンプル項目にはあるのですが。
ダウンロードファイル内にはありません。
設定方法などはご存知でしょうか？
突然の質問ですみません！
＞NZさん
コメントありがとうございます。
このプラグインを再度調べてみましたが
プラグイン自体に画像表示を制御する指定は特に無いように思えます。
RSSフィード自体に画像を読み込んでいるかどうかによって
表示の違いが出てきているのか、とも思いますがはっきり分からない部分でもあります。
申し訳ありませんが、
また何か詳細が分かったらここにご報告させていただきます。。
よろしくお願いします。
お返事ありがとうございました！
もう少し自分で研究してみます！
おお、これは素晴らしいですね。
私の期待していた情報の理想に近いです。
これで複数のRSSフィードを読み込んで日時順に
ソートしたいと思っています。
大抵の言語は分かるのですが、javascript だけはさっぱりです。
でもここまで出来ていれば、feed を配列に入れてソートすれば
私でもいけるかもしれません。
貴重な情報をありがとうございます。
＞horaさん
コメントありがとうございます！
このRSS用プラグインの情報がお役に立ったようで
こちらとしても嬉しく思っております。
こういう動作を自ら作成しようとするとかなり大変ですが
この様なプラグインをうまく使ってカスタマイズすることで
理想の組み込みに近づけることも可能になるかと思います。
いろいろお試しください！
RSSに画像を埋め込む方法 | アトリエ・ミラクル3号館 | 2012.06.20 23:03
[...] http://black-flag.net/jquery/20110228-2697.html [...]
(メモ)RSSを取得してサイトに表示させる方法 | clownworks blog | 2012.11.26 19:21
[...] 利そうです。 jQueryでサイト内に簡単にRSSフィードを組み込めるプラグイン「zRSSFeed」 [...]
お世話になります。
今回、組み込みしてみて、とても感動しております。
とっても便利で重宝できそうです。
一点だけお尋ねなのですが、一度表示させた後、記事を削除しても、zRssfeed上では残ってるのでしょうか？
お忙しい中恐れ入りますが お返事いただけましたら幸いです。
＞Betimeさん
コメントありがとうございます。
このRSSプラグインがお役に立ったようで嬉しく思っております。
ご質問いただいた件についてですが
このプラグインでは読み込まれたRSSフィードを表示する形になるので
削除記事がRSSフィード内に残っていれば表示され、
RSSフィード内から削除されていれば表示されないのではないかと思います。
（プラグイン側というよりRSSフィード側の問題）
ご確認ください。
よろしくお願い致します。
RSSフィードを活用する。 | 天城スタジオ | 2014.05.03 1:49
[...] ライダーなどでお世話になりました。 black-flag.ne 様より 「jQueryでサイト内に簡単にRSSフィードを組み込めるプラグイン「zRSSFeed」」 を参考にさせていただきました。 いつもありがとうご [...]
いつもお世話になっております。
RSSフィードをHPに表示するのに参考にさせていただきました。
スマフォで見ると、日付が英表記になる不具合が判明したので、
修正したいと思います。
ホントにいつもありがとうございます。