tag:blogger.com,1999:blog-290723732024-03-13T11:30:00.442-07:00Google AJAX Search API BlogYour official source on the AJAX Search API.Unknownnoreply@blogger.comBlogger104125tag:blogger.com,1999:blog-29072373.post-67545653139774924542010-11-01T10:57:00.000-07:002020-07-15T16:43:21.238-07:00Fall HousekeepingWhen we <a href="http://googleajaxsearchapi.blogspot.com/2006_05_01_archive.html">introduced this blog</a> over four years ago, the term AJAX was only a year old, and Google had exactly one relevant API . Ajax has since become a mainstream part of the Web, and our family of APIs has grown. Like many growing families, we’ve accumulated a lot of cruft over the years, and have outgrown our first home. Time for some housekeeping.<br /><br /><span style="font-weight: bold;">API Documentation - Now easier to find and use</span><br />We’ve reorganized our documentation to make it easier to find what you’re looking for, based on what you want to do. We used to group our APIs based on technology - for instance, there were Google Data APIs and AJAX APIs. Now, you’ll see that each API has been given its own place, including its own documentation pages. This new documentation has been created from the ground up to provide a better experience for people coding against the APIs. We’ve also organized these more logically by product, such as moving the Book Search API into the <a href="http://code.google.com/apis/books/docs/js/devguide.html">Books family of APIs</a>, and added many more samples to help you get started.<br /><br /><span style="font-weight: bold;">A fond farewell</span><br />In the spirit of consolidation, we’ll be retiring this blog in favor of the <a href="http://googlecode.blogspot.com">Google Code Blog</a>. By concentrating on fewer blogs, we’ll be able to keep the blog fresher and help make sure that as wide an audience as possible is able to benefit from our posts. We’ll continue using tags, so that you can subscribe to your favorite APIs and focus on the content that most interests you (though we hope you’ll check in occasionally to see what new stuff you might be missing).<br /><br />Show your support for the Code blog by hopping over to read about the new <a href="https://code.google.com/apis/console/">Google APIs console</a> and <a href="http://code.google.com/apis/customsearch/v1/overview.html">Custom Search API</a>, and also say good-bye to the Web and Local Search APIs, which are being deprecated. Full post <a href="http://googlecode.blogspot.com/2010/11/introducing-google-apis-console-and-our.html">here</a>.<br /><br />Posted by: Adam Feldman, Product ManagerAdam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-51098068666779228992010-06-29T10:42:00.000-07:002020-07-15T16:43:20.987-07:00Increase site efficiency by retrieving just your preferred number of results<span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">When using any of the searchers available in the </span><a href="http://code.google.com/apis/ajaxsearch/"><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">Search API</span></a><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">, four results are returned by default. Historically, it has been possible to request a large set of eight results (or ten for filter Custom Search Engines), but that’s it. We understand that there are many use cases for this API, and some of them require a finer grain of control over the number of results displayed.</span><br /><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">For instance, with the JavaScript API, you can use <code>.setResultSetSize(1)</code> or <code>.setResultSetSize(6)</code> in addition to using the enum to request a <code>SMALL_RESULTSET</code> or <code>LARGE_RESULTSET</code>. When using the RESTful interface, you can also use any integer from 1 to 8 with the <code>rsz</code> parameter.</span><br /><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">With this addition, you can now request an arbitrary number of results, based on the exact number you need. By requesting only the results you’re going to show to the end-user, you can make your site or app more efficient. Also, this will control the cursor values that can be used to retrieve subsequent pages of results (and impact paging in the </span><a href="http://www.google.com/webelements/customsearch/"><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">Custom Search element</span></a><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">).</span><br /><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">For more details, check out the </span><a href="http://code.google.com/apis/ajaxsearch/documentation/reference.html#_class_GSearch"><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">documentation</span></a><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">, and if you have any questions, stop by our </span><a href="https://groups.google.com/group/google-ajax-search-api/browse_thread/thread/ccbcf6c42d5a78bc"><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">IRC channel</span></a><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> and </span><a href="http://groups.google.com/group/Google-AJAX-Search-API"><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">support forum</span></a><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">.</span>Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-44326813334884803322010-06-24T09:31:00.000-07:002020-07-15T16:43:20.920-07:00Diacritization added to the Google Language APIEarlier this year, we launched the Tashkeel (Diacritization) service on Google Labs. I'm pleased to announce that we've added an experimental Diacritization component to the <a href="http://code.google.com/apis/ajaxlanguage/documentation/">Google Language API</a>. This is a simple JSON API which you can use to add diacritic symbols to strings of Arabic text.<br /><br />To test it out, try clicking this link:<br /><a href="https://www.googleapis.com/language/diacritize/v1?lang=ar&message=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%20%D8%A7%D9%84%D8%B9%D8%A7%D9%84%D9%85&last_letter=false&callback=result">https://www.googleapis.com/language/diacritize/v1?lang=ar&message=مرحبا%20العالم&last_letter=false&callback=result</a><br /><br />A URL-encoded string is supplied as the message parameter, and it's returned by the API with diacritics included. These symbols are useful to people just learning the language and as an important pre-step for several text processing applications.<br /><br />Right now, the API only supports Arabic, but we're working on adding more languages, as well as a JavaScript API, so be sure to watch this blog for details. For more information, see the <a href="http://code.google.com/apis/ajaxlanguage/documentation/index.html#Diacritization">documentation</a> and our <a href="http://google-arabia.blogspot.com/2010/06/tashkeel-api-is-now-launched.html">post on the Google Arabia blog</a> (you may want to click "view post in English").<div><br /></div><div>Posted by: Adam Feldman, Product Manager and Jeff Scudder, Software Engineer</div>Jeff Scudderhttp://www.blogger.com/profile/10171738514445498413noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-21186229368041560342010-05-19T09:19:00.000-07:002020-07-15T16:43:20.662-07:00Google Feed API — Now with instant gratificationOne of Google's most popular APIs is our <a href="http://code.google.com/apis/ajaxfeeds/" id="fsa:" title="Feed API">Feed API</a>. This API is found all over the web, making any feed content available for developers to embed on their sites.<br /><br />A problem with embedding content in this manner is that there's no good way to make sure that your visitors see the freshest data, regardless of how long they stay on your page. Of course, you could try polling (also known as the "are we there yet?" method), repeatedly reloading the feed to see if the content has changed. This technique is generally a waste of bandwidth and doesn't always result in very low latency.<br /><br />Instead, we've got something better. I'm pleased to announce a preview of a brand new version of the Feed API, which includes push updates. With this new version, you'll be able to make the latest feed data available to your visitors - when it's available - without polling or requiring a page refresh. The best part is that this will work with any <a href="http://code.google.com/p/pubsubhubbub/" id="cjh6" title="PubSubHubbub">PubSubHubbub</a> enabled feed.<br /><br />Here's a short <a href="http://www.youtube.com/watch?v=9FhVKx6-C6w">demonstration</a> of what I'm talking about:<br /><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dzLjQtj_5M21WIAP7jtjWDJ2nqprw0XzWheiUiLzC8f63-L4Yj0Z2-EfP3Hr5pL0om2cikNT0ZTM6A' class='b-hbp-video b-uploaded' frameborder='0'></iframe><br /><br />As the video shows, this new version works much like the older Feed API. But instead of loading the existing feed data, you actually subscribe to the feed, and your callback is executed any time new feed data comes in.<br /><br />Let's see how this works. First, you must load the API (just like before, except now v2):<br /><pre>google.load("feeds", "2");</pre>Now, subscribe to the feed you're interested in and give the callback to be executed:<br /><pre>var feed = new google.feed.push.Feed("example.com/atom.xml");<br />feed.subscribe(myCallback);</pre>And, finally, you need to write the callback method that is run every time there's an update. In this example, we just display each new entry title as it comes in:<br /><pre>function myCallback() {<br /> var container = document.getElementById("feed");<br /> for (var i = 0; i < result.feed.entries.length; i++) {<br /> var div = document.createElement("div");<br /> div.appendChild(document.createTextNode(result.feed.entries[i].title));<br /> container.appendChild(div);<br /> }<br />}</pre>For a running example you can try out, check out the <a href="http://code.google.com/apis/ajax/playground/#include_historical_entries" id="nd9b" title="Code Playground">Code Playground</a>.<br /><br />We want to encourage you to experiment and build innovative applications with this new API - but since we don't know how it will be used, we can't quite open the floodgates yet. Therefore, we're initially making it available on a sign-up basis. Please fill out this <a href="http://code.google.com/apis/feed/push/" id="krb3" title="form">form</a>, telling us a little about how you'd like to use this API, and we'll try to give you access as soon as possible. Also, please remember that this is a <a href="http://code.google.com/labs/" id="cclc" title="Code Labs">Code Labs</a> version, and therefore it may change or be removed at any time.<br /><br />After we get some data from this experimental period we'll be able to open it up to everyone. Once you've begun experimenting, be sure to stop by our <a href="http://groups.google.com/group/Google-AJAX-Search-API" id="ctrm" title="support forum">support forum</a> or <a href="https://groups.google.com/group/google-ajax-search-api/browse_thread/thread/ccbcf6c42d5a78bc" id="u06n" title="IRC channel">IRC channel</a> to share your creations with everyone. If you'd like to learn more about how this API works, our <a href="http://code.google.com/events/io/2010/sessions/building-real-time-apps-app-engine-feed-api.html" id="ldxk" title="Google I/O session">Google I/O session</a> will be posted to YouTube soon.<br /><br /><br />Posted by: Brett Bavar, Software Engineer and Adam Feldman, Product ManagerAdam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-22690407638824801592010-04-25T22:58:00.000-07:002020-07-15T16:43:20.676-07:00Transliteration API adds 6 more languages<h4 id="internal-source-marker_0.7507443823917048"><span class="Apple-style-span" style="font-weight: normal; "><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">We're excited to announce the addition of 6 new languages (Greek, Russian, Serbian, Sanskrit, Amharic, Tigrinya) to the </span><a href="http://code.google.com/apis/ajaxlanguage/documentation/#Transliteration"><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">Transliteration API</span></a><span style="font-size: 10pt; font-family: Verdana; color: rgb(51, 51, 51); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">. Using Google Transliteration you can convert Roman characters to their phonetic equivalent in your language. Note that this is not the same as translation — it's the sound of the words that are converted from one alphabet to the other.</span></span></h4><a href="http://code.google.com/apis/ajaxlanguage/documentation/#Transliteration"><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">Transliteration API</span></a><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> allows this functionality to be available to all websites, which will make it easier for you to add transliteration capabilities to textfields on your webpages. Using this customizable API, you can enable users of your website to type </span><a href="http://code.google.com/apis/ajaxlanguage/documentation/#TransliterationSupportedLanguages"><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">19 languages</span></a><span style="font-size: 10pt; font-family: Verdana; color: rgb(51, 51, 51); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">. </span><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">For more information, please take a look at the</span><a href="http://code.google.com/apis/ajaxlanguage/documentation/#Transliteration"><span style="font-size: 10pt; font-family: Verdana; color: rgb(51, 51, 51); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> </span><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">documentation</span></a><span style="font-size: 10pt; font-family: Verdana; color: rgb(51, 51, 51); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> </span><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">and samples at our</span><a href="http://code.google.com/apis/ajax/playground/#transliterate_hindi"><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> </span><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">code playground</span></a><span style="font-size: 10pt; font-family: Verdana; color: rgb(51, 51, 51); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">. </span><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">If you're looking for a finer level of control on your web pages, also check out the </span><a href="http://code.google.com/apis/ajaxlanguage/documentation/#LowLevelTransliteration"><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">low-level interface</span></a><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> to transliteration, and the </span><a href="http://code.google.com/apis/ajaxlanguage/documentation/#FontRendering"><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">font rendering support APIs</span></a><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">.</span><br /><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="font-size: 10pt; font-family: Verdana; color: rgb(51, 51, 51); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">Google Transliteration is integrated into</span><a href="http://www.google.com/transliterate/about.html?v=1#products"><span style="font-size: 10pt; font-family: Verdana; color: rgb(51, 51, 51); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> </span><span style="font-size: 10pt; font-family: Verdana; color: rgb(85, 26, 139); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">several Google properties</span></a><span style="font-size: 10pt; font-family: Verdana; color: rgb(51, 51, 51); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> and we have</span><a href="http://code.google.com/p/t13n/"><span style="font-size: 10pt; font-family: Verdana; color: rgb(51, 51, 51); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> </span><span style="font-size: 10pt; font-family: Verdana; color: rgb(85, 26, 139); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">bookmarklets</span></a><span style="font-size: 10pt; font-family: Verdana; color: rgb(51, 51, 51); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> in addition to API to extend this capability to other websites. </span><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">Please try these out and</span><a href="http://groups.google.com/group/google-india-labs"><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> </span><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">let us know</span></a><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"> what you think and how you're using it.</span><br /><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">Posted by: Kuntal Loya and Ajay Somani, Software Engineers</span><br /><span style="font-size: 10pt; font-family: Verdana; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;"></span>Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-31539395061358437442010-04-13T18:19:00.000-07:002020-07-15T16:43:20.765-07:00Rendering custom data in the Custom Search elementLast year we introduced <a href="http://googlecustomsearch.blogspot.com/2009/05/enabling-rich-snippets-in-custom-search.html" id="a1_7" title="Rich Snippets">Rich Snippets in Custom Search</a>, allowing you to define your own custom attributes that we'll index and return with your custom search results. A few months later we showed you <a href="http://adsense.blogspot.com/2009/10/more-customized-search-experience-for.html" id="wbi4" title="how to render">how to render</a> some of these rich snippets in your <a href="http://www.google.com/webelements/customsearch/" id="w:t2" title="Custom Search element">Custom Search element</a>. Sure, this was a powerful way to let your visitors see thumbnails or interact with the results via <a href="http://googlecustomsearch.blogspot.com/2009/10/structured-custom-search.html" id="t:0p" title="actions">actions</a>. But we felt it was still too constrained. It is with great pleasure that today we're announcing that you now have full rendering control of all your metadata in the Custom Search element.<br /><br />What do I mean? If a picture is worth a thousand words, an example is worth a thousand pictures. Here's a fully customized element, showcasing results and metadata from <a href="http://www.scribd.com/" id="g-0j" title="Scribd.com">Scribd.com</a>:<br /><script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1'); google.setOnLoadCallback( function(){ var customSearchControl = new google.search.CustomSearchControl( '000458029060823693019:rufl7axsp9k'); google.search.Csedr.addOverride("mysite_"); customSearchControl.draw('cse'); customSearchControl.execute("cheetah"); }, true); </script> <div style="display:none"> <div id="mysite_thumbnail"> <div data-if="Vars.thumbnail" class="gs-image-box gs-web-image-box"> <a class="gs-image" data-attr="{href:url, target:target}"> <img class="gs-image" data-attr="{src:thumbnail.src, width:48, height: 48}" /> </a> </div> </div> <div id="mysite_webResult"> <div class="gs-webResult gs-result" data-vars="{longUrl:function() { var i = unescapedUrl.indexOf(visibleUrl); return i < 1 ? visibleUrl : unescapedUrl.substring(i);}}"> <table> <tr> <td valign="top"> <div data-if="Vars.richSnippet" data-attr="0" data-body="render('thumbnail',richSnippet,{url:unescapedUrl,target:target})"></div> </td> <td valign="top"> <div class="gs-title"> <a class="gs-title" data-attr="{href:unescapedUrl,target:target}" data-body="html(title)"></a> </div> <div class="gs-snippet" data-body="html(content)"></div> <div class="gs-visibleUrl gs-visibleUrl-short" data-body="longUrl()"></div> <div color="#676767" data-if="Vars.richSnippet && Vars.richSnippet.document"> <img data-attr="{src:Vars.richSnippet.document.filetypeImage}" /> By <span data-body="Vars.richSnippet.document.author"></span> - <span data-body="Vars.richSnippet.document.pageCount"></span> pages - <span data-body="Vars.richSnippet.document.viewCount"></span> views - last modified <span data-body="Vars.richSnippet.document.timeAgo"></span> </div> <div data-if="Vars.richSnippet && Vars.richSnippet.action" class="gs-actions" data-body="render('action',richSnippet,{url:unescapedUrl,target:target})"></div> </td> </tr> </table> </div> </div> </div> <div id="cse"></div><br /><div style="clear:both; margin-top: 2em;"><br />The results really jump out at you, huh? The thumbnails really help users see what they're looking at, but we've shown you those before. Same with the Download action links by each result. But never before could you include arbitrary, per-result metadata with your Google Custom Search results so easily. Notice the author, length, views and date information in each result. There's even an icon representing each result's document type.<br /><br />So how can you add this to your page? Let's take a look.<br /><br />First, you need to include custom attributes within your webpages, either via microformats, RDFa, or a special markup called PageMaps. A PageMap identifies specific attributes that Google recognizes and indexes, and then returns along with search results. Our prior blog post on <a href="http://googlecustomsearch.blogspot.com/2009/10/structured-custom-search.html" id="w3hp" title="Structured Custom Search">Structured Custom Search</a> tells you how to add PageMaps to your site. Please keep in mind that your site needs to be re-indexed, which can take some time. Therefore, your PageMaps might not show up immediately.<br /><br />Once your custom attributes have been indexed, you're ready to tell the element how to render them. If you don't already have the element on your page, you can add it with a few lines:<br /><pre><script src="http://www.google.com/jsapi" type="text/javascript"></script><br /><script type="text/javascript"><br />// Load the Search API<br />google.load('search', '1');<br /><br />// Set a callback to load the Custom Search Control when you page loads<br />google.setOnLoadCallback(<br /> function(){<br /> new google.search.CustomSearchControl('INSERT-YOUR-ID').draw('cse');<br /> },<br />true);<br /></script><br /><div id="cse"></div></pre>Here's the Scribd.com <a href="http://ajax-apis.appspot.com/html/csedr1.html" id="mqwq" title="sample">sample</a>, with only the default rich snippet inclusion:<br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_qU0w4wiK3GA/S8Ub3s_7EAI/AAAAAAAAACE/_aMDGr-7X_0/s1600/3.bmp"><img style="cursor:pointer; cursor:hand;width: 400px; height: 81px;" src="http://1.bp.blogspot.com/_qU0w4wiK3GA/S8Ub3s_7EAI/AAAAAAAAACE/_aMDGr-7X_0/s400/3.bmp" border="0" alt="" id="BLOGGER_PHOTO_ID_5459800767042621442" /></a></div><br />It looks okay, but let's make it better.<br /><br />We have to override the default rendering, by adding this line to the <code>onLoadCallback</code>:<pre>google.search.Csedr.addOverride("mysite_");</pre>Now, create a div to hold all of the rendering information - put it right above the div that the element uses:<pre><div style="display:none"><br /></div><br /></pre>Okay, now that everything's set up, it's time for the good part. First off, let's try shrinking the thumbnails a bit. Inside the <code>div</code> that was just added above, and tell the element to render the images at 48x48 pixels:<pre><div id="mysite_thumbnail"><br /><div data-if="Vars.thumbnail" class="gs-image-box gs-web-image-box"><br /> <a class="gs-image" data-attr="{href:url, target:target}"><br /> <img class="gs-image" data-attr="{src:thumbnail.src, width:48, height: 48}"/><br /> </a><br /></div><br /></div></pre>This replaces the default thumbnail rendering code with a similar version that sets the image dimensions directly.<br /><br />Here's the same <a href="http://ajax-apis.appspot.com/html/csedr2.html" id="nz0w" title="sample">sample</a> with the above code added:<br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_qU0w4wiK3GA/S8Ub3f3HYrI/AAAAAAAAAB8/BS9qknKss0I/s1600/2.bmp"><img style="cursor:pointer; cursor:hand;width: 400px; height: 62px;" src="http://4.bp.blogspot.com/_qU0w4wiK3GA/S8Ub3f3HYrI/AAAAAAAAAB8/BS9qknKss0I/s400/2.bmp" border="0" alt="" id="BLOGGER_PHOTO_ID_5459800763516019378" /></a></div>Now it's time to add the new content and tweak the rendering of the basic content, too:<pre><div id="mysite_webResult"><br /><div class="gs-webResult gs-result"<br /> data-vars="{longUrl:function() {<br /> var i = unescapedUrl.indexOf(visibleUrl);<br /> return i < 1 ? visibleUrl : unescapedUrl.substring(i);}}"><br /><br /> <table><br /> <tr><br /> <td valign="top"><br /> <div data-if="Vars.richSnippet" data-attr="0"<br /> data-body="render('thumbnail',richSnippet,{url:unescapedUrl,target:target})"></div><br /> </td><br /><br /> <td valign="top"><br /> <div class="gs-title"><br /> <a class="gs-title" data-attr="{href:unescapedUrl,target:target}"<br /> data-body="html(title)"></a><br /> </div><br /> <div class="gs-snippet" data-body="html(content)"></div><br /> <div class="gs-visibleUrl gs-visibleUrl-short" data-body="longUrl()"></div><br /> <div style="& Vars.richSnippet.document"><br /> <img data-attr="{src:Vars.richSnippet.document.filetypeImage}"><br /> By <span data-body="Vars.richSnippet.document.author"></span> -<br /> <span data-body="Vars.richSnippet.document.pageCount"></span> pages -<br /> <span data-body="Vars.richSnippet.document.viewCount"></span> views<br /> - last modified <span data-body="Vars.richSnippet.document.timeAgo"></span><br /> </div><br /><br /> <div data-if="Vars.richSnippet && Vars.richSnippet.action" class="gs-actions"<br /> data-body="render('action',richSnippet,{url:unescapedUrl,target:target})"></div><br /> </td><br /> </tr><br /> </table><br /></div><br /></div></pre>Voila! The <a href="http://ajax-apis.appspot.com/html/csedr3.html" id="y0yr" title="sample">sample</a> is now complete, and here's how it looks:<br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_qU0w4wiK3GA/S8Ub27fq5XI/AAAAAAAAAB0/ZOgrk9kBPUg/s1600/1.bmp"><img style="cursor:pointer; cursor:hand;width: 400px; height: 83px;" src="http://1.bp.blogspot.com/_qU0w4wiK3GA/S8Ub27fq5XI/AAAAAAAAAB0/ZOgrk9kBPUg/s400/1.bmp" border="0" alt="" id="BLOGGER_PHOTO_ID_5459800753754006898" /></a></div><br />This example is a bit more complex. It shows how to use the <code>render()</code> function to call other code, and also how you can include any JavaScript logic. You can even define internal functions, such as <code>longUrl()</code>.<br /><br />Didn't quite catch all of that or want to do even more? Check out the <a href="http://code.google.com/apis/ajaxsearch/documentation/customsearch/rendering.html" id="w3.g" title="documentation">documentation</a>.<br /><br />The best part of announcing new features like this is seeing what innovative implementations people come up with. Don't keep us waiting - come show off your handiwork in our <a href="http://groups.google.com/group/Google-AJAX-Search-API" id="n6jj" title="support forum">support forum</a> or <a href="https://groups.google.com/group/google-ajax-search-api/browse_thread/thread/ccbcf6c42d5a78bc" id="u_it" title="IRC channel">IRC channel</a>!</div><div style="clear:both; margin-top: 2em;"></div>Posted by: David Gibson, Software Engineer and Adam Feldman, Product ManagerAdam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-79782818924051848012010-04-12T15:38:00.000-07:002020-07-15T16:43:21.431-07:00Restricting by licenses now available in the Image Search APII'm always amazed at the creative ways developers use Google's APIs. I'm always pleased when we are able to add a new feature to the API, as I know that someone, somewhere will do something cool and unexpected with it. The latest addition is to the Image Search API. You can now restrict results by various licenses applied to each image.<br /><br />There are two different ways to use this feature. In the JavaScript API, you can restrict your results to one of four common licenses (just like on <a href="http://images.google.com/" id="k3.3" title="Google Image Search">Google Image Search</a>). This is done using the <a href="http://code.google.com/apis/ajaxsearch/documentation/reference.html#_class_GimageSearch" id="mi-l" title="setRestriction">setRestriction</a> method, after creating your Image Search searcher. Here's how to restrict to images which have been labeled for reuse with modification:<br /><pre><div class="udiff"><span class="dump">var searcher = new google.search.ImageSearch();</span></div><a id="0" name="0"></a><div class="udiffremove"><a id="0" name="0"></a><div class="udiffadd"><span class="dump">searcher.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,</span></div><div class="udiffadd"><span class="dump"> google.search.ImageSearch.RIGHTS_MODIFICATION);</span></div></div></pre><div class="udiffadd"><span class="dump">You can experiment with a <a href="http://code.google.com/apis/ajax/playground/#rights_restrict" id="g4ab" title="live example">live example</a> of this in our Code Playground.<br /><br />If you're using the JSON API, you can use the <a id="0" name="0"></a><span class="dump" id="bh3q"><a href="http://code.google.com/apis/ajaxsearch/documentation/reference.html#_fonje_image" id="dvo4" title="as_rights">as_rights</a></span> optional parameter to tell the API to include or exclude certain attributions. To perform the same restriction as above, try adding this to your requests:<pre>&as_rights=<br /> (cc_publicdomain|cc_attribute|cc_sharealike|cc_noncommercial).-(cc_nonderived)</pre></span></div>For a full list of the attribute combinations for each type of license, perform an appropriately restricted search on Google Image Search's <a href="http://images.google.com/advanced_image_search" id="t9_h" title="advanced search">advanced search</a> and take a look at the as_rights parameter in the URL on the results page.<br /><br /><div class="udiffadd"><span class="dump">Note: Images returned with this filter may still have conditions on the license for use. Please remember that violating copyright is strictly prohibited by the API <a href="http://code.google.com/apis/ajaxsearch/terms.html" id="v-57" title="Terms of Use">Terms of Use</a>. For more details, see <a href="http://www.google.com/support/websearch/bin/answer.py?answer=29508" id="karv" title="this article">this article</a>.</span></div><br />Please come visit our <a href="https://groups.google.com/group/google-ajax-search-api/browse_thread/thread/ccbcf6c42d5a78bc" id="oq.e" title="IRC channel">IRC channel</a> and <a href="http://groups.google.com/group/Google-AJAX-Search-API" id="pj6e" title="support forum">support forum</a> and let us know how you've used this feature in your site or app!Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-77166607155130688172010-04-08T10:15:00.000-07:002020-07-15T16:43:21.394-07:00Media RSS support added to the Feed APIMore and more sites are adding support for <a href="http://video.search.yahoo.com/mrss" id="y.63" title="MediaRSS">MediaRSS</a> to include images, videos and other types of multimedia files. Today, we're announcing that the <a href="http://code.google.com/apis/ajaxfeeds/" id="jdkc" title="Google Feed API">Google Feed API</a> now includes this metadata in the response. This content is now included in the JSON and XML results returned by the API. For more details on the result format, check out the <a href="http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON" id="upd7" title="documentation">documentation</a>.<br /><br />Please note that complete MediaRSS content is generally only available in feed entries newer than February 1, 2010.<br /><br />Questions? Comments? If you're attending <a href="http://code.google.com/events/io/2010/" id="jfzb" title="Google I/O">Google I/O</a>, come meet the team and learn more about the Feed API at our <a href="http://code.google.com/events/io/2010/officehours.html" id="humm" title="Office Hours">Office Hours</a>. If you can't wait that long, there's always our <a href="https://groups.google.com/group/google-ajax-search-api/browse_thread/thread/ccbcf6c42d5a78bc" id="ztof" title="IRC channel">IRC channel</a> and <a href="http://groups.google.com/group/Google-AJAX-Search-API" id="vmrt" title="support forum">support forum</a>.Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-80875716743020482092010-03-31T19:25:00.000-07:002020-07-15T16:43:21.457-07:00Helping you help us help youAs I mentioned in a <a href="http://googleajaxsearchapi.blogspot.com/2010/01/new-parameter-for-server-side-api-calls.html" id="kbsz" title="previous post">previous post</a>, we've taken several measures to help differentiate legitimate API traffic from bad requests. To help us serve you better, I'm pleased to announce a new way for you to identify your request as harmful. Beginning today, please include the <code>&evil=true</code> parameter in your API requests if you're one of the bad guys.<br /><br />How does this work in practice? Here's an <a href="http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=april+fools+day&evil=true" id="nzq6" title="example query">example query</a> which lets Google know that you're intending to use the API for nefarious purposes. This way, we can respond to your request in the appropriate manner as efficiently as possible.<br /><br />Note: In order to encourage adoption as quickly as possible, we are requiring all bad requests to include the <a href="http://google.com/search?q=evil+bit" id="ev96" title="evil bit">evil bit</a> by the end of today, April 1.Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-19539718721290132662010-03-16T10:08:00.000-07:002020-07-15T16:43:20.623-07:00Search Form and Results on Two Different Pages<p>One of the major advantages of an Ajax style search box is that users can perform their queries and get their results without leaving the page. However, some webmasters prefer that their users go to a separate results page after they enter a search. The Ajax search library supports this "two-page" use case as well, and since this is a question that we see from time to time we've set up a simple <a href="http://ajax-apis.appspot.com/two-page-search">demo site</a>.<p><p>To create this page we wrote a simple form in HTML and added JavaScript to add the "Google Custom Search" branding in the search box. View source to see all the details.</p><p>When the user submits the form, they are taken to a results page which has the following HTML structure:</p><pre> <div id="results">Loading...</div></pre><p>We then tell the search library to draw its search box and results in the div we just created:</p><pre> // Draw the control in content div<br /> customSearchControl.draw('results');</pre><p>Since the user came to this page from our search form, their query terms are now part of the page URL, so all we need to do now is extract them and execute their query:</p><pre> function getQuery() {<br /> var url = '' + window.location;<br /> var queryStart = url.indexOf('?') + 1;<br /> if (queryStart > 0) {<br /> var parts = url.substr(queryStart).split('&');<br /> for (var i = 0; i < parts.length; i++) {<br /> if (parts[i].substr(0, 1) == 'q') {<br /> return unescape(parts[i].split('=')[1].replace(/\+/g, ' '));<br /> }<br /> }<br /> }<br /> return '';<br /> }<br /><br /> // See the source code of the results page for full details.<br /><br /> ...<br /> <br /><br /> // Run a query<br /> customSearchControl.execute(getQuery());</pre><p>There is one more optional setting that you might be interested in. The second page which we've just created contains a search box that will allow the user to perform searches on this same page. If you would prefer for the search box not to appear on this results page we can add the following HTML to the page:</p><pre> <input style="display:none" id="hidden-input" /></pre><p>We hide the input box because we don't want the Ajax search library to render the usual query input box, just to show the results. We then tell the search library to draw its search box in the hidden input, making it invisible:</p><pre> // Set drawing options to use our hidden input box.<br /> var drawOptions = new google.search.DrawOptions();<br /> drawOptions.setInput(document.getElementById('hidden-input'));<br /><br /> // Change the draw call to include our new options.<br /> customSearchControl.draw('results', drawOptions);</pre><p>To see an example of a two-page search setup with a hidden query input, visit <a href="http://ajax-apis.appspot.com/two-page-search-alt">this page</a>.</p><p>To learn more about the <a href="http://code.google.com/apis/customsearch/">Google Custom Search API</a>, read our <a href="http://code.google.com/apis/customsearch/docs/dev_guide.html">documentation</a>. If you run into any problems while setting this up, post your question in our <a href="http://groups.google.com/group/google-ajax-search-api">discussion group</a> or hop on our <a href="http://webchat.freenode.net/?channels=googleajaxapis">IRC channel</a>.</p>Jeff Scudderhttp://www.blogger.com/profile/10171738514445498413noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-8887164447111045992010-03-08T10:55:00.000-08:002020-07-15T16:43:21.537-07:00Finding Images on a Specific Site<p>One feature of the <a href="http://code.google.com/apis/ajaxsearch/documentation/">AJAX Image Search API</a> that you might find useful is the ability to retrieve only the images which are visible on a specific website. For example, you could add a search box that allows people to search through just the images on your own site or you could create a slideshow which shows images from your favorite site.</p><p>To specify a site, use the <code>setSiteRestriction</code> method on an <code>ImageSearch</code> object. Here is a simple example:</p><p><a href="http://code.google.com/apis/ajax/playground/#site_restrict">http://code.google.com/apis/ajax/playground/#site_restrict</a></p><p>We can do more than just provide a site-specific image search box, we could also use the search results in a unique way. For example, we could create a slideshow which shows images which match our desired keyword and appear on a specific site. For this example, let's create a simple slideshow that displays images from <a href="http://nasa.gov">nasa.gov</a>.</p><pre>var imageIndex = 0;<br />var images;<br /><br />function nextImage() {<br /> imageIndex++;<br /> if (imageIndex >= images.length) {<br /> imageIndex = 0;<br /> }<br /><br /> var imageContainer = document.getElementById(<br /> 'image-container');<br /> imageContainer.src = images[imageIndex].tbUrl;<br />}<br /><br />function searchComplete(searcher) {<br /> if (searcher.results && searcher.results.length > 0) {<br /> var contentDiv = document.getElementById(<br /> 'content-slideshow');<br /> contentDiv.innerHTML = '';<br /><br /> var imageTag = document.createElement('img');<br /> imageTag['id'] = 'image-container';<br /> imageTag['src'] = searcher.results[imageIndex].tbUrl;<br /> images = searcher.results;<br /><br /> contentDiv.appendChild(imageTag);<br /><br /> // Switch to the next image every 5 seconds.<br /> <strong>setInterval("nextImage();", 5000);</strong><br /> }<br />}<br /><br />function slideshowOnLoad() {<br /> var imageSearch = new google.search.ImageSearch();<br /> <strong>imageSearch.setSiteRestriction('nasa.gov');</strong><br /> imageSearch.setSearchCompleteCallback(<br /> this, searchComplete, [imageSearch]);<br /> <strong>imageSearch.execute('supernova');</strong><br />}<br /><br />google.setOnLoadCallback(slideshowOnLoad);</pre><p>In the above samples, there are three lines I'd like to call your attention to. The first line to note is the <code>imageSearch.execute</code> at the bottom, here we've entered the keywords that our slideshow images should be related to. Next we restrict the site to <a href="http://nasa.gov">nasa.gov</a> using <code>imageSearch.setSiteRestriction</code>. Lastly, we call <code>setInterval</code> once we receive the results of our search for images. The <code>setInterval</code> call tells the browser to run our <code>nextImage</code> function every five seconds.</p><p>Here are the two samples we've talked about in action:</p><div id='search-demo'></div><div id='slideshow-demo' style="height: 350px"></div><p>The site restriction can also include a path within a website. For example you could do <code>setSiteRestriction(<br />'http://www.flickr.com/photos/<username>')</code> to search the photos that have been posted by a particular user on <a href="http://flickr.com">flickr</a>.</p><p>To learn more about some other neat features of the AJAX Image Search API take a look at our <a href="http://code.google.com/apis/ajax/playground/#site_restrict">code playground samples</a> and <a href="http://code.google.com/apis/ajaxsearch/documentation/reference.html#_class_GimageSearch">documentation</a>. For questions on this and other topics, drop us a line in the <a href="http://groups.google.com/group/google-ajax-search-api">discussion group</a>.</p><script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q" type="text/javascript"></script><script type="text/javascript">google.load("search","1"); function onLoad(){var searchControl=new google.search.SearchControl;var imageSearch=new google.search.ImageSearch;imageSearch.setSiteRestriction("nasa.gov");searchControl.addSearcher(imageSearch);searchControl.draw(document.getElementById("search-demo"));searchControl.execute("supernova");var imageSearch=new google.search.ImageSearch;imageSearch.setSiteRestriction("nasa.gov");imageSearch.setSearchCompleteCallback(this,searchComplete,[imageSearch]);imageSearch.execute("supernova")}var imageIndex=0; var images;function nextImage(){imageIndex++;if(imageIndex>=images.length)imageIndex=0;var imageContainer=document.getElementById("image-container");imageContainer.src=images[imageIndex].tbUrl} function searchComplete(searcher){if(searcher.results&&searcher.results.length>0){var contentDiv=document.getElementById("slideshow-demo");contentDiv.innerHTML="";var imageTag=document.createElement("img");imageTag["id"]="image-container";imageTag["src"]=searcher.results[imageIndex].tbUrl;images=searcher.results;contentDiv.appendChild(imageTag);setInterval("nextImage();",3E3)}}google.setOnLoadCallback(onLoad);</script>Jeff Scudderhttp://www.blogger.com/profile/10171738514445498413noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-59038022901983348012010-01-19T13:10:00.000-08:002020-07-15T16:43:21.122-07:00New Parameter for Server Side API Calls<div>Over the last several years, you've helped make <a href="http://code.google.com/apis/ajax/">Google's AJAX APIs</a> incredibly successful. Not surprisingly, however, there are some people who try to take advantage of these free APIs by using them in ways that they were not designed for, abuse which is prohibited by the <a href="http://code.google.com/apis/ajaxsearch/terms.html">Terms of Use</a>. Specifically, some servers are making countless requests - requests not made on the behalf of an end-user - in an attempt to scrape data from the APIs.</div><div><br /></div><div>To help us discourage this behavior without affecting legitimate developers, we're adding a new parameter to the RESTful interface, userip. With this parameter, developers have the option of supplying the IP address of the end-user on whose behalf they are making the API request. Doing so will help us distinguish this legitimate server-side traffic from the more abusive scraping in which there are no end-users.</div><div><br /></div><div>Use of this new parameter is *not* required. However, if it is not included with server-side requests, those requests are more likely to be interpreted and automatically blocked as abuse, especially in situations where a server is sending a high volume of traffic to the API. Additional safeguards you can take include setting setting a valid HTTP referer (as required by our Terms of Use) and using an <a href="http://code.google.com/apis/ajaxsearch/signup.html">API key</a>. These additional measures will help us contact you in case there are problems with your website or application (sometimes a programming error results in massive traffic, forcing us to block your access if we are unable to contact you). In choosing to utilize this parameter, please be sure that you're in compliance with any local laws, including any laws relating to disclosure of personal information being sent.</div><div><br /></div><div>Check the <a href="http://code.google.com/apis/ajaxsearch/documentation/reference.html#_intro_fonje">documentation</a> for usage of the new parameter. We'd love to hear any comments, questions or problems you're having in the <a href="http://groups.google.com/group/Google-AJAX-Search-API">support forum</a>.</div>Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-44140845351379019992009-10-12T11:23:00.000-07:002020-07-15T16:43:20.907-07:00Web Search in Your Country<p>I am happy to announce the addition of the ability to scope your searches to a specific country in the AJAX Web Search API. Now, if you have a lot of visitors in Madagascar, you can make sure that the search results displayed on your site are tailored to them. All it takes is a small change to your code.</p><p>There are three possible ways to implement, depending on how you're using the API:</p><ol><li> If you use the loader, you can simply load jsapi on the domain you're interested in (<a href="http://code.google.com/apis/ajax/playground/#set_google_locale_using_hostname">example</a>), such as:<br /><pre><script src="http://www.google.es/jsapi"></script></pre></li><br /><li>Alternately, you can set this with the web search object's .setRestriction method (<a href="http://code.google.com/apis/ajax/playground/#set_google_locale_restriction">example</a>): <br /><pre>var ws = new google.search.WebSearch();<br />ws.setRestriction(google.search.Search.RESTRICT_EXTENDED_ARGS,<br /> {'gl' : 'es'});</pre></li><li>Finally, if you're using the RESTful interface, all you have to do is append a "gl" URL parameter to your request: <br /><pre><a href="http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=flowers&gl=fr">http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=flowers&gl=fr</a></pre></li></ol><p>Most valid <a href="http://en.wikipedia.org/wiki/ISO_3166-1">country codes</a> will work, as long as Google has a home page on that country's top level domain (e.g. <a href="http://www.google.es/">google.es</a>). If you use an invalid or unsupported country code, you'll get an error message letting you know.</p><p>We're excited to bring you this addition to the API, and look forward to seeing the innovative ways in which you use this new feature to improve your users' experience. Please drop us a line with your thoughts (or questions) on our <a href="http://groups.google.com/group/google-ajax-search-api">discussion group</a>.</p>Jeff Scudderhttp://www.blogger.com/profile/10171738514445498413noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-85240491494005842009-09-28T09:42:00.000-07:002020-07-15T16:43:21.509-07:00Google Chrome Frame Ajax Detection<p>In partnership with the Google Chrome Frame team, we are making available a library to allow your web application to detect the presence of <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a>. We on the Ajax team are excited about the possibilities of this add-on improving JavaScript performance and enabling some of the new features available in HTML5. If you have a web application which makes use of these new features, you can use this library to prompt the user to install Google Chrome Frame, or recognize when a user has just installed it. The library provides granular controls so that you can create the user experience which best suits your site.</p><p>As a short example, I've created the following <a href="http://ajax-apis.appspot.com/gcfcheck-demo">simple demo</a> which just detects whether Google Chrome Frame is installed or not with an alternate message if you are in a browser for which this plugin is not available.</p><script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load('chrome-frame', '1');function notNeeded() {var answerDiv = document.getElementById('answer');answerDiv.innerHTML = 'Oh it looks like maybe you don\'t need Google Chrome Frame.';}; function onLoad() {var browserCheck = setTimeout("notNeeded();", 250); function missing() {var answerDiv = document.getElementById('answer'); answerDiv.innerHTML = 'Oh, sorry, it is not installed.'; if (browserCheck != null) {clearTimeout(browserCheck);};}; function found() {var answerDiv = document.getElementById('answer');answerDiv.innerHTML = 'Hooray! You have Google Chrome Frame installed.'; if (browserCheck != null) {clearTimeout(browserCheck);}};if (CFInstall.isAvailable()) {found();};CFInstall.check({'onmissing': missing,'preventPrompt': true});};google.setOnLoadCallback(onLoad);</script><p><div>Do you have Google Chrome Frame installed?<div id="answer">We're checking on that now.</div></div></p><br /><p>Ben Lisbakken has also added detection for Google Chrome Frame to the <a href="http://code.google.com/apis/ajax/playground/">Ajax Playground</a>. If you <a href="http://code.google.com/p/google-ajax-examples/source/browse/trunk/interactive_samples/index.html">view source</a> on the page you can see another example of a customized CFInstall.check implementation which is designed to fit the page.</p><p>For more details on the Google Chrome Frame Ajax API, see the <a href="http://code.google.com/chrome/chromeframe/developers_guide.html#CFInstall_check_Options">documentation</a> and for questions, please visit the <a href="http://groups.google.com/group/google-chrome-frame">discussion group</a>.</p>Jeff Scudderhttp://www.blogger.com/profile/10171738514445498413noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-91881323112477856782009-09-15T10:14:00.000-07:002020-07-15T16:43:21.565-07:00More Languages, More Keyboards<p>The language APIs keep right on trucking, <a href="http://googleblog.blogspot.com/2009/08/google-translate-now-speaks-51.html">released recently</a> are a handful of new translation languages, pairs, and keyboard layouts.</p><p>We've added the ability to use machine translation to or from the following languages:</p><ul><li>Afrikaans</li><li>Belarusian</li><li>Icelandic</li><li>Irish</li><li>Macedonian</li><li>Malay</li><li>Persian</li><li>Swahili</li><li>Welsh</li><li>Yiddish</li></ul><p>With the addition of the above the total count for language pair combination comes to a mind boggling 2550 pairs. In addition, we find the above additions exciting because, for the first time, <a href="http://google-africa.blogspot.com/2009/09/google-translate-now-available-for.html">African languages</a> are available through the API and we now support all <a href="http://europa.eu/languages/en/home">23 Official European Union languages</a>.<p><p>A few months ago we <a href="http://googleajaxsearchapi.blogspot.com/2009/06/introducing-virtual-keyboard-api.html">announce our virtual keyboard API</a> and this month we've added nine new <a href="http://code.google.com/apis/ajaxlanguage/documentation/#KeyboardSupportedLayout">keyboard layouts</a>:</p><ul><li>Bulgarian</li><li>Czech</li><li>Greek</li><li>Hebrew</li><li>Hungarian - 101 layout</li><li>Slovak</li><li>Slovenian</li><li>Turkish - Q layout</li><li>Ukrainian - 101 layout</li></ul><p>Here's a simple example of using the <a href="http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGNKu1gEM">Slovak keyboard</a> layout.</p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_WhF8No7Ryt4/Sq_MX1GQZ0I/AAAAAAAAABM/IeuS-BMn-3s/s1600-h/SlovakKeyboard.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 295px;" src="http://1.bp.blogspot.com/_WhF8No7Ryt4/Sq_MX1GQZ0I/AAAAAAAAABM/IeuS-BMn-3s/s400/SlovakKeyboard.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5381744789493409602" /></a>Jeff Scudderhttp://www.blogger.com/profile/10171738514445498413noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-77967102360968110462009-08-10T10:21:00.000-07:002020-07-15T16:43:21.406-07:00Custom Search with Custom Style: Peanut Butter and Jelly<p>Creating a custom look and feel for your website can have significant benefits in everything from improving usability to setting a professional or playful tone for your website. In many cases, letting users search the content of your site and related sites gets them the information they need faster. After all, a speedy user experience is a happy user experience. Here are some examples of how Custom Search and custom styles are as easy (and delicious) as peanut butter and jelly.</p><p>We start with a <a href="http://www.google.com/webelements/customsearch/">Custom Search Element</a>, which uses the <a href="http://code.google.com/apis/ajaxsearch/documentation/customsearch/index.html">CustomSearchControl</a> to add a <a href="http://www.google.com/coop/cse/">Custom Search Engine</a> to my web page. If you've never used a Custom Search engine before, I think you'll find a lot to love: it uses Google's search technology to include a specific group of websites for indexing, and you can <a href="https://www.google.com/adsense/static/en_US/Afs.html">share in ad revenue</a>.</p><p>One of the many benefits of using the AJAX Search APIs to dynamically add search capabilities to your web pages is that you can also control the look and feel of the search input and results by using open web standards like cascading style sheets (CSS). When you combine this styling with Custom Search, you can create a seamless search experience for your users.</p><p>You can begin by changing the search input box (dynamically added to your page by default) to use an input box that you've placed on the page wherever you like.</p><pre>// Set drawing options to use my text box<br />// as input instead of having the library create one.<br />var drawOptions = new google.search.DrawOptions();<br />drawOptions.setInput(<br /> document.getElementById('query_input'));<br /><br />// Draw the control in content div<br />customSearchControl.draw(<br /> 'results', drawOptions);</pre><p>With the above changes we get a page that <a href="http://ajax-apis.appspot.com/cse-less-style">looks like this</a>:</p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_WhF8No7Ryt4/SoBbSTlOPjI/AAAAAAAAAAc/0KGEys_H9nA/s1600-h/ajax1.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 194px;" src="http://2.bp.blogspot.com/_WhF8No7Ryt4/SoBbSTlOPjI/AAAAAAAAAAc/0KGEys_H9nA/s400/ajax1.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5368391125877800498" /></a><p>Now that we're able to use a Custom Search box (look ma, no button push required!) we can add CSS rules to change fonts, colors, and more in the search results.</p><p>For example, see: <a href="http://ajax-apis.appspot.com/cse-style">http://ajax-apis.appspot.com/cse-style</a> which has CSS rules that effect the styling of the search results and compare it to our <a href="http://ajax-apis.appspot.com/cse-less-style">first step</a> which uses the default styles.</p><p>Take a look at the CSS rules to get an idea for how this works, and how you can do custom styling to fit your own website.</p><p>We can change the font and add a border around each search result:</p><pre>#results .gsc-results {<br /> /* Sets font for titles, snippets, and URLs. */<br /> font-family: arial, helvetica, sans-serif;<br />}<br /><br />#results .gsc-result {<br /> position: relative;<br /> border: 1px solid #eee;<br /> border-left: 10px solid #eee;<br /> padding: 8px 8px 8px 20px;<br /> border-radius: 8px;<br /> -webkit-border-radius: 8px;<br /> -moz-border-radius: 8px;<br />}</pre><p>We can also change the style of a single result when the user moves the mouse cursor over it:</p><pre>#results .gsc-result:hover {<br /> border: 1px solid #888;<br /> border-left: 10px solid #888;<br />}</pre><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_WhF8No7Ryt4/SoBbb6aJxwI/AAAAAAAAAAk/MQVBCapHW6k/s1600-h/ajax2.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 225px;" src="http://3.bp.blogspot.com/_WhF8No7Ryt4/SoBbb6aJxwI/AAAAAAAAAAk/MQVBCapHW6k/s400/ajax2.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5368391290919175938" /></a><p>These are just a couple of examples. Since the CSS styling is handled by the browser, you can use any supported CSS rules to select portions of the search results. For more information on the result HTML structure and the CSS classes you may want to select in your own customizations, see the documentation on <a href="http://code.google.com/apis/ajaxsearch/documentation/reference.html#_intro_GResultCss">styling AJAX Search results</a>.</p>Jeff Scudderhttp://www.blogger.com/profile/10171738514445498413noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-19275448423227584762009-07-20T17:59:00.000-07:002020-07-15T16:43:20.610-07:00Behind the scenes with two AJAX API DevelopersWe enjoy featuring real-world applications that show how versatile the AJAX APIs can be. Below we're highlighting two very different apps and the developers who built them:<br /><br /><span style="font-weight: bold;">AroundMe</span><br />AroundMe is an iPhone application where the AJAX APIs are central to the user experience. Specifically, the app utilizes the Local Search API to enable users to find information about their surroundings. In the videos below, Marco Pifferi (the developer behind AroundMe) gives a demo of his app, his thoughts on using the AJAX APIs, and tips for integrating them in mobile apps.<br /><br /><object width="480" height="385"><param name="movie" value="http://www.youtube.com/p/199B096EAD8832EC&hl=en&fs=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/p/199B096EAD8832EC&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object><br /><br /><span style="font-weight: bold;">Mibbit</span><br />Mibbit is a web-based chat application that uses the AJAX APIs to enhance the chat experience. The language APIs help users to translate their messages into a number of different languages. Mibbit also uses the Maps API and YouTube API to display embedded maps or YouTube videos if a user includes a Maps or YouTube URL in their chat. Jimmy Moore, creator of Mibbit, walks through Mibbit in his video below.<br /><br /><object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/nlpsQYKLLv0&hl=en&fs=1&"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/nlpsQYKLLv0&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object><br /><br />Do you have a great app that uses the AJAX APIs? <a href="http://code.google.com/videos/submit.html">Submit a video</a> about it and we may feature it on this blog. Questions? Stop by our <a href="http://groups.google.com/group/Google-AJAX-Search-API">support forum</a> or <a href="http://www.mibbit.com/?server=irc.freenode.net&channel=%23googleajaxapis">IRC channel</a>.Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-60515748800898443602009-06-22T12:07:00.000-07:002020-07-15T16:43:21.135-07:00Introducing the Virtual Keyboard API<p> It is often difficult for Internet users to input text in many non-Latin script-based languages for a variety of reasons. The correct keyboard layout may not be installed on the computer they're using - sometimes such a layout may not be well developed or widely available. This poses a challenging problem for web developers because there is no way they can ensure that their users have access to this very basic input technology. Our <a href="http://code.google.com/apis/ajaxlanguage/documentation/#Transliteration" id="fp3y" title="Transliteration API">Transliteration API</a> can help, but requires that the user know multiple languages.<br /><br />Right on the heels of introducing support for <a title="translating Persian (Farsi)" href="http://googleblog.blogspot.com/2009/06/google-translates-persian.html" id="rpfm">translating Persian (Farsi)</a>, we've added a new <a href="http://code.google.com/apis/ajaxlanguage/documentation/#Keyboard" id="h8oa" title="Virtual Keyboard API">Virtual Keyboard API</a> into the <a href="http://code.google.com/apis/ajaxlanguage/" id="okla" title="Google AJAX Language API">Google AJAX Language API</a> to further assist with text input. With this, developers can help their users input text without relying on the right software being installed on the computer they happen to be using.<br /><br />It couldn't be easier to get this on your page. Simply load the right package:<pre class="code">google.load("elements", "1", {<br /> packages: "keyboard"<br />});</pre><br />Then create a keyboard, specifying the keyboard layout and text field to bind to:<pre class="code">var kbd = new google.elements.keyboard.Keyboard(<br /> [google.elements.keyboard.LayoutCode.Arabic],<br /> ['myTextArea']);</pre><br />And here's what it looks like:</p><div id="mb4b" style="text-align: left;"> <img src="https://docs.google.com/a/google.com/File?id=chj3qbn7_3ccmdkrkf_b" style="width: 402px; height: 182px;" /> </div><p>This gives you the control to provide a better user experience, even for multilingual websites. By creating multiple keyboards with different layouts, each text field can be bound to the appropriate keyboard - and the user will see only the keyboard attached to whichever text field has the focus.<br /><br />But don't take my word for it - check out a <a href="http://code.google.com/apis/ajax/playground/#virtual_keyboard" id="pydr" title="sample">sample</a> for yourself. Notice that in addition to allowing users to click on the virtual keyboard, it also temporarily transforms the key assignments on their physical keyboard, allowing rapid typing for those users accustomed to a given layout.<br /><br />With this initial release, we are launching 5 language layouts. They are: </p> <div> </div> <div> <div> <ul><li> Arabic (<span style="font-family:-webkit-monospace;"><span style="font-size:100%;">العربية)</span></span> </li><li> Hindi (<span style="font-family:Arial;"><span style="font-size:100%;">हिन्दी)</span></span> </li><li> Polish (<span style="font-family:-webkit-monospace;"><span style="font-size:100%;">Polski)</span></span> </li><li> Russian (<span style="font-family:-webkit-monospace;"><span style="font-size:100%;">Русский)</span></span> </li><li> Thai (<span style="font-family:-webkit-monospace;"><span style="font-size:100%;">ไทย)</span></span> </li></ul> </div> </div> <p><br />We plan to roll out support for more keyboard layouts in the future. But in the meantime, read through the <a href="http://code.google.com/apis/ajaxlanguage/documentation/referenceKeyboard.html" id="j4cg" title="class reference">class reference</a> and see the rest of the <a href="http://code.google.com/apis/ajax/playground/#virtual_keyboard" id="gj1i" title="Code Playground samples">Code Playground samples</a>.<br /><br />After you've had time to experiment, let us know what you think and which other layouts you'd like to see. Feedback is always welcome in our <a href="http://groups.google.com/group/Google-AJAX-Search-API" id="d8z9" title="support forum">support forum</a> and <a href="http://www.mibbit.com/?server=irc.freenode.net&channel=%23googleajaxapis" id="m0_:" title="IRC channel">IRC channel</a>. </p> <p> </p>Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-50447316945337241772009-06-11T09:35:00.000-07:002020-07-15T16:43:20.973-07:00Ext-core ready to goRecently, the guys over at Ext JS released ext-core under an MIT license, which was a big win for open source! Today, they released a stable (non-beta) version of this library and we are proud to be part of that announcement by hosting the new version. You can now pull ext-core from Google servers:<pre class="code">// directly access it<br />http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core.js<br />// alias the newest 3.0.x version<br />http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core.js<br />// alias the newest 3.x.x version<br />http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js<br />// directly access the uncompressed code<br />http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js<br /></pre>You can also use it from the loader:<pre class="code">google.load('ext-core', '3.0');<br />google.load('ext-core', '3', {uncompressed : true});<br /></pre>Thanks to all for the requests to add ext-core to our Libraries API, and big thanks to Ext JS for providing their library so openly! For more information, head over to their <a href="http://extjs.com/blog/2009/06/10/building-a-rating-widget-with-ext-core-30-final-and-google-cdn/">blog post</a>.Unknownnoreply@blogger.comtag:blogger.com,1999:blog-29072373.post-4746417509226182392009-06-08T00:23:00.000-07:002020-07-15T16:43:20.933-07:00Arabic Transliteration added to the AJAX Language APILast year we launched the Transliteration API as an addition to the AJAX Language API. This gave users the ability to transliterate (the process of phonetically converting words from one script into another) text into several Indic languages using a normal English keyboard.<br /><br />We're happy to announce that we've now added Arabic to the list of supported languages. Now, you can allow your users to easily input Arabic-language text into any text field or text area on your web page without switching to a non-Latin alphabet keyboard - just like on the <a href="http://www.google.com/ta3reeb/" id="xfpj" title="our Labs page">Labs page</a>. For example, if the user types '<i>mar7aban bekom'</i>, the API will transliterate each word, with the result '<span style="font-size:100%;"><span style="font-family:Tahoma;">مرحبا بكم</span></span>' (Arabic for <i>welcome</i>). The API will even automatically adjust the direction of the text area to support this right-to-left language.<br /><br />Take a look at the <a title="documentation" href="http://code.google.com/apis/ajaxlanguage/documentation/#Transliteration" id="lua-">documentation</a> and then head over to the <a title="Code Playground" href="http://code.google.com/apis/ajax/playground/#transliterate_arabic" id="h0gs">Code Playground</a> to give it a try for yourself. If you have any questions, stop by the <a title="Google AJAX API developer forum" href="http://groups.google.com/group/Google-AJAX-Search-API" id="a-.w">Google AJAX API developer forum</a> or <a title="IRC channel" href="http://www.mibbit.com/?server=irc.freenode.net&channel=%23googleajaxapis" id="npsz">IRC channel</a>.Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-30824194611392492412009-06-01T10:06:00.000-07:002020-07-15T16:43:20.753-07:00AJAX Custom Search Gadget on BloggerThe AJAX Search gadget for Blogger is now available to all users on Blogger.com. This gadget accesses a <a href="http://www.google.com/cse">Custom Search Engine</a> (CSE) that is created automatically for your blog and provides search results inline, with the look and feel of your blog. You can get all this with just a few clicks from the Blogger control panel.<br /><br />One cool feature of the gadget is the 'Linked From Here' feature that searches the pages you've linked to from your blog posts. As you create new posts, we automatically update your search engine to include all the linked pages, as well as all the pages linked from your link lists and blog lists. Check out the <a href="http://buzz.blogger.com/2009/06/search-box-gadget-available-to-all.html">gadget</a> — the search results match the look and feel of your blog and show up inline, as shown in the screenshot below. You can click a button to dismiss the results when you are done, and go back to reading the current post.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_qU0w4wiK3GA/ShWMhtBLTxI/AAAAAAAAABc/kX6vTXaXyHo/s1600-h/blogger.gif"><img style="cursor:pointer; cursor:hand;width: 400px; height: 298px;" src="http://1.bp.blogspot.com/_qU0w4wiK3GA/ShWMhtBLTxI/AAAAAAAAABc/kX6vTXaXyHo/s400/blogger.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5338327443965693714" /></a><br /><br />If you are not using Blogger, you can still create something similar for your website using the <a href="http://www.google.com/webelements/customsearch/">Custom Search element</a> (read more about this new element at the <a href="http://googlecustomsearch.blogspot.com/2009/05/introducing-custom-search-web-element.html">Custom Search blog</a>).Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-24725557235563314212009-05-27T11:54:00.001-07:002020-07-15T16:43:20.702-07:00Easy as 1-2-3 - introducing Google Web Elements<span class="Apple-style-span" style="font-family: Verdana; font-size: 13px;"></span><br /><div style="margin-bottom: 0px; margin-top: 0px;">Today at Google I/O, we launched <a href="http://www.google.com/webelements/" id="u7wm" style="color: #551a8b;" title="Google Web Elements">Google Web Elements</a> with one goal in mind - making life easier for developers. Google Web Elements make it incredibly simple to add Google products to your site, app or blog. It's so easy, you'll feel like you're cheating. Inspired by the convenience of embeddable YouTube videos, Google Web Elements allow you to add products like Google Custom Search, Google Docs, and Google Maps to your website with the simplicity of copy and paste. For instance, here's the new Google News element:<br /><br /><center><iframe allowtransparency="true" border="0" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&format=300x250&element=true" style="border: 0pt none; height: 250px; margin: 0pt; width: 300px;"></iframe></center><br /><br />Each element is designed to help you get started quickly without spending time on the deep technical details. Yet behind it all, Google Web Elements are powered by Google's scalable and flexible <a href="http://code.google.com/" id="cph1" style="color: #551a8b;" title="developer APIs">developer APIs</a>, offering a world of customization just beneath the surface, keeping up with your site as it grows.<br /></div><div style="margin-bottom: 0px; margin-top: 0px;"><br /></div><div style="margin-bottom: 0px; margin-top: 0px;">For more details, check out the <a href="http://google-code-updates.blogspot.com/2009/05/introduce-google-web-elements.html">Google Code</a> and <a href="http://googlecustomsearch.blogspot.com/2009/05/introducing-custom-search-web-element.html">Custom Search</a> blogs. Google Web Elements are already available for eight of our most popular products, with more soon to follow. To get started, visit the <a href="http://www.google.com/webelements/" id="tvpk" style="color: #551a8b;" title="Google Web Elements">Google Web Elements</a> homepage and please be sure to <a href="http://www.google.com/support/forum/p/webelements" id="x6_3" title="let us know">let us know</a> what you'd like to see us work on next.</insert></div><div style="margin-bottom: 0px; margin-top: 0px;"><br /></div><div style="margin-bottom: 0px; margin-top: 0px;">Want to know what else is going on at Google I/O? Follow us on twitter <a href="http://twitter.com/googleio" id="jv3j" title="@googleio">@googleio</a> and <a href="http://googleio.twazzup.com/" title="twazzup">twazzup</a>.</div>Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.comtag:blogger.com,1999:blog-29072373.post-85077623355288664102009-04-06T10:39:00.000-07:002020-07-15T16:43:21.497-07:00AJAX APIs Playground Ver. 2I am very pleased to announce version 2 of the <a href="http://code.google.com/apis/ajax/playground/">AJAX APIs Playground</a>. For those of you not familiar with it, the Playground is an educational application designed to show interactive code samples for some of Google's coolest Javascript APIs. Of the new changes, the most obvious is the sweet new UI, thanks to help from Roman Nurik of the Google Earth team.<br /><br />The new features are:<br />* Break points (simulated in Javascript)<br />* Firebug Lite in output for debugging<br />* Line numbers in code editor<br />* Ability to edit HTML of samples<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_DxbDaPwqVhM/SdpAN9uhK0I/AAAAAAAAACM/Mz0ujgeCCqQ/s1600-h/ss.png"><img style="cursor:pointer; cursor:hand;width: 400px; height: 213px;" src="http://1.bp.blogspot.com/_DxbDaPwqVhM/SdpAN9uhK0I/AAAAAAAAACM/Mz0ujgeCCqQ/s400/ss.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5321636518343813954" /></a><br /><br />The breakpoints and Firebug Lite additions are my favorite new features. But why did I include Firebug Lite when all web developers (should!) have Firebug installed? Because when code runs on the Playground, it runs in an iFrame. That iFrame does not have the Firebug object initialized in it. Since it is a cross-domain iFrame, there's no simple way to add Firebug to the iFrame's window object, so adding Firebug Lite was the best approach. This makes it so you can now use all of your favorite <a href="http://getfirebug.com/console.html">Firebug debugging convenience functions</a> in the Playground!<br /><br />To use Firebug Lite and breakpoints, simply click on the line number you want to add a breakpoint to and hit "Debug Code". This will insert Firebug Lite into the output and pause the execution on the breakpoint line number until you to click the play button to continue. Try adding a breakpoint to a line, clicking "Debug Code", then opening Firebug Lite and typing in a variable name to inspect the contents/value of the variable at that point in the code.<br /><br />Adding breakpoints and forcing Firebug into a local function context were really fun engineering problems, so if you want to check them out (or <a href="http://code.google.com/p/google-ajax-examples/w/list">contribute code to the Playground</a>) go to the <a href="http://code.google.com/p/google-ajax-examples/source/browse/#svn/trunk/interactive_samples">open source repository for it</a>, come <a href="http://www.mibbit.com/?server=irc.freenode.net&channel=%23googleajaxapis">chat it up on IRC</a>, or talk with me in person at the quickly approaching <a href="http://code.google.com/io/">Google I/O conference</a> (early bird <a href="https://io2009.event-projects.com/">registration</a> runs until May 1).<br /><br />Also, it's really important that you <a href="http://spreadsheets.google.com/viewform?hl=en&formkey=cFM5OU5yN3BrRzhOOEhFc2VBMmlQU2c6MA">share your feedback</a> so that I know what you'd like to see in the next version of the Playground! Thanks, and enjoy the Playground!Unknownnoreply@blogger.comtag:blogger.com,1999:blog-29072373.post-9700435226001033852009-04-03T09:06:00.000-07:002020-07-15T16:43:21.591-07:00Making content creation easy with the Google AJAX APIs - Guest postWe started <a href="http://www.nextstop.com/">nextstop.com</a> with the idea that we could make it significantly easier and more fun to discover new and interesting things to do anywhere in the world, based on recommendations from people who know a place well. Whether it was a neat museum, a hidden local restaurant, or a great place to go shopping we wanted to make it super easy and fun for people to share recommendations for their favorite places, wherever they might live.<br /><br />The trick of course was in how to do this. It was important for us to combine ease of making a recommendation -- our goal was that it should be as simple as entering the name of a place, and a few sentences about why you liked it -- with rich information about a place so it was really useful to others -- photos, contact information, maps, etc. The solution, not surprisingly since I'm writing here, was to use a number of Google's APIs to gather related information about the recommendation and make it easy for our members to include it in their recommendation.<br /><br />You can best see how this works by going through our <a href="http://www.nextstop.com/card/new/">recommendation flow</a>, or watching the video below.<br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/7kGRUIh8Ek8&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/7kGRUIh8Ek8&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object><br /><br />Let me walk you through how this is working under the hood: <br /><br />1) When the page loads, the first thing we do is use the <a href="http://code.google.com/apis/ajax/documentation/#GoogleLoad">Google loader</a> to load the JQuery and JQuery UI libraries, as well as Google Maps. As part of this, we also grab the user's current location using google.loader.ClientLocation and store the lat/lng if available to use later.<br /><br />2) In step 1, we ask the user for what's being recommended. We use this string to do a Google local search for business listings and KML results that match, using the user's current location to bound the local search by setting the sll and sspn parameters. Between local business listings and KML results, we can offer incredible global coverage of everything from restaurants to tourist attractions to hole-in-the-wall bars and clubs. We're using the JSON version of the local search API, which we call from our servers using Python's urlopen() so that we can supplement the results with our own database of results.<br /><br />3) In step 2 we do an image search for related images using Google's image search API. While we let users change the search terms to find just the right picture, often our default image search (which combines the name of the place and a city name) returns great results. There are photos of almost everything, so you can even recommend a particular dish at a <a href="http://www.nextstop.com/guide/Ka2iYVinO4w/noodles-in-taipei/">restaurant in Taipei</a> and have the photos to go along with it.<br /><br />4) In step 3, we ask for a few sentences about why that place or activity really stands out to them. After the recommendation has been submitted, we use the <a href="http://code.google.com/apis/ajaxlanguage/">Google Language APIs</a> to detect the language of the recommendation, which we can later use to filter content by your language, and we hope to someday integrate the ability to translate recommendations into your language of choice.<br /><br />Its a very simple and fast process for the user making the recommendation, but the result is a recommendation with address, phone number, map, and photo that is really useful to another user looking to discover something new.<br /><br />We've built our whole product around the Google APIs, and feel like we're just scratching the surface of what's possible. We're planning to let users add other information (like related websites, searches, news, etc.) using Google's APIs as well.<br /><br />We'll be at <a href="http://code.google.com/io">Google I/O</a> on May 27-28 talking about what we've done so far, and will hopefully have a few new uses of the Google APIs to show off at that time. Please come say hello -- we'd love to hear your feedback on <a href="http://www.nextstop.com/">nextstop</a>, or share tips on using the Google APIs. You can also check out some of the places recommended near the <a href="http://www.nextstop.com/location/map/1EpIxzRL9Ck/san-francisco/?q=&tag=&lat=37.78436757145777&lng=-122.4026083946228&z=16">Moscone center</a>, or add a few of your own!<br /><br />Carl Sjogreen (co-founder, nextstop.com)Unknownnoreply@blogger.comtag:blogger.com,1999:blog-29072373.post-69682611942256426102009-03-17T17:50:00.000-07:002020-07-15T16:43:21.263-07:00Updated Local Search Control used in brand new GoogleBarA much requested feature, the Local Search Control now includes ads when a search is performed. Users will benefit from seeing targeted and relevant sponsored results, and you can benefit by sharing in the revenue of including these results on your site. Ads aren't the only thing that's new - there's also a new (and, we hope you agree, better) UI:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_qU0w4wiK3GA/ScAxWrXbwoI/AAAAAAAAABU/HMKZ-0DBahU/s1600-h/LSC-example.gif"><img style="cursor:pointer; cursor:hand;width: 400px; height: 203px;" src="http://4.bp.blogspot.com/_qU0w4wiK3GA/ScAxWrXbwoI/AAAAAAAAABU/HMKZ-0DBahU/s400/LSC-example.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5314301825965081218" /></a><br /><br />This new Local Search Control has been used in a brand new version of the <a href="http://code.google.com/apis/maps/documentation/services.html#UsingGoogleBar">GoogleBar</a> (part of the Maps API). In almost all cases, the GoogleBar provides the ideal way to add searches to Google Maps. The GoogleBar, too, includes advertisements with the results. In order to share in the revenue, you need to supply your AdSense publisher ID. You can use your existing ID or <a href="https://www.google.com/adsense/support/bin/answer.py?answer=9880">sign up for a new AdSense account</a>. Once you have an account, <a href="https://www.google.com/adsense/support/bin/answer.py?answer=45465">get your AdSense publisher ID</a> and include it as an option when you set up the GoogleBar:<br /><br /><pre class="code" style="overflow:scroll;"><br /><script src="/jsapi?key=YOUR_KEY_HERE" type="text/javascript"></script><br /><script type="text/javascript"><br /> google.load("maps", "2");<br /> var opts = {<br /><br /> googleBarOptions : {<br /> style : 'new', // This tag is necessary for the first few weeks until the new UI becomes default<br /> adsOptions : {<br /> client : #### // Your Google AdSense publisher ID<br /> }<br /> }<br /> }<br /> map = new GMap2(document.getElementById("map"), opts);<br /> map.setCenter(new GLatLng(33.956461,-118.396225), 13);<br /> map.enableGoogleBar();<br /></script></pre><br /><br />Optionally, you may also specify an AdSense for Search channel (<a href="https://www.google.com/adsense/support/bin/answer.py?hl=en&answer=32614">more info on channels</a>), the Ad Safety Level to associate with your advertising, and the language in which to display results. For a full list of options and details on including them, see the <a href="http://code.google.com/apis/maps/documentation/services.html#UsingGoogleBar">GoogleBar documentation</a>. Note: currently ads only appear for results that are inline - this limitation should be removed within a few weeks.<br /><br /><br />If you'd like to learn more about the new underlying, low-level Local Search Control, the <a href="http://code.google.com/apis/ajaxsearch/documentation/localsearch/index.html">reference documentation</a> and <a href="http://code.google.com/apis/ajax/playground/#local_search_control">Code Playground examples </a>contain everything you need to know.<br /><br />For more information, see this recent post on the <a href="http://googlegeodevelopers.blogspot.com/2009/03/changes-to-googlebar.html">Maps API blog</a>. Questions or comments? Please visit the <a href="http://groups.google.com/group/Google-AJAX-Search-API">AJAX API</a> and <a href="http://groups.google.com/group/Google-Maps-API">Maps API</a> discussion groups.Adam Feldmanhttp://www.blogger.com/profile/15563122400987772430noreply@blogger.com