クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> | > Feed2JS の使い方

Feed2JS の使い方

Posted at: 2006-03-27 Label: , Off

以前、Feed2JS を活用するという記事を書きました。JavaScript を利用した、RSS がブログやサイトに貼り付けられるこの便利なツールについて、導入方法を解説しているサイトがちょっと見当たらなかったので、ここに書いておくことにします。

1.設定方法

Feed2JS サイトを開き、ページ上部の Build というタブをクリックして、コード作成ページに移動します。

URL
表示させたい RSSフィードの URL を記入します。Atom も可。
Show channel?
チャンネル情報(ブログ等のタイトルと説明文)の表示切替。yes …タイトルと説明文を両方表示、title …タイトルのみ表示、no …どちらも表示しない。
Number of items to display
記事を何件表示させるか。0 なら RSS に記述されている分全てを表示。
Show/Hide item descriptions? How much?
各記事の内容を何文字表示するか。0 …内容を表示しない、1 …内容を全て表示、2 以上 …その文字数分表示、-1 …内容を表示せずタイトルにリンクもつけない。
Use HTML in item display?
内容中の HTML の処理の仕方。yes … HTML を有効にする、no …テキストのみ表示する、paragraphs …HTML は無効だが改行は <br> に変換する。
Show item posting date?
日付表示の有無。yes …日付を表示する、no …日付を表示しない。
Time Zone Offset
タイムゾーンを設定。日本なら +9 を入力。RSS に記述されている時刻を使う場合は feed と記入。
Target links in the new window?
リンク先ページを表示するウィンドウを設定。n …そのまま同じウィンドウに、y …新しいウィンドウを開いて表示、popup … JavaScript を使ったポップアップウィンドウに表示。任意の文字列…その名前のついたウィンドウに表示。
UTF-8 Character Encoding
データを UTF-8 でエンコードするかどうか。日本語の場合は必ずチェック
Custom CSS Class
スタイルシートを適用するためのクラス名設定。表示される div 要素が rss-box-XXXX というクラスになる。指定できるのは XXXX の部分。

上記の項目を確認して「Preview Feed」ボタンをクリックすると、RSS が実際にどのように表示されるかを確認することが出来ます。色々設定を変えてみて、お好みの表示設定を見つけてください。

「Generate JavaScript」ボタンを押すとコードが表示されるので、それをブログのテンプレートやサイトの HTML の、RSS の内容を表示させたい位置に貼り付けてください。


2.見栄えの変更

Feed2JS で作成するパーツには、スタイルシートを使って見栄えを細かく設定することが可能です。
スタイルを設定するには、ページ上部の Style タブから、スタイル設定ページに移動します。「Style Selector」のセレクトボックスを使って、スタイルのセットを確認することができます。表示されるコードを <style type="text/css"></style> とではさんで、RSS の内容を表示させたいページの HTML の head 要素内に貼り付けてください。
自分でスタイルシートを書いて、一からスタイルを設定したいという場合には、「CSS Classes」欄のクラス名を参考にしてスタイルを設定します。
この方法だと、一つのページにいくつもの RSS を貼り付けて、それぞれ別々のスタイルを適用するということも可能です。その場合には1で「Custom CSS Class」を設定し、クラス名に対応するスタイルシートを書くようにして下さい。


おまけ.自分のサーバーに Feed2JS

以上で、Feed2JS を使ったブログやサイトへの RSS 表示が可能になるんですが、PHP が動作するサーバーであれば、この Feed2JS 自体を自分のサーバーに設置することも可能です。ページ上部の Download からファイルをダウンロードし、サーバーにアップロードください。本家サイトを利用していて時々表示が止まってしまうという場合には、導入を考えてもいいかも知れませんね。


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.