要用到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>