RSSフィードを自前で設置する方法
「にほんブログ村」や「人気ブログランキング」ようなブログ掲載サイトに登録したいと思った時、新着記事情報を転送するためにRSSを配信をする必要がありました。
私が使っているCMSの管理機能にはRSSフィード設置機能が無いため、自前でRSSフィードの設定を行う必要がありました。その実施手順を備忘録としてまとめています。
実装した機能
本サイトのブログ一覧ページに外部サイトから直接アクセスがあった場合に、RSSフィードボタンを表示する機能を作成しました。
ボタンをクリックすると、RSSフィードを取得できます。
RSSフィードの作成
以降では、RSSフィード(XMLファイル)を作成する手順を説明します。
RSSフィード作成には「FetchRSS」というサービスを利用しました。
無料で利用可能ですが、無料プランでは下記のような制約があります。
- 一度に5記事までしか新着記事を取得できない
- 24時間に1回のみフィードが更新される
私の記事の更新頻度では問題ないため採用しました。
ブログ記事一覧を表示しているURLを入力し、「Get RSS」ボタンをクリックします。
各記事の要素（News item）・記事の見出し(Headline)・記事の概要文(Summary)・記事画像(Illustration)・更新日時(Date)など、それぞれに対応する要素を選択して登録します。
登録後、「MY FEED」画面よりフィード名をクリックすることでRSSフィードファイルを取得できます。
ブログ記事一覧ページのソースコードにlinkタグを追加します。
「href」属性には上記で取得した.xmlのURLを指定します。
以下のソースコードを追加することで、ブログ掲載サイト側のシステムが新着記事を取得できるようになります。
RSSボタンの作成
以下のようなソースコードを追加することでRSSフィードボタンを設置できます。
- 「a」タグの「href」属性：FetchRSSで作成した.xmlのURL
- 「img」タグの「src」属性：RSSボタンのアイコン画像のURL
NO-CODEでブログ構築している場合のボタン設置例
私のブログのCMSは任意の場所にHTMLコードを追記できないため、JavaScriptを利用してRSSボタンの要素を追加しました。
【例】「BODY」部分に追加するソースコード
【例】CSSに追加するソースコード（オプション。画像を右寄せで表示させる例）