普通のHTMLページにPHPを使ってRSSを取得表示させる方法(外部ブログをお知らせ表示として使う)

About HTML

CMS を使っておらず、ノーマルの HTML だけで作成されたウェブサイト。CMS ではないため、外部ブログサービスを使ってお知らせを更新し、その RSS フィードを取得して、トップページのお知らせ一覧に表示させる措置を行なっているサイトがあります。

RSS による外部サービスの取得は、Google Ajax RSS feed を皮切りに YQL と相次いで便利な RSS 取得サービスが終了となり、もはや HTML ページに PHP をぶっこんで RSS 取得をするしか無い状態に。

PHP が使えるサーバーじゃないと動かせませんが、簡単に HTML ページに、外部ブログ等の RSS フィードを取得してタイトル一覧を表示させる方法をメモします。

HTML ページに PHP を使って RSS を取得表示させる手順

ベースとなるフォルダ & ファイルを作成する


  1. まず、「feed」というフォルダを作ります。

  2. 続いて feed フォルダの中に「feed.js」と「feed.php」の2つのファイルを作成します。

feed.js にはこちらを記述します

feed.jp には「feed.php を読み込んで取得してくださいね」という命令分が入ります。

feed.php にはこちらを記述します

feed.php には「外部ブログの RSS を取得して、HTML ページの指定場所に dl dd dt レイアウトの日付とタイトル一覧を表示してくれよ」という命令文が入ります。

任意の RSS フィードの URL に挿し替えて、外部ブログ記事のタイトルが表示される件数を設定してください。デフォルトでは5件表示になっています。

さらに15行目の日付部分。デフォルトでは「Y年m月d日」と漢字日付表記になっています。例えば 2019-01-12 のように「-」で表示したい場合は「Y-m-d」としてください。

HTML ページにはこちらを記述

取得した RSS フィードのタイトル一覧を表示させたい場所に、上記のコードを記述してください。script タグなのですが、head に設置するわけではありませんので、間違わないようにしてください。

設置例:

例えば、class : box-info が適応された div タグの中に取得した RSS フィードのタイトル一覧を表示させたい場合はこのようにします。

あとは FTP サーバーに突っ込むだけ

外部ブログの RSS フィードを取得したタイトル一覧を表示させるようにしたページが、index.html なら、script タグを入れた index.html と RSS 取得用の動作命令が入った feed フォルダを FTP サーバーに突っ込むだけで、RSS 一覧が表示されるようになります。

注意

この手順で RSS フィードを取得して表示するには、サーバーが PHP に対応している必要があります。PHP に非対応のサーバーでは利用できないので注意です。

取得した外部ブログの RSS タイトル一覧が表示される

実際に上の手順で外部ブログの RSS フィードを取得して、タイトル一覧を HTML ページに表示させるとこんな感じです。

この方法でちゃんと表示されることが確認できた外部ブログサービスは「ライブドアブログ」です。他の無料ブログは確認していませんので何ともいえません。

取得した RSS タイトル一覧のデザインの変更方法

本記事の手順では、class : box-info が適応された div タグの中に取得した RSS フィードのタイトル一覧を表示させています。

挟んである div タグの Class(ここでは box-info)の中の dl dt dd のレイアウトを CSS でデザインすれば自由にデザイン変更することができます。

dl が一覧の枠。dt が日付表示のデザイン。dd がタイトルのデザインです。


というわけで、Google API や YQL の代わりになる PHP を使った RSS フィードを取得して、外部ブログの記事タイトル一覧を取得する方法のメモでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です