Blogger のレイアウトテンプレートだとフィードウィジェットも標準機能として使えますが、ウィジェットが利用できないエリア(投稿内など)にフィードを表示したい場合には、この Feed2JS が便利です。
クラシックテンプレートの場合は、フィードウィジェットそのものが使えないので、ウィジェットの代わりにもこの Feed2JS が重宝すると思います。
このページでは、Feed2JS の導入方法についてまとめておきます。
1.設定方法
Feed2JS サイトを開き、ページ上部の Build というタブをクリックして、コード作成ページに移動します。
URL
表示させたい RSSフィードの URL を記入します。Atom も可。
Show channel?チャンネル情報(ブログ等のタイトルと説明文)の表示切替。
Number of items to displayyes
…タイトルと説明文を両方表示、title
…タイトルのみ表示、no
…どちらも表示しない。記事を何件表示させるか。
Show/Hide item descriptions? How much?0
なら RSS に記述されている分全てを表示。各記事の内容を何文字表示するか。
Use HTML in item display?0
…内容を表示しない、1
…内容を全て表示、2
以上 …その文字数分表示、-1
…内容を表示せずタイトルにリンクもつけない。内容中の HTML の処理の仕方。
Show item posting date?yes
… HTML を有効にする、no
…テキストのみ表示する、paragraphs
…HTML は無効だが改行は <br> に変換する。日付表示の有無。
Time Zone Offsetyes
…日付を表示する、no
…日付を表示しない。タイムゾーンを設定。日本なら
Target links in the new window?+9
を入力。RSS に記述されている時刻を使う場合は feed
と記入。リンク先ページを表示するウィンドウを設定。
UTF-8 Character Encodingn
…そのまま同じウィンドウに、y
…新しいウィンドウを開いて表示、popup
… JavaScript を使ったポップアップウィンドウに表示。任意の文字列
…その名前のついたウィンドウに表示。データを 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」タブからファイルをダウンロードし、サーバーにアップロードください。本家サイトを利用していて時々表示が止まってしまうという場合には、導入を考えてもいいかも知れませんね。