Some question about google news api search.

Question

youlichika 0 Light Poster

13 Years Ago

I tried to make a easy google news search api. I know google news api search can show max 8 items per page, and 8 pages(total 64 items).
1.How to add `image{}`(I want to show the news image), I read the document in google official website, but not understand.
2.Can google news api search set a start page at page 3?(the default page is always show page 1)
3.Is google api search have a day limit? I saw the old version Google SOAP Search API just allow custom use 1000 times per day.
Thanks.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>The Hello World of News Search</title> 
    <script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script> 
    <script type="text/javascript"> 
      google.load('search', '1'); 
      var searchControl; 
      function OnLoad() {
        google.search.Search.getBranding(document.getElementById("branding"));
        var newsSearch = new google.search.NewsSearch();
        newsSearch.setUserDefinedLabel("sport");
		
        searchControl = new google.search.SearchControl();
		searchControl.addSearcher(newsSearch);

        var options = new google.search.DrawOptions();
        options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
		searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);	
        searchControl.draw(document.getElementById("searchResults"), options);
        // Execute an inital search
        searchControl.execute("sport");
      }
      // Set a callback to call your code when the page loads 
      google.setOnLoadCallback(onLoad); 
    </script> 
  </head> 
  <body style="font-family: Arial;border: 0 none;"> 
    <div id="branding"  style="float: left;"></div><br /> 
    <div id="content">Loading...</div> 
  </body> 
</html>

api google javascript

2 Contributors
6 Replies
207 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by youlichika

All 6 Replies

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Youlichika,

Your page sticks on "loading".

If you can develop it to the point where it shows Page 1 without images, then I should be able to explain how to show images and go to page 3.

Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Youlichika,

The problems with Google are that (a) they keep changing things and (b) their APIs simply ain't very friendly.

Below is a way to get what you're after but it's nothing like yours, which probably uses a more recent API (though not the most recent, I think). I'm sure that your method could be customised but it's not immediately obvious how to do it.

Anyways, for what its worth ....

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>The Hello World of News Search</title>
<style type="text/css">
body {
	font-family: arial;
}
form {
	margin: 0;
}
#loading {
	margin: 20px 0 0 60px;
	font-size: 10pt;
	display: none;
}
#pagination1Wrapper, #pagination2Wrapper {
	clear: left;
	margin-top: 1.0em;
	font-size: 9pt;
	display: none;
}
#searchResults {
	font-size: 10pt;
}
#searchResultsNull {
	margin: 1.0em;
	font-size: 10pt;
	display: none;
}
.gs-result {
	clear: left;
	margin-top: 1.0em;
}
.gs-result img {
	float: left;
	margin-right: 10px;
	border-width: 0;
}
.gs-result div.gs-title {  }
.gs-result a.gs-title {  }
.gs-result a.gs-title b {  }
.gs-result div.gs-publisher {  }
.gs-result div.gs-publishedDate {  }
.gs-result div.gs-relativePublishedDate {  }
.gs-result div.gs-snippet {  }
.gs-result div.gs-clusterUrl { clear: left; }
.gs-result a.gs-clusterUrl {  }
.gs-result div.gs-watermark { clear: left; display: none; }
.gs-result a.gs-watermark {  }
</style>
<!-- BEGIN: SAMPLE RESULT -->
<!--
<div class=gs-title>
	<a class=gs-title href="http://www.wsmv.com/entertainment/26159244/detail.html" target=_blank>First <B>Garth</B> Brooks Flood Concert Thursday</a>
</div>
<div class=gs-publisher>WSMV Nashville</div>
<div class=gs-publishedDate>- 16 Dec 2010</div>
<div class=gs-relativePublishedDate>- 2 hours ago</div>
<div class=gs-snippet>Thursday night is the night many country music fans have been waiting for: the chance to see <b>Garth</b> Brooks live in Music City. The country star is performing <b>...</b></div>
<div class=gs-clusterUrl>
	<a class=gs-clusterUrl href="http://news.google.com/news/story?ncl=d8UohtqzWc2APSMrljbfGdyK5E5xM&hl=en-GB&ned=us" target=_blank>Related Articles »</a>
</div>
<div class=gs-watermark>
	<a class=gs-watermark href="http://code.google.com/apis/ajaxsearch/faq.html" target=_blank>clipped from Google - 12/2010</a>
</div>
-->
<!-- END: SAMPLE RESULT -->
<script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function onLoad() {
	google.search.Search.getBranding('branding');
});

onload = function() {
	var loading = document.getElementById('loading');
	var searchResultsContainer = document.getElementById('searchResults');
	var pagination1Wrapper = document.getElementById('pagination1Wrapper');
	var pagination2Wrapper = document.getElementById('pagination2Wrapper');
	var pagination1 = document.getElementById('pagination1');
	var pagination2 = document.getElementById('pagination2');
	var searchResultsNullContainer = document.getElementById('searchResultsNull');
	var nullSearchTerm = document.getElementById('nullSearchTerm');

	var searchTerm;
	var newSearch = true;

	var newsSearch = new google.search.NewsSearch();

	newsSearch.setSearchCompleteCallback(this, function() {
	
	// Uncomment this code to make the search go to page 3 initially.
	// (Probably unnecessary with decent pagination control).
/*
		if(newSearch && newsSearch.cursor.currentPageIndex == 0) {
			newsSearch.gotoPage(2);
			return;
		}
*/
		newSearch = false;
		loading.style.display = 'none';
		if (newsSearch.results && newsSearch.results.length > 0) {
			pagination1Wrapper.style.display = 'block';
			pagination2Wrapper.style.display = 'block';
			searchResultsNullContainer.style.display = 'none';
			searchResultsContainer.style.display = 'block';
			searchResultsContainer.innerHTML = '';
			for (var i=0; i<newsSearch.results.length; i++) {
				var wrapper = document.createElement('div');
				var node = newsSearch.results[i].html.cloneNode(true);
				wrapper.className = 'gs-result';
				wrapper.appendChild(node);
				if(newsSearch.results[i].image) {
					var a = document.createElement('a');
					var img = document.createElement('img');
					a.appendChild(img);
					node.insertBefore(a, node.childNodes[2]);
					a.href = newsSearch.results[i].unescapedUrl ;
					img.src = newsSearch.results[i].image.tbUrl;
					img.style.width = newsSearch.results[i].image.tbWidth;
					img.style.height = newsSearch.results[i].image.tbHeight;
				}
				searchResultsContainer.appendChild(wrapper);
			}
			var htmlArray = ['Page&nbsp;:&nbsp;'];
			var pageClick_closure = function(i) {
				return function() {
					pagination1Wrapper.style.display = 'none';
					pagination2Wrapper.style.display = 'none';
					searchResultsNullContainer.style.display = 'none';
					searchResultsContainer.style.display = 'none';
					loading.style.display = 'block';
					newsSearch.gotoPage(i);
					return false;
				}
			};
			pagination1.innerHTML = pagination2.innerHTML = '';
			for(var i=0; i<newsSearch.cursor.pages.length; i++) {
				if(i === newsSearch.cursor.currentPageIndex) {
					var span = document.createElement('span');
					var txt1 = document.createTextNode(' ' + newsSearch.cursor.pages[i].label + ' ')
					pagination1.appendChild(span);
					span.appendChild(txt1);
				}
				else {
					var span = document.createElement('span');
					var a = document.createElement('a');
					var txt1 = document.createTextNode(' ');
					var txt2 = document.createTextNode(' ');
					pagination1.appendChild(span);
					span.appendChild(txt1);
					span.appendChild(a);
					span.appendChild(txt2);
					a.href = "#";
					a.onclick = pageClick_closure(i);
					a.innerHTML = newsSearch.cursor.pages[i].label;
				}
			}
			pagination2.appendChild(pagination1.cloneNode(true));
			// begin: Shouldn't be necessary .... but is ....
			var pLinks = pagination2.getElementsByTagName('a');
			for(var i=0; i<pLinks.length; i++) {
				pLinks[i].onclick = pageClick_closure(Number(pLinks[i].innerHTML-1));
			}
			//... end: unnecessary ...
		}
		else {
			pagination1Wrapper.style.display = 'none';
			pagination2Wrapper.style.display = 'none';
			searchResultsContainer.style.display = 'none';
			searchResultsNullContainer.style.display = 'block';
			nullSearchTerm.innerHTML = searchTerm;
		}
	}, null);

	var f = document.forms[0];
	f.onsubmit = function() {
		f.searchButton.onclick();
		return false;
	};
	f.searchButton.onclick = function() {
		newSearch = true;
		loading.style.display = 'block';
		newsSearch.setResultSetSize(8);//adjust to suit, 1-8
		searchTerm = this.form.searchTerm.value;
		newsSearch.execute(searchTerm);
	}
}
</script>
</head>

<body>

<div id="branding" style="float:left;"></div>
<form>
	<input name="searchTerm" value="New Mexico" />&nbsp;
	<button id="searchButton" type="button">Search</button>
</form>
<div>
	<div id="pagination1Wrapper">Page&nbsp;:&nbsp;<span id="pagination1"></span></div>
	<div id="searchResults"></div>
	<div id="searchResultsNull">No results found for <span id="nullSearchTerm"></span></div>
	<div id="loading">Loading ...</div>
	<!--div id="loading"><img src="images/spinner.gif" border="0" height="48" width="48"></div-->  <!-- alternative, "loading" indication (needs gif) -->
	<div id="pagination2Wrapper">Page&nbsp;:&nbsp;<span id="pagination2"></span></div>
</div>
</body>
</html>

Airshow

Edited 13 Years Ago by Airshow because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

youlichika 0 Light Poster · Answer 1 · 2010-12-17T15:50:01+00:00

Hi, @Airshow. But I still a newbie. I have no idea how to use `image{}`.
I try to use `newsSearch.image{}` at line 14, but nothing happened. I do not understand how to use `basic properties` in the article of 'News Search Developer's Guide'. I need help...

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2010-12-17T18:27:41+00:00

Can you post a working version of your code. The version posted above doesn't work at all.

Airshow

youlichika 0 Light Poster · Answer 3 · 2010-12-17T21:17:35+00:00

I'm sorry , I try to add the image{} by myself, maybe the last time I make some mistake and save the files without turn back.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>The Hello World of News Search</title> 
    <script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script> 
    <script language="Javascript" type="text/javascript">//<![CDATA[
      google.load('search', '1');
      var searchControl;
      function OnLoad() {
		google.search.Search.getBranding(document.getElementById("branding"));
        var newsSearch = new google.search.NewsSearch();
        newsSearch.setUserDefinedLabel("sport");
		
        searchControl = new google.search.SearchControl();
		searchControl.addSearcher(newsSearch);

        var options = new google.search.DrawOptions();
        options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
		searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
        searchControl.draw(document.getElementById("searchResults"), options);

        // Execute an inital search
        searchControl.execute("sport");
      }
      google.setOnLoadCallback(OnLoad, true);
    //]]>
    </script>
  </head> 
  <body style="font-family: Arial;border: 0 none;"> 
    <div id="branding"  style="float: left;"></div><br /> 
    <div id="content"><div id="searchResults">Loading...</div></div> 
  </body> 
</html>

youlichika 0 Light Poster · Answer 4 · 2010-12-18T04:19:30+00:00

Wow... @Airshow , this is a nice script, it works well. I can see news images now and it can skip to the page 3 at a start.
Wonderful, Thank you very much.
And have a nice weekend.

Some question about google news api search.

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers