Seo Master present to you:
Posted by Dion Almaer, Google Developer ProgramsWe are very fortunate at Google to have amazing people come in to speak to us on many interesting topics. We
record these talks and make them available on Google Video.
We recently added a feature on the
Google Code website that displays recent videos from our
tech talk series.
You could do this directly using the
Video Bar or the
Video Search Control which have wizards to make implementation trivial.
In our case, we wanted to make the bottom right portlet fit in with the look and feel of the rest of the site, so we decided to go a little more low level.
The the AJAX Search API the actually act of searching happens in the
Searchers set of JavaScript classes. We used the
GvideoSearch class which extends the base
GSearch functionality to work with Google Video.
The resulting code was simple. At its heart we:
- Told the searcher to give us the most recent searches via
videoSearch.setResultOrder(GSearch.ORDER_BY_DATE) (as opposed to the default 'most relevant' setting) - Told the searcher that we would handle generating the HTML ourselves via
videoSearch.setNoHtmlGeneration() - Do the work of creating the HTML from the results after the results come back. We track this with
videoSearch.setSearchCompleteCallback()
When the search returns the results are put into a results[] array. These results are
GvideoResult JavaScript objects with properties that we can then query, such as the published date, content snippet, title, duration, video URL, and the thumbnail image.
We used this to dynamically create the HTML and then inserted it into the DOM with innerHTML.
var result = videoSearch.results[x];
var nicerDate = new Date();
nicerDate.setTime(Date.parse(result.published ));
var dateFormatted = (nicerDate.getMonth()+1) + '/' + nicerDate.getDate()
+ '/' + nicerDate.getFullYear();
output += '<div class="featured"><div class="project"><div '
+ 'class="screenshot"><a href="' + result.url
+ '" rel="nofollow"><img src="' + result.tbUrl + '" alt="'
+ result.titleNoFormatting + ' Screenshot" width="129" height="110" '
+ '/></a></div><div class="info"><div '
+ 'class="name"><a href="' + result.url + '" rel="nofollow">'
+ result.titleNoFormatting + '</a></div><div '
+ 'class="author videodateformat">Recorded on ' + dateFormatted
+ '</div><div class="duration">Duration: '
+ parseInt( result.duration / 60) + ' mins</div></div><p '
+ 'class="videosnippet">' + result.content
+ '</p></div></div>';
A bit ugly, I know. If we wanted a cleaner approach, we could have used DOM methods directly, or we could have created this using a JavaScript Template package.
What is important to know, is that the AJAX Search API is a powerful beast. On the one hand you can run a wizard and get results that you can copy and paste onto your web pages. On the other hand you can get low level and query the backend which returns simple JSON for you to manipulate.
The AJAX Search team seems to release something new on just about a weekly basis, so subscribe to the
Google AJAX Search API Blog to follow along.2013, By: Seo Master
