Feed2JS の使い方

Feed2JS というサービスを使うと、ATOM や RSS などのフィードの内容を JavaScript でブログ内に表示させることが出来ます。

Blogger のレイアウトテンプレートだとフィードウィジェットも標準機能として使えますが、ウィジェットが利用できないエリア(投稿内など)にフィードを表示したい場合には、この Feed2JS が便利です。

クラシックテンプレートの場合は、フィードウィジェットそのものが使えないので、ウィジェットの代わりにもこの Feed2JS が重宝すると思います。

このページでは、Feed2JS の導入方法についてまとめておきます。


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 の、フィードの内容を表示させたい位置に貼り付けてください。


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


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