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

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

古い情報ではありますが、たびたび当ページにアクサスしていただけているのでサンプル表示を再掲載させていただきました

記事中の『RSSによる新着情報の表示』をご参照ください。はてな開発ブログとja.wordpress.orgの更新を取得しています。

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

現在はWordPressで運用しておりますので、iframeによる埋め込みは「はてなブログ」でもWordPressでも可能です。

目次非表示

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

当サイト（はてなブログPRO：現在はWorｄPressに移行済み）の記事内にRSSフィードの新着記事を表示するために「simplexmlを使った方法」を実践してみました。

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

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

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

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

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

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

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

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

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

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

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

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

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

RSSによる新着取得

はてな開発ブログとWordPress

アイキャッチは必要ないと判断し代わりにアイコンフォント（ペンシル）を表示させています。

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

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

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

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

なお、当記事またはトップの固定記事にスターを付けて下さった方の新着情報を一覧に表示させていただきました（現在は終了し当サイトの更新とサンプル2サイトのみを表示しています）。

※ご協力ありがとうございました。