スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Google AJAX Feed APIのDynamic Feed Controlで複数のRSSを表示

 先ほど紹介した「Google AJAX Feed API - Dynamic Feed ControlでRSSを表示」では表示するRSSフィードは1つでしたが、今度は複数のRSSフィードを表示してみます。
Loading...

 基本的な構造は前回と同じで、変更点は赤で表示しています。表示するRSSフィードの数は自由に変更できます。
  <script src="http://www.google.com/jsapi/?key=取得したAPI key"
    type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
    type="text/javascript"></script>

  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

    #feedControl { 
      margin-top : 20px;
      margin-left: auto;
      margin-right: auto;
      width : 440px;
      font-size: 16px;
      color: #9CADD0;
    }
  </style>

  <script type="text/javascript">
    function load() {

      var feed = [
       {title:'JavScript',
        url:'http://weboook.blog22.fc2.com/?xml&category=2'},
       {title:'Google API',
        url:'http://weboook.blog22.fc2.com/?xml&category=1'},
       {title:'カスタマイズ',
        url:'http://weboook.blog22.fc2.com/?xml&category=7'}];

  var options = {
    numResults : 3,
    stacked : true,
    title: "レッツFC2ブログ!",
    displayTime : 5000,
    fadeOutTime : 500,
    linkTarget : google.feeds.LINK_TARGET_BLANK
  }
  new GFdynamicFeedControl(feed, "feedControl", options);

    }
    google.load("feeds", "1");
    google.setOnLoadCallback(load);
  </script>

    <div id="feedControl">Loading...</div>
Dynamic Feed Controlの構造を解説してみました。
Dynamic Feed Control(Google AJAX Feed API)の仕組みについて

CSSの変更についてはこちら。
Dynamic Feed Control(Google AJAX Feed API)のCSSカスタマイズ
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。