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

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

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

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

phpファイルを作ります

phpとjavascriptが使える環境ならこの2つのファイルを使って呼び出しましょう。
まずは下記のソースをテキストエディタなどを開き、コピペして、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>

と書けば表示されます。

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

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

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

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>';

?>

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

=====

=====

コメント

  1. やまもと says:

    初めまして、今回のコード大変参考になり、使用させていただきました。
    ありがとうございました。

    一点、質問があるのですが、さくらブログなどで作成されたブログのRSSアドレスが、
    http://XXXXXXX.sblo.jp/index.rdf でして、rdfファイルが表示する事ができませんでした。おそらく、PHPを調整する事で可能になる気がするのですが、当方PHPに関しては素人でして答えが見つかりませんでした。

    もし可能であれば、rdf を表示する方法をお教えいただくと大変嬉しく思います。

  2. 知りたいねっと管理人 says:

    やまもとさん

    初めまして、知りたいねっと管理人です。
    コメントありがとうございます。
    基本的にすべてのご質問にお答えするとは限らないことはご理解いただけたらと思います。
    でもやってみたら現状のソースを修正することでいけそうだったので、記事に追加しておきました。よかったら参考にしてみてください!

    • やまもと says:

      ありがとうございました!解決できました。
      本当に助かりました。今後も参考にさせていただきます。

  3. 知りたいねっと管理人 says:

    やまもとさん

    お返事ありがとうございます。
    解決できてなによりです。
    今後も「知りたいねっと」をよろしくお願いいたします!

  4. ようこ says:

    ありがとうございました!!
    YDLではxmlが扱えなくて大変困っていました!!
    おかげさまで解決いたしました!感謝!!

  5. 知りたいねっと管理人 says:

    ようこさん

    コメントありがとうございます、知りたいねっと管理人です。
    お役に立ててよかったです。
    今後ともどうぞよろしくお願いいたします!