WEBサービス

自分のサイトに外部ブログの情報を掲載(取得)する方法

2011.12.05

自分が作ったサイトに、他ドメインの外部ブログやワードプレスで作ったサイトの情報を取得して載せたい時に便利なScriptです。
例えば、このオウガWEBデザイナー日記に他に運営するブログの更新情報(タイトルや日付、本文の一部)を表示したい場合に使用します。
更新がされたら手動で追加するのは面倒><
なので、RSSを使って情報を取得してきてサイトが更新されたら勝手に最新記事を表示してくれるというもの♪便利ですよね♪

設置方法

      まずAPIキーを取得します。
      Googleの

    Sign-up for an API Key

      でAPIキーを取得します。
      利用したいサイトのURL(RSSのURL)を入力してください。
      次に以下をサイトのheaderに記述。
<script src="https://www.google.com/jsapi?key=ここにAPIキー" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
 var feed = new google.feeds.Feed("ここにURL");
 feed.setNumEntries(10)
 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 li = document.createElement("li");
          var a = document.createElement("a");     //a要素を付け足す
          a.href = entry.link;
          var titlelink = entry.title;     //titlelinkは勝手につけた変数名です
          a.appendChild(document.createTextNode(titlelink));
          li.appendChild(a);          //appendChildを使ってliに子要素を付け足す
          container.appendChild(li);
          }
      }
 });
}
google.setOnLoadCallback(initialize);
</script>

次に書き出したい場所に以下を記述

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

これでOK!めちゃ簡単ですよね〜
はじめてgoogleのAPI使ってみました。
こうやって使うんだ〜。勉強になります★

  • このエントリーをはてなブックマークに追加



rss
上矢印
ページTOPへ