RSSを使って自分のホームページに【アメブロ】などの外部ブログの新着記事を載せたい

ホームページ自体はWordPressで作り、ブログはアメブロで書いているからアメブロの記事タイトルを自分のサイトに表示したいということがあるかもしれません。そんなときにどうしたらよいのか、その方法を書いてみたいと思います。

以前はgoogle feed apiが便利だった

数年前は「google feed api」というものを利用して、自分のサイトに他で書いているブログの記事を表示させていたサイトが多いかと思います。しかし、2017年2月現在、読み込まれなくなってしまっています。どうやら廃止してしまっているようですね。
なので違う方法で表示させる必要があります。

phpファイルを作ります

PHPとjavascriptが使える環境ならこの2つのファイルを使って呼び出しましょう。
自分の借りているサーバー等でPHPが使えるのか分からない場合は、下記の記事に確認する方法がちょうど書いてありますので、参考にしてください。目次の3番目の項目です。

お問い合わせフォームを設置したけどメールが届かない！メールが送信できない時に確認すること！

WordPressではなく、無料のhtmlテンプレートなどについているお問い合わせフォームを設置してみたけどメールが届かずどうしたものやら、といった時に確認したいことを書いてみたいと思います。 前提事項 この記事はWor...

shiritai.net

2017.10.13

まずは下記のソースをテキストエディタなどを開き、コピペして、rss.phpという名前で保存してください。
アメブロのIDというところには、ご自分のブログのIDを入れてください。

<?php 
    date_default_timezone_set('Asia/Tokyo');
     
    $url = "http://feedblog.ameba.jp/rss/ameblo/アメブロのID/rss20.xml";
    $rss =  simplexml_load_file($url);
    $output = '';
    $i = 0;
    // 取得件数
    $max = 5;
    if($rss){
        foreach( $rss->channel->item as $item )
        {
            /**
            * タイトル
            * $item->title ;
            * リンク
            * $item->link ;
            * 更新日時のUNIX TIMESTAMP
            * $timestamp = strtotime( $item->pubDate ) ;
            * 詳細
            * $item->description;
             */
            if(!preg_match('/^PR:/',$item->title )){
                if($i < $max){
                    $timestamp = strtotime( $item->pubDate );
                    $date = date( 'Y.m.d',$timestamp );
                    $output .= '<dt>';
                    $output .= '<time datetime="' . $item->pubDate . '">' . $date . '</time>';
                    $output .= '</dt>';
$output .= '<dd>';
$output .= '<a href="'. $item->link .'" target="_blank">' . $item->title . '</a>';
                    $output .= '</dd>';
                    $i++;
                }
            }
            
        }
    }
     
    echo '<dl class="list">'. $output . '</dl>';
?>

アメブロではない場合は
$url = “http://feedblog.ameba.jp/rss/ameblo/アメブロのID/rss20.xml”;

のhttp://以下の部分のアドレスをかえてください。
保存したら、rss.phpファイルをWordPressであればテーマ、子テーマを作っているようならそのフォルダに保存します。

WordPressを作っていないようなら、サイトのindex.htmlが置いてある同じ階層の場所においたり、または新しくPHPフォルダを作ってそこに入れてもいいと思います。

javascriptの命令を作ります

次に下記javascriptをアメブロ記事を表示させたいページに読み込ませるようにしたいと思います。

<script type="text/javascript">
     ;(function($){
      $(function(){
        $.get('PHPを置いた場所のURL/rss.php',function(data){
          $('#feed').html(data);
        })
      })
    })(jQuery);
</script>

これをindex.htmlの</head>内にコピペしてください。
「PHPを置いた場所のURL」部分は、さきほど作ったrss.phpを置いた場所のアドレスを書いてください。
jsファイルとして、外部読み込みにしたい場合は、

<script type=”text/javascript”>
と
</script>

を外して、コピペしてください。

     ;(function($){
      $(function(){
        $.get('PHPを置いた場所のURL/rss.php',function(data){
          $('#feed').html(data);
        })
      })
    })(jQuery);

rss.jsなどとして同じJSが置いてあるフォルダなどに入れて、読み込めるようにしましょう。
<script src=”https://shiritai.net/wshirip/wp-content/themes/simplicity2/rss.js”></script>
みたいな感じで。

あとは記事を表示したい場所に

<div id="feed">
</div>

と書けば表示されます。
※スクリプトは、jQueryなのでもしもjQueryを読み込んでいない場合は、うまく行かないと思います。
その場合はjQueryを先に読み込ませてください。

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
     ;(function($){
      $(function(){
        $.get('PHPを置いた場所のURL/rss.php',function(data){
          $('#feed').html(data);
        })
      })
    })(jQuery);
</script>

実際にアメブロ記事をこのページに載せてみます

実際にアメブロ記事をこのページに表示させてみたいと思います。
例として知り合いのミュージシャンの記事のタイトルを表示してみます。

このブログのタイトルをこのページに表示させます。
参考サイト：ムールドラムス女性ドラマー、レッスン、ライブ、セッション、日常

IDは「muhrdrums」ですね。
ソース内のURLにこのIDを記載します。

<?php 
    date_default_timezone_set('Asia/Tokyo');
     
    $url = "http://feedblog.ameba.jp/rss/ameblo/muhrdrums/rss20.xml";
    $rss =  simplexml_load_file($url);
    $output = '';
    $i = 0;
    // 取得件数
    $max = 5;
    if($rss){
        foreach( $rss->channel->item as $item )
        {
            /**
            * タイトル
            * $item->title ;
            * リンク
            * $item->link ;
            * 更新日時のUNIX TIMESTAMP
            * $timestamp = strtotime( $item->pubDate ) ;
            * 詳細
            * $item->description;
             */
            if(!preg_match('/^PR:/',$item->title )){
                if($i < $max){
                    $timestamp = strtotime( $item->pubDate );
                    $date = date( 'Y.m.d',$timestamp );
                    $output .= '<dt>';
                    $output .= '<time datetime="' . $item->pubDate . '">' . $date . '</time>';
                    $output .= '</dt>';
$output .= '<dd>';
$output .= '<a href="'. $item->link .'" target="_blank">' . $item->title . '</a>';
                    $output .= '</dd>';
                    $i++;
                }
            }
            
        }
    }
     
    echo '<dl class="list">'. $output . '</dl>';

?>

コピペしてwordPressのテーマ内のフォルダに置きました。javascriptは直接このページにコピペしました。

<div class="blogbox">
<div id="feed">
</div></div>

＝＝＝＝＝

＝＝＝＝＝
このように表示されます。

今回年月日とタイトルが左右に並ぶように<dl>を使っています。もちろん<ul><li>を使ってもよいと思います。
その場合にはphpの<dl>部分を<ul><li>と変えてください。
スタイルシートで下記を設定しています。

.blogbox dl.list{
	border-bottom: dotted 1px #CCC;margin:0 10px 0 0;padding:5px 0;}
	
.blogbox dl.list dt {
  clear: left;
  float: left;
  margin: 0 0 0.2em;
  width: 7.5em;
 
  padding-left: 5px;
  color: #000;
}

.blogbox dl.list dd {
  margin-bottom: 0.2em;
  margin-left: 7.5em;
}

命令のソースはこちらのサイトを参考にしています。
出典：【Google Feed API廃止に対応する】PHPとJavascriptでFeedを取得する方法。 | will STYLE Inc.｜神戸にあるウェブ制作会社
こちらの記事では、APIにしてJSONPでのFeedの取得方法も書かれていますので、PHPが使えない環境などの場合に参考にされるとよいと思います。

さくらのブログindex.rdfの場合

※追記です。

コメントに質問をいただきました
さくらのブログは知りませんでしたが、Seesaaなんかもindex.rdfのようです。
確かにPHPを調整する事で可能になりそうです。
基本的にはすべての質問にお答えするとは限りませんが、できそうだったので書いておきたいと思います。
例として、さくらブログのヘルプ？のページがありましたので
http://blog-faq.sblo.jp/
これを表示させたいと思います。

修正したrss.phpソースは下記です。

<?php 
date_default_timezone_set('Asia/Tokyo');
     
$url = "http://blog-faq.sblo.jp/index.rdf";
$rss =  simplexml_load_file($url);
$output = '';
  $i = 0;
  // 取得件数
  $max = 5;
  if($rss){
      foreach( $rss->item as $item )
        {   
  if($i < $max){
  $date = date('Y.m.d', strtotime($item->children("http://purl.org/dc/elements/1.1/")->date));
  $output .= '<dt>'
  $output .= $date;
  $output .= '</dt>';
　$output .= '<dd>';
　$output .= '<a href="'. $item->link .'" target="_blank">' . $item->title . 　'</a>';
                    $output .= '</dd>';
                    $i++;
                
            }
            
        }
    } 
    echo '<dl class="list">'. $output . '</dl>';

?>

こちらを設定して確認すると下記のように取得できるかと思います。

＝＝＝＝＝

＝＝＝＝＝

WordPressのウィジェットを使う

WordPressを使っているなら、ウェイジェット機能でRSSを表示させることもできます。ウィジェットなので、コンテンツ内など自由な場所におきたい場合は、ウィジェット自体を置きたい位置に設置する必要がありますが、こちらのほうが実は簡単だったりしますね。
［外観］→［ウィジェット］にいき、「RSS]をサイドバーに置きます。

サンプルの画像のテーマはTwenty Seventeenです。
ウィジェットの位置は「ブログサイドバー」か「フッター１」か「フッター２」の３つがありますね。
「RSS フィードの URL:」にアメブロ等の表示したいアドレスを記載します。

そうすればサイドバーや例えばフッターなどウィジェットで設定されている場所に表示ができると思います。