楽天ブログのRSSフィードをWEBサイトに表示させる方法

WEBサイトに新着情報を掲載したい場合、外部のブログと連動させることで記事の更新作業を楽にしたい、という場合があると思います。

この記事では、楽天ブログのRSSを読み込んでブログの日時とタイトルをWEBサイトの方に表示させる方法についてまとめています。

楽天ブログのRSSを表示させる方法

できあがりはこうなります。

index.htmlファイルを編集

まずHTMLファイルのブログを表示させたい位置にHTMLを書きます。

<div class="news">
  <h2>お知らせ<a href="https://plaza.rakuten.co.jp/shinolab/" class="btn_list">一覧を見る</a></h2>
  <ul><!-- ここに動的生成 --></ul>
</div>

次に、同じくHTMファイルの任意の場所に、PHPを叩くjavascript処理を書きます。
記載場所にこだわりがないようであれば上記の記述のすぐ直後に記載するといいです。
※ここで指定したphpファイル名「rss.php」は、後に出てくるphpファイルの名前と合っている必要があります。

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
<script type="text/javascript">
  ;(function($){
      $(function(){
          $.get('rss.php',function(data){
              console.log(data);
              $('.news ul').html(data);
          })
      })
  })(jQuery);
</script>

CSSファイルを編集

CSSで表示を整えます。

.news {
    margin: 0 auto;
    max-width: 960px;

}
.news h2 {
	border-bottom: 1px dotted #00365E;
    font-size: 28px;
    font-weight:normal;
    padding: 5px 0;
    position: relative;
    display: block;
}
.news ul{
    margin-left:-40px;
}
.news ul li {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom:1px dotted #B5A57B;
    list-style-type: none;
}
.news ul li a {
	font-size: 14px;
	color: #333;
	text-decoration: none;
	letter-spacing: 1px;
}
.btn_list {
    font-size: 14px;
    line-height: 30px;
    text-decoration: none;
    display: block;
    width: 100px;
    position: absolute;
    top: 10px;
    right: 0px;
    letter-spacing: 0px;
    padding-left: 30px;
    color: #FFF;
    background-color: #3c2509;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

phpファイルを編集

rss.phpというファイルを作成して、こちらの内容を書きます。
※４行目のブログURLは、適宜変更してください。

<?php
date_default_timezone_set('Asia/Tokyo');

$url = "https://api.plaza.rakuten.ne.jp/shinolab/rss";
$rss = simplexml_load_file($url);
$output = '';
$i = 0;
// 取得件数
$max = 4;
if ($rss) {
  foreach ($rss->item as $item) {
    /**
     * タイトル
     * $item->title ;
     * リンク
     * $item->link ;
     * 更新日時のUNIX TIMESTAMP
     * $timestamp = strtotime( $item->pubDate ) ;
     * 詳細
     * $item->description;
     */

    if (!preg_match('/^PR:/', $item->title)) {

      if ($i < $max) {
        $date = date('Y年m月d日', strtotime($item->children("http://purl.org/dc/elements/1.1/")->date));
        $output .= '<li>';
        $output .= '<a href="' . $item->link . '">' . "{$date} {$item->title}" . '</a>';
        $output .= '</li>';
        $i++;
      }
    }

  }
}

echo $output;

以上で完成です。
いかがでしょうか。
今回は楽天ブログの紹介でしたが、ブログサイトによって書き方がちがってきますのでお気をつけください。