Google Gadgets Simplified

General Development

Example of a fairly simple google gadget serving dynamic content. Example code in PHP but the concepts will work for any language.


Date : 2006-08-24
Google Gadgets are one fairly new way to syndicate your content and keep visitors coming back to your site. Here at bestcodingpractices.com we have been using Google Gadgets for a while now and have raised our visitor return rate noticably.

Clearly this is a tool that should not be ignored from a marketing standpoint but many people have read the explanation at Google and are still unable to create their own. In reality creating these gadgets is fairly simple depending on how much you bite off. We are going to go through an example that is a little more complicated than the proverbial “hello world” example.

The basic concept of the Google Gadget is that you provide a small box of content for display on people's Google Home page. This can be news, statistics, pictures, basically anything you want. The idea is to get users to place your content on their google home page so that every time they go to their google page they will see your content. If you're thinking ahead at all you will put a link in your content back to your site to keep users comming back for more. The idea we have used is to place a random coding tip on your google home page with a link back to an article that explains the idea in a little more detail. We will be discussing how this was accomplished so that you can get an idea of how you can syndicate your own content in this way or make adjustments for your own idea.

The basic structure of the gadget is as follows:
Code:
<?xml version="1.0" encoding="UTF-8" ?>
<Module> 
  <ModulePrefs title="Best Coding Tip of the Day"
               description="Receive a brief coding tip to improve your programming methods."
               author="BeachBum Software"
               author_email="editor@bestcodingpractices.com"
               screenshot="http://www.bestcodingpractices.com/images/bestcoding_tipoftheday.png"
               thumbnail="http://www.bestcodingpractices.com/images/bestcoding_tipoftheday_thumb.png"
               title_url="http://www.bestcodingpractices.com"
                  />
<Content type="url" href="http://www.bestcodingpractices.com/codetip_gadget.php"/>
</Module>

This is just a simple XML file that Google will read to serve your gadget’s content.
The root node is which will describe the features of your gadget. There are only 2 main child nodes within the node. First will set various descriptions of your module they are pretty self explanatory. The author and author_email parameters describe who is publishing this gadget. The title and description should be descriptive and will help users find and recognize your gadget. The screenshot has to be a complete URL and will show a picture of your gadget that google will display when verifying that a user wants to put your gadget on their page. Obviously a missing, blurry, or incorrect image will lower the number of users that end up using your gadget on their Google home page. The title_url parameter is the link that users will be directed to when clicking your gadget’s title. The Content node is going to be a direct google where to get the content for your gadget. For a gadget serving dynamic content via a server side script you would set the parameter type to “url” and then set the href parameter to the complete url of the script to serve the content.

Remember this is not meant to serve a page of content but a small box of content. To check what a standard google gadget would look like try the “Add to Google” button on the left side of this page. The content it will serve is formatted as follows:
Code:
<div style="font-size:10pt;font-family:courier new">
<strong>Title</strong>
<p>Content</p>
<a href="http://www.bestcodingpractices.com/link_to_full_article.html" alt="read more">
read more...</a>
</div>

That content will be created by your server side script. Ours gathers one random entry from our tips section. We use the following code to gather and serve this information:
Code:
<?PHP
  $MySQL = mysql_connect('localhost', 'username', 'password');
  if (!$MySQL) {
    die('Could not connect: ' . mysql_error());
  }
  mysql_select_db('databasename') or die('Could not select database');
  $sql = "select id, title, desc from tbl_pages where cat = 'tips' order by rand() limit 1";
  $tipRS = mysql_query($sql);
  if ($trow = mysql_fetch_assoc($tipRS)) {
    echo "<div style="font-size:10pt;font-family:courier new">" .
         "<strong>" . $trow['title'] . "</strong>" .
         "<p>" . $trow['desc'] . "</p>" .
         "<a href="http://www.bestcodingpractices.com/" . title2url($trow['title']) . "-" . $trow['id'] . ".html" alt="read more" target="_blank">" .
         "read why...</a></div>";
  }

function title2url($title) {
  $newURL = trim(strtolower($title));
  $newURL = str_ireplace('.','',$newURL);
  $newURL = str_ireplace('?','',$newURL);
  $newURL = str_ireplace('-','',$newURL);
  $newURL = str_ireplace('!','',$newURL);
  $newURL = str_ireplace(',','',$newURL);
  $newURL = str_ireplace(':','',$newURL);
  $newURL = str_ireplace(''','',$newURL);
  $newURL = str_ireplace('  ',' ',$newURL);
  $newURL = str_ireplace(' ','_',$newURL);
  return $newURL;
}
?>

The only part in there that may be even a tiny bit complicated is the “order by rand() limit 1” SQL in the query that will return one random record from the query on a MySQL server. You may need to look up how to do this with your server. The title2url function is the method we use to convert an article title into a URL that will be remapped to a dynamic URL. You can read about that process here.

Now that your gadget XML is all setup and your server side script is ready to serve your content all we need to do is direct your site visitors to your content. We do that with the link that is in the “add to google” button on the left:

http://fusion.google.com/add?moduleurl=http://www.bestcodingpractices.com/google_gadget_tipoftheday.xml

Obviously these concepts could be used to create something much more complex, including content that was actually served per day, instead of random as we have done. You can search through google’s existing gadget directory and find many examples of how they are being used Google Gadget Directory.

From an SEO and Marketing standpoint it is used as a link back to your site and a way to reach your users every time they go to Google.

If you have a gadget that you would like to promote please email a link and description to “editor(at)bestcodingpractices.com” as we will be setting up a directory trying to make people more aware of these great little gadgets.

Comments :

No comments yet
  • Search For Articles