Thingamablogによるサイト構築とテンプレート配布TOP | jkl-parsexml.jsによるRSSの表示 »
2008年01月23日ajaxによるRSS表示方法
スポーンサードリンク同一ドメイン内のRSSを表示する方法です。
サイトの更新状況の知らせに有効です。
[ajax] JavaScript版 RSSリーダー設置手順をthingamablog用にカスタムしたものです。
弱点
外部のRSSは取り込めません。
参考サイトを参照してください。
http://www.kawa.net/works/ajax/rss/rss-box.html
手順
jkl-hina.js、jkl-parsexml.js
の2つのファイルをダウンロードしサイト内のディレクトリにアップロードしてください。
2.<head>～</head>内に外部javascriptのアドレスを挿入します。
表示したいテンプレート内全てに書き換えです。
重要
※jkl-hina.js、jkl-parsexml.jsはアップロードしたアドレスに合わせてください。
<script type="text/javascript" src="※アップロードしたアドレスに合わせます/jkl-hina.js" charset="<$Charset$>"></script>
<script type="text/javascript" src="※アップロードしたアドレスに合わせます/jkl-parsexml.js"></script>
<script><!--
window.onload = function () {
var url = "<$RssLink$>";
var http = new JKL.ParseXML( url );
var func = function ( data ) {
var hina = new JKL.Hina( "rssbox" );
var dest = hina.expand( data, "rssbox" );
dest.style.display = "";
};
http.async( func );
http.parse();
}
// --></script>
3.以下をテンプレートのbody内の表示したいところに書き換えてアップします。
エントリー記事内でも可能です。
thingamablog用サイドバー貼り付けタイプにカスタムしました。
↓↓↓↓↓↓↓↓↓
<!--rss-->
<div id="rssbox" style="display: none;">
<div class="sidetitle">RSS</div>
<div class="side">
<ul>
<li title="@foreach item1 [/rss/channel/item]">
<a _href="[/item1/link]">[/item1/title]</a>
</li>
</ul>
</div>
</div>
<!--rss-->
動的に表示されます。
デザインは変更可能です。
トップページ等blogbody内用
↓↓↓↓↓↓↓↓↓
<div class="blogbody">
<h2 class="title">RSS</h2>
<!--rss-->
<div id="rssbox" style="display: none;">
<ul>
<li title="@foreach item1 [/rss/channel/item]">
<a _href="[/item1/link]">[/item1/title]</a></li>
</ul>
</div>
<!--rss-->
</div>
スポーンサードリンク