Google AJAX Feed API 展開例6(Feed Control タブ表示)

展開例(yahoo!ニュース・トピックスのトップ、海外、経済 を表示します)

ローディング中・・・

ソースコード

  • 複数のフィード情報を取得できます。
  • 表示したい場所に「<div id="feed"></div>」を追加することでフィード情報を表示できます。(変更可能)
  • 24時間以上経過している場合は、経過時間表示ではなく、年月日で表示します。
  • 出力するHTMLを変更することはできません。
  • CSSを変更することで表示を変えることが出来ますが、既に設定済のCSSを上書きすることになります。
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("feeds", "1");
    function OnLoad() {
        var feedControl = new google.feeds.FeedControl();
        //表示するフィードエントリの件数
        feedControl.setNumEntries( '8' );
        /*リンクターゲットの設定
            別ウィンドウに表示-------feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK)
            現在のウィンドウに表示---feedControl.setLinkTarget(google.feeds.LINK_TARGET_SELF)
            フレームを解除して表示---feedControl.setLinkTarget(google.feeds.LINK_TARGET_TOP)
            親フレームに表示---------feedControl.setLinkTarget(google.feeds.LINK_TARGET_PARENT)
            任意のフレームに表示-----feedControl.setLinkTarget(フレーム名) */
        feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK);
        //読み込むフィード情報の設定 feedControl.addFeed("URL", "表示タイトル")
        feedControl.addFeed("http://rss.dailynews.yahoo.co.jp/fc/rss.xml", "Yahoo!ニュース・トピックス - トップ");
        feedControl.addFeed("http://rss.dailynews.yahoo.co.jp/fc/world/rss.xml", "Yahoo!ニュース・トピックス - 海外");
        feedControl.addFeed("http://rss.dailynews.yahoo.co.jp/fc/economy/rss.xml", "Yahoo!ニュース・トピックス - 経済");
        //フィード情報挿入先を指定
        feedControl.draw(document.getElementById("feed"),
            /*表示方法はの設定
                ライン表示---{drawMode : google.feeds.FeedControl.DRAW_MODE_LINER}
                タブ表示---{drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED} */
            {drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED}
        );
    }
    window.onload = google.setOnLoadCallback(OnLoad);
</script>

CSSの設定の上書きは、下記を参考にしてください

<div class="gfc-control">
<div class="gfc-tabsArea">
<div class="gfc-tabHeader gfc-tabhActive">フィードタイトル1</div>
<div class="gfc-tabHeader gfc-tabhInactive">フィードタイトル2</div>
<div class="gfc-tabHeader gfc-tabhInactive">フィードタイトル3</div>
</div>
<div class="gfc-resultsbox-visible">
<div class="gfc-resultsRoot gfc-tabData gfc-tabdActive">
<div class="gfc-resultsHeader">
<div class="gfc-title">フィードタイトル1</div>
</div>
<div class="gfc-results">
<div class="gfc-result">
<div class="gf-result">
<div class="gf-title">
<a href="リンク" class="gf-title" target="_blank">フィードエントリのタイトル</a>
</div>
<div class="gf-author">
記載者
</div>
<div class="gf-spacer">
</div>
<div class="gf-relativePublishedDate">
経過時間及び日付
</div>
<div class="gf-snippet">
概要
</div>
</div>
</div>
</div>
</div>
</div>
</div>