[WordPress] Google Feed APIを使用して、他のブログの記事をウィジェットを使用して表示する

運用するブログが２つになったので、双方のブログの記事タイトルを表示しリンクを貼るために、Google Feed APIを使用して、WordPressのウィジェットで実現してみました。

できるだけWordPressに手をいれることは極力さけているため、Google Feed APIを使用して他のブログ記事を取得し、その結果をウィジェット（テキスト）を使用して表示するために以下の手順で作業を行いました。

【手順】
1. ウィジェットの「テキスト」を作成する

2. 「テキスト」に任意のタイトルをつけます

3. 以下のコードを「テキスト」の項目に以下のコードを書きます

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
  var feed = new google.feeds.Feed(" RSSフィードのURL ");
  feed.setNumEntries(3);
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var div = document.createElement("div");
        div.appendChild(document.createTextNode(entry.title));
        div.innerHTML = '■ <a href="' + entry.link + '">' + entry.title + '</a>';
        container.appendChild(div);
      }
    }
  });
}
google.setOnLoadCallback(initialize);

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

ウィジェットエリアには以下のように表示されます。

4. 実際にWordPressサイトには以下のように表示されます。

詳しく説明すると、以下のとおりとなります。

【使用したコード】
使用したコードは次のサイトに掲載されています。
Google Feed API Developer’s Guide – Google Feed API — Google Developers
https://developers.google.com/feed/v1/devguide?hl=ja

1. Gogole Feed APIの呼び出し
使用するにあたっては、以下のJavascriptを呼び出します。

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

※APIキーが必要と書かれているブログ記事がありますが、現在(2014/2/17現在) Google Feed APIを使用するにはAPIキーは不要です。なお以前は必要とされていたようです。

2. RSSのフィードURLを変更します
サンプルソースのhttp://fastpshb.appspot.com/feed/1/fastpshbを変更します。

変更前

var feed = new google.feeds.Feed(" http://fastpshb.appspot.com/feed/1/fastpshb ");

変更後

var feed = new google.feeds.Feed(" RSSフィードのURL ");

3. フィードの取得
実際にフィードを取得するスクリプトは以下の通りです。

    <script type="text/javascript">

    google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed(" RSSフィードのURL ");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>

4. HTML上で実際に表示
実際に表示するエリアには以下のタグを使用します

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

この状態ですと、件数は5件に固定され、さらにリンクが貼られません。

5. 件数を変更する。
RSSフィードのURLを指定する行の次の行で、feed.setNumEntriesで3件を指定します。

変更前

      var feed = new google.feeds.Feed(" RSSフィードのURL ");

変更後

      var feed = new google.feeds.Feed(" RSSフィードのURL ");
      feed.setNumEntries(3);

6. フィードにハイパーリンクを追加する
リンクを貼るためには以下のように変更します。

変更前

            div.appendChild(document.createTextNode(entry.title));

変更後

            div.innerHTML = '■ <a href="' + entry.link + '">' + entry.title + '</a>';

【使用するWordPressのフィード】
WordPressのRSSについてはCodexにも記載されています。
WordPress Feeds – WordPress Codex
http://codex.wordpress.org/WordPress_Feeds

一般的なRSSは以下のURLとなります。

http://example.com/?feed=rss2

カテゴリを指定する場合には以下のRSSとなります。

http://www.example.com/?cat=categorynumber&feed=rss2

タグを指定する場合には以下のRSSとなります。

http://www.example.com/?tag=tagname&feed=rss2

以上の手順でWordPressサイトで、ウィジェットでGoogle Feed APIを使用して、他のブログのRSSを表示することが可能になります。参考になりましたでしょうか。

【参考にさせていただいたサイト】
本記事を書くにあたって次のサイトを参考にさせていただきました。ありがとうございました。

Google Feed API Developer’s Guide – Google Feed API — Google Developers
https://developers.google.com/feed/v1/devguide?hl=ja
　※Google Feed APIの開発者ガイドです。こちらが基本となります。

サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。
http://webimemo.com/web/3873
　※表示件数を参考にさせていただきました。

Google AJAX Feed APIで、HTMLにRSSフィードを表示
http://herrkf.com/webtech/static/080318-ajaxfeed/
　※「フィードにハイパーリンクを追加する」を参考にさせていただきました。

WordPress Feeds – WordPress Codex
http://codex.wordpress.org/WordPress_Feeds
　※WordPressのフィードの指定方法について記載があります。