はてなブログの記事内にRSSによる新着を表示

はてなブログの記事中の任意の場所へRSSフィードによる新着記事を一覧で表示させてみました。

RSSで取得した更新情報を記事タイトル、サイトタイトル、投稿日の順に出力させ新着順にソートし、インラインフレームでトップの固定ページ(PRO版)へ埋め込んでいます。

RSSフィードを「はてなブログ」で表示する方法

当サイト(はてなブログPRO)の記事内にRSSフィードの新着記事を表示するために「simplexmlを使った方法」を実践してみました。

q.hatena.ne.jp

コードの記述については既出のもので上のリンクを辿れば確認できるため、当サイトで詳細な説明は控えさせていただくこととします。

そのため大まかな手順のみ解説します。

※コードの利用や当記事に書いてある内容を参考にしてのページの公開は自己責任でお願いします。

新着情報を表示する手順

今回用いた手法は、一般にWordPressなどに用いられるRSSによる新着記事を表示させるコードなどを使いページを作成して、それをはてなブログの記事中へインラインフレームで表示させる方法です。

はてなブログ以外のサーバーを準備

はてなブログの記事中にはRSSを表示させるためのコード(simplexml)を直接記述できないので、掲載したい新着一覧のみのHTMLページを「はてなブログ」とは別のサーバー内に作成します。

このため別途サーバーが必要になります。

また、使用するサーバーによってはsimplexml_load_fileが使えないなど自分の目的と合わないこともあるので注意が必要です。

Feedを取得するためのコードを記述

準備したサーバーの任意の場所に、新着一覧を表示するためのHTMLページを作成しアップロードする(例:shinchaku.php)。

なお、このHTMLファイルにPHPを記述した場合には拡張子をphpにする必要があります。

上手く記述できれば、指定したRSSフィードからの新着記事をここで作成したWebページに単独で表示できるようになります。

記事内への挿入

最後に新着記事一覧を表示させたい「はてなブログ」の記事中へインラインフレーム「iframe」を使い挿入します。


<iframe src="https://ページのアップロード先URL/shinchaku.php" width="100%" height="auto" frameborder="0" scrolling="auto">
</iframe> 

タグの<>は全角になっていますが実際は半角を用います。

これで記事中に新着情報(記事タイトル、サイトタイトル、投稿日)の一覧を表示可能になります。

表示結果

トップの固定ページに埋め込んだ内容と同じものを表示しています。

個人的にはアイキャッチは必要ないので省略しました。
代わりにアイコンフォントを表示させています。

トップページに新着記事を表示する意味

はてなブログでは、標準でサイドバーに新着記事を表示する機能があります。

しかし、スマホのブラウザではこの新着一覧を確認するためには下へスクロールし続ける必要があってユーザーにとっては不便です。

ブログサービスそのものが最新記事をトップに表示する仕様が基本ですので心配ないかもしれませんが、人気記事を量産する著名ブロガーならともかく、そうでない当ブログのようなサイトではトップページには主旨や概要が掴みやすい情報を載せておきたいと考えます。

それに加え、更新がないか確認に訪れたリピーターへも新規投稿の有無を併せて示せる一覧が表示できれば柔軟な対応ができます。

なお、当記事またはトップの固定記事にスターを付けて下さった方の新着情報を一覧に表示させていただく予定です。