スポンサーサイト

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

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

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

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

Loading...

 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にタグを入れるとそこに表示されます。
<div id="feedGadget">Loading...</div>
 ニュースが表示されるまでの間この中の文字が代わりに表示されます。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









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

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