利用 Google Ajax API 的几个实例

要用到Google Ajax API,我们首先得到这里 http://code.google.com/intl/zh-CN/apis/ajaxsearch/signup.html 申请一个属于自己网站的API密钥。

下面是一个利用 Google Ajax API 读取远程新闻信息的例子:

代码如下:

 <script src="http://www.google.com/jsapi/?key=ABQIAAAAIcPUKKnN_6s1Vv2fGiqMIxQqTfzTMmqZLFkSzMKhSMnQ-emuYhR_QxE6nfgXH8Mhk1hOtnGTQ14EoA"
    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 : 530px;
      font-size: 16px;
      color: #9CADD0;
    }
  </style>
  <script type="text/javascript">
    function load() {
      var feed ="http://www.redren.com/feed.php";
      new GFdynamicFeedControl(feed, "feedControl");

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

  <div id="body">
    <div id="feedControl">Loading...</div>
  </div>

接下来是第二个利用 Google Ajax API 读取远程新闻的例子。

代码如下:

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search and Feed Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->
  <!--
  // The Following div element will end up holding the actual feed control.
  // You can place this anywhere on your page.
  -->
  <div id="feed-control">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <!-- Google Ajax Api
  -->
  <script src="http://www.google.com/jsapi?key=ABQIAAAAIcPUKKnN_6s1Vv2fGiqMIxQqTfzTMmqZLFkSzMKhSMnQ-emuYhR_QxE6nfgXH8Mhk1hOtnGTQ14EoA"
    type="text/javascript"></script>

  <!-- Dynamic Feed Control and Stylesheet -->
  <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");
  </style>

  <script type="text/javascript">
    function LoadDynamicFeedControl() {
      var feeds = [
	{title: '3C数码产品报价',
	 url: 'http://www.redren.com/feed.php'
	},
	{title: 'E-Online',
	 url: 'http://www.eonline.com/syndication/feeds/rssfeeds/topstories.xml'
	},
	{title: 'TMZ',
	 url: 'http://www.tmz.com/rss.xml'
	}];
      var options = {
        stacked : false,
        horizontal : true,
        title : ""
      }

      new GFdynamicFeedControl(feeds, 'feed-control', options);
    }
    // Load the feeds API and set the onload callback.
    google.load('feeds', '1');
    google.setOnLoadCallback(LoadDynamicFeedControl);
  </script>

<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

最后,是一个利用 Google Ajax API 读取Picasa相册里的图片,并用幻灯显示出来的例子。

代码如下:

 <script src="http://www.google.com/jsapi/?key=ABQIAAAAIcPUKKnN_6s1Vv2fGiqMIxQqTfzTMmqZLFkSzMKhSMnQ-emuYhR_QxE6nfgXH8Mhk1hOtnGTQ14EoA"    type="text/javascript"></script>

<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>

<STYLE type=text/css>.gss A IMG {
BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.gss {
WIDTH: 288px; COLOR: #dddddd; HEIGHT: 216px; BACKGROUND-COLOR: #ffffff
}
</STYLE>

<SCRIPT type=text/javascript>
 
 function load() {
   
var feed  = "http://picasaweb.google.com/data/feed/base/user/redrencom/albumid/5301121954938360177?alt=rss&kind=photo&hl=zh_CN";
var options = {

displayTime: 2000,
transistionTime: 600,
numResults : 100,
scaleImages : false ,
thumbnailSize : GFslideShow.THUMBNAILS_LARGE ,
linkTarget : google.feeds.LINK_TARGET_BLANK


};

new GFslideShow(feed, "slideshow", options);
 }
 
google.load("feeds", "1");
 
google.setOnLoadCallback(load);

</SCRIPT>
  <DIV class=gss id=slideshow>Loading...</DIV>

发表评论

邮箱地址不会被公开。 必填项已用*标注