ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

JQueryプラグインでRSSフィードを表示する「zRSSFeed」

December 27 2013

元々静的サイトを構築しており、その後にWordpressでブログを構築、
というサイトはけっこうあると思うのですけども
全部をWordpressでCMS化というではなくて、
ブログのRSSフィードを新着情報として静的サイトのトップに表示したい、という依頼は
とてもよくある話だったりします。
もちろんこれが外部無料ブログという場合もよくある話。

もし静的サイトの方にJQueryをリンクしてあるならば
プラグインであるこのzRSSFeedを使えば簡単にそれを実現できます。

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

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

まずはダウンロードして解凍。
その後にhead部分にjQueryのパスとこのスクリプトのパスを追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>

この場合のJQueryのパスはGoogleライブラリAPIへのパスとなっています。
昔は「えー、外部サイトにリンクなんてもし何かあったらどうすんのよ」と
思ってましたけども、よく考えて・・いや考えなくても
自分の借りてるサーバとGoogleがどっちが強靱なのかは一目瞭然って事で
最近はGoogleセンセイのサービスを存分に使ってます(笑)

あとはRSSフィードを表示させたい部分のDivタグにIDを設定

<div id="test"></div>

そして以下をHTMLに追加します。

<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://hanamoge.com/rss/', {
limit: 5,
header:false
});
});
</script>

RSSフィードのURL、そして先ほど設定したIDを自分の環境に置き換えます。
limitとheaderはこのプラグインに設定されているオプションで
この場合は5件のRSSフィードを表示させ、ブログ名とリンクを表示させない設定です。
さまざまなオプション、そして初期設定は先ほどのダウンロードページに
全部掲載されてますので参考までに

あとは表示されたフィード部分をCSSで調整すればOKです。
アイキャッチなどに設定されたRSSに含まれる画像を表示させる方法は
いま探ってますので、解決すればこのエントリーに追加予定。

 

| Posted in Javascript | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jan 2017 February 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28