Google AJAX Feed APIでフィードをダイナミックに表示

　2008-01-05

　Google AJAX Feed APIで仲間？でAJAX Dynamic Feed Controlってものがあったので設置してみました。レイアウトはスタイルシートで変更できてフィードも自由にできます。

　⇒　What is the Google AJAX Feed API?
　⇒　Google AJAX Feed API - AJAX Dynamic Feed Control

　で、サンプルはこんな感じで。

　javascriptはこんな感じになります。表示したいフィードのURLはここに入力することになります。フィード数や表示する記事数も自由に変更できると思います。YOUR KEYのところにGoogle Codeで取得したAPI keyを入力してください。

　⇒　Sign up for the Google AJAX Feed API

<script src="http://www.google.com/jsapi/?key=YOUR KEY"
    type="text/javascript"></script>
 <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
      type="text/javascript"></script>
  <script type="text/javascript">
    function showGadget() {
      var feeds = [
{title:'IT Pro',
url:'http://itpro.nikkeibp.co.jp/rss/news.rss'},
{title:'CNET Japan',
url:'http://japan.cnet.com/rss/index.rdf'},
{title:'@IT',
url:'http://rss.rssad.jp/rss/itmatmarkit/rss2dc.xml'}];

      new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 5, stacked : true,
                               title: "IT関連ニュース"});
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
  </script>

    @import url("gfdynamicfeedcontrol.css");

    body {
      color: black;
      font-family: Arial;
      line-height: 120%;
      font-size: small;
      margin: 0;
    }

/* 全体 */ 
    #feedGadget { 
      width : 100px;
      font-size: 12px;
      color: #333333;
    }
    #feedGadget .gfg-root {
      font-size : 11px;
    }

/* ニュースの詳細 */ 
    #feedGadget .gfg-root .gfg-entry .gf-result {
      padding-left : 20px;
      height : 100px;
    }

/* タイトル */ 
    #feedGadget .gfg-title {
      font-size : 14px;
      font-weight: bold;
      margin-bottom: 5px;
      padding: 3px 3px 2px 10px;
      background-color : #003399;
      color : #fff;
    }
    #feedGadget .gfg-title a {
      color : #4E8029;
    }

/* RSSタイトル */ 
    #feedGadget .gfg-subtitle {
      font-size : 14px;
      color : #003399;
      text-align : left;
      font-weight: bold;
      margin : 10px 0px 5px 5px;
    }
    #feedGadget .gfg-subtitle a {
      color : #003399;
    }
/*  ニュースの詳細 リンク */ 
    #feedGadget .gf-title {
      font-size : 14px;
    }
    #feedGadget .gf-title a{
      color : #1066de;
    }
    #feedGadget .gfg-root .gfg-listentry {
      padding-left : 10px;
      margin-right : 5px;
    }
/* 記事リンク */
    #feedGadget .gfg-root .gfg-listentry a {
      color : #1066de;
    }
/* 記事リンク　マウス */
    #feedGadget .gfg-root .gfg-listentry a:hover {
      color : #FF3300;
    }
    #feedGadget .gfg-root .gfg-listentry-odd {
    }
    #feedGadget .gfg-root .gfg-listentry-highlight {
      border-left: 3px solid #003399;
      padding-left : 7px;
      background-image : none;
    }

　最後にBODYにタグを入れるとそこに表示されます。