Creating a content rich site using Google APIs
I recently had a
domain renewal notification about a domain I had bought but never got round to using for its original purpose. I didn't want the domain to go to waste so I thought about creating a site as a way for me to play with
Googles APIS. They offer a wide range of
objects and frameworks which let you add content to a site very quickly such as the ability to
search feeds, translate content on the fly from one language to another, s
earch blogs, news and videos and much much more.
Hattrick Heaven
The site I created is a
football site called www.hattrickheaven.com its main purpose apart from an example of
Googles APIs in action is to display the
football league tables of all the countries in the world. I found that on some other sites it was quite a few clicks from the home page to drill down to the
league standings so my site was a way to offer this data straight away. As well as the
league tables I have links to the
latest news, football related blogs, discussion boards and videos.
Google Search APIS
To make use of Googles APIs you just need to setup an access key which is linked to the domain and is free to use. This is passed along in the URI when you reference the main Google JavaScript file. This file is all you need to include as it handles the loading in of all the other libraries with commands such as:
// load google APIS I want to use
google.load("feeds", "1");
google.load("language", "1");
google.load("search", "1");
As well as loading in Googles own framework with this main google.load method you can also reference other well used frameworks such as JQuery, YUI, prototype, dojo, Mootools and others or you can do what I chose to do and reference the relevant framework directly from Googles CDN (Content Delivery Network ).
Targeting Visitors with Googles APIs
One of the very cool features I liked about Googles API is that you get as standard geographical information about your users such as Longitude, Latitude, Country, Region and City. This was great for me as it meant I can use this information to default the search criteria for my feed, blog, news and video searches. If your in the UK and live near a major footballing city such as Liverpool, Manchester or London then HattrickHeaven.com will default the searches with the names of the clubs related to those towns such as Man UTD and Man City for Manchester.
Below is an example from the site of my Visitor object which uses the google.loader object to set up details about the current users location and browser language.
(function(){
V = H.Visitor = {
sysDefLanguage : "en", // the language I wrote the system in and that transalations will be converted from en=English
Latitude : google.loader.ClientLocation.latitude,
Longitude : google.loader.ClientLocation.longitude,
CountryCode : google.loader.ClientLocation.address.country_code,
Country : google.loader.ClientLocation.address.country,
Region : google.loader.ClientLocation.address.region,
City : google.loader.ClientLocation.address.city,
BrowserLanguage : (navigator.language || navigator.browserLanguage || this.sysDefLanguage), // the language currently set in users browser
Language : "",
isEnglish : false
}
// set visitors language making sure "en-gb", "en-us" is converted to "en"
V.Language = H.ConvertLanguage(V.BrowserLanguage);
V.isEnglish = (V.Language=="en") ? true : false; // check for English
})();
Translating Content
Another cool feature is the ability to
translate content from one language to another on demand. I make use of this on
www.hattrickheaven.com to translate the headers and content that is delivered through
Googles feed and search objects if the users language is different from that set for the page (at the moment its all English). You can see this in action on a specific page I created
http://www.hattrickheaven.com/spanish-news which converts the content
from English into Spanish once its been inserted into the
DOM. The code to do this is very simple you just pass the text to convert, the language code for the language the text is written in, the
language code for the language to
translate the text into and a
callback function to run once the translation has completed.
google.language.translate(txt, langFrom, langTo, function(result){
// On translation this method is called which will either run the function
// defined in destFunc or set the innerHTML for outputTo
self.TranslateComplete(result, destFunc, outputTo);
});
On www.hattrickheaven.com I have created my own wrapper object for the site which encapsulates a lot of the various Google options and makes it very easy for me to specify new content to search, translate and output. I have options which control the number of results to show, whether to ignore duplicate URLs and whether to show just the link or to show the snippet of content underneath. For example the following is the code I use on the page
<script type="text/javascript">
// load google APIS I want to use
google.load("feeds", "1");
google.load("language", "1");
google.load("search", "1", H.Visitor.Language);
H.newsPageSteup = function(){
//set up 2 feed objects for the sidebar content
var blog = new H.Feeder();
var wnews = new H.Feeder();
blog.OutputNo = 12; // output 12 links
blog.FeedType = "blogs"; // set the type of feed
blog.getFeedOutputElement = "blogs"; // the node ID to output results
blog.findFeeds(); // find some relevant blogs, translate if necessary and output
wnews.FeedType = "news";
wnews.searchQuery = "World Cup 2010 News"; // overwrite the default search terms
wnews.ShowSnippet = true; // show the content snippet under the link
wnews.OutputNo = 5; // output 5 news articles
wnews.getFeedOutputElement = "worldcupnews"; // where to output news results
wnews.findFeeds(); // run news feed search, translate if necessary and output
// set up a search control to output a search box, paging for results etc
var news = new H.SearchControl();
news.controlType = "news"; // tell object to search for news
news.getFeedOutputElement = "news"; // where to output results in DOM
news.searchSetup(); // run search, translate and output results
// if visitor is not English then I want to translate some headers on this page
if(!V.isEnglish){
var sobj = new H.Search();
var arr = ["WorldCupNewsHeader","NewsHeader","BlogsHeader"];
sobj.TranslateContents(arr);
}
}
// On load run my initialise function
google.setOnLoadCallback(H.newsPageSteup,true);
</script>
As you will see if you take a look at the site its very easy to get some rich content up with very few lines of code. The only issue I currently have is that this functionality is all being done client side with Javascript which leads to two problems.
1. Roughly 10% of visitors (ignoring bots) have Javascript disabled by default. This means that apart from the league tables the site will look pretty bare.
2. Because the content is all loaded in using Javascript its only visible in the DOM after the page has loaded it means that for SEO purposes the source code is going to be pretty empty. I have a few ideas floating around regarding this and I will give more details if any of them come to fruition.
All in all I am pretty impressed with the framework especially its simplicity and hopefully others will feel the same way once they get stuck into developing with it.
Related Links
Posts
