How to build a Google Gadget
(or how you can build your own similar to the max effgen photography google gadgets)

First, what is a Google Gadget?
Simply, a gadget is a small webpage that can be embedded into other webpages and applications.

It is a great way to drive traffic and interest in a site, especially for the photographer. When users add the salmon bay gadget to their iGoogle homepage, they will see one of my photos each time they visit Google. Currently, these gadgets account for over 80% of traffic to max effgen photography.

What you need:
1) Google Gadget Documentation (The "legacy" Developers Guide will be used in this example. Link below.)

2) A limited understanding of HTML, XML and PHP.
Knowledge of XML and PHP can be very limited. XML is a markup language, like HTML, but for data. PHP is a server-side scripting language. That means PHP code is executed on the server and not on the browser. Most hosting providers include PHP in their offerings at no additional cost.

3) A text editor, like Notepad or up to the delux like Dreamweaver.

4) Images formatted to a maximum 300 px width by 250 px height.

Getting Started:
This Gadget will display a picture, a text description and create a hyperlink back to corresponding page on salmonbay.net. Feel free to copy this code below and modify for your site.

There are 2 files that make up this gadget. The first is a PHP file that generates the small displayed HTML page. This file is uploaded to your website. The second is an XML file that provides Google the data it needs to run the Gadget. This XML file is uploaded to Google. I have found the optimal Gadget size to be the default 320 x 260 px. Using images formatted to 300 x 250 px maximum works best in this example.

PHP File Example Code
This example uses a multi-dimensional array to set the image, description text and a hyperlink. When the PHP script is run, a random number is chosen and the associated image, description text and hyperlink is displayed on the page. I chose to hide the hyperlinks by setting then to white, the background color of my page. This is just my preference for a clean look.

Copy this code below and update the 'img', 'text' and 'ref' variables with your photos, descriptions and pages to link. Save the file with the extension ".php" and upload to your website. Refine it until it works for you.

Code:

<?php
$myPix = array (

'1' => array ( 'img' => 'img/300_hi01.jpg' , 'text' => 'palanifish' , 'ref' => 'hawaii.html' ),
'2' => array ( 'img' => 'img/300_alsek05.jpg' , 'text' => 'blue iceberg at alsek lake' , 'ref' => 'alsek.html' ),
'3' => array ( 'img' => 'img/300_arch01.jpg' , 'text' => 'delicate arch cliffside, arches np' , 'ref' => 'arch.html' ),
'4' => array ( 'img' => 'img/300_olym08.jpg' , 'text' => 'sol duc falls, olympic np' , 'ref' => 'olym.html' ),
'5' => array ( 'img' => 'img/300_hi04.jpg' , 'text' => 'fern gowing from lava, volcanoes np' , 'ref' => 'hawaii.html' ),
'6' => array ( 'img' => 'img/300_pnw01.jpg' , 'text' => 'mt st helens summit, 2002' , 'ref' => 'pnw.html' ),
'7' => array ( 'img' => 'img/300_arch02.jpg' , 'text' => 'delicate arch sunrise, arches np' , 'ref' => 'arch.html' ),
'8' => array ( 'img' => 'img/300_badl02.jpg' , 'text' => 'pronghorn doe' , 'ref' => 'badl.html' ),
'9' => array ( 'img' => 'img/300_alsek08.jpg' , 'text' => 'indian paintbrush and wildflowers' , 'ref' => 'alsek.html' ),
'10' => array ( 'img' => 'img/300_badl08.jpg' , 'text' => 'big horn ewe, badlands np' , 'ref' => 'badl.html' ),
'11' => array ( 'img' => 'img/300_sea07.jpg' , 'text' => 'pike place market, seattle' , 'ref' => 'seattle.html' ),
'12' => array ( 'img' => 'img/300_hi06.jpg' , 'text' => 'wild ginger, volcanoes np' , 'ref' => 'hawaii.html' ),
'13' => array ( 'img' => 'img/300_olym02.jpg' , 'text' => 'sand point sunset, olympic np' , 'ref' => 'olym.html' ),
'14' => array ( 'img' => 'img/300_mora01.jpg' , 'text' => 'mt rainier from paradise' , 'ref' => 'mora.html' ),
'15' => array ( 'img' => 'img/300_arch07.jpg' , 'text' => 'waiting for sunrise, arches np' , 'ref' => 'arch.html' ),
'16' => array ( 'img' => 'img/300_mora07.jpg' , 'text' => 'reflection lake, mt rainier np' , 'ref' => 'mora.html' ),
'17' => array ( 'img' => 'img/300_alsek09.jpg' , 'text' => 'grizzly tracks, alsek river' , 'ref' => 'alsek.html' ),
'18' => array ( 'img' => 'img/300_sea03.jpg' , 'text' => 'seattle skyline from kerry park' , 'ref' => 'seattle.html' ),
'19' => array ( 'img' => 'img/300_hi07.jpg' , 'text' => 'no parking, volcanoes np' , 'ref' => 'hawaii.html' ),
'20' => array ( 'img' => 'img/300_mora03.jpg' , 'text' => 'lenticular cloud, mt rainier np' , 'ref' => 'mora.html' ),
'21' => array ( 'img' => 'img/300_hi08.jpg' , 'text' => 'curious turtle, maui' , 'ref' => 'hawaii.html' ),
'22' => array ( 'img' => 'img/300_mora05.jpg' , 'text' => 'sunrise from dege peak, mt rainier np' , 'ref' => 'mora.html' ),
'23' => array ( 'img' => 'img/300_olym06.jpg' , 'text' => 'starfish, olympic np' , 'ref' => 'olym.html' ),
'24' => array ( 'img' => 'img/300_sea06.jpg' , 'text' => 'washington park arboretum, seattle' , 'ref' => 'seattle.html' ),
'25' => array ( 'img' => 'img/300_alsek12.jpg' , 'text' => 'alpenglow at alsek lake' , 'ref' => 'alsek.html' ),
'26' => array ( 'img' => 'img/300_peru04.jpg' , 'text' => 'porter on the inca trail' , 'ref' => 'peru.html' ),
'27' => array ( 'img' => 'img/300_mora06.jpg' , 'text' => 'entrance in winter, mt rainier np' , 'ref' => 'mora.html' ),
'28' => array ( 'img' => 'img/300_lg03.jpg' , 'text' => 'mount fitz roy, los glaciares np' , 'ref' => 'lg.html' ),
'29' => array ( 'img' => 'img/300_badl06.jpg' , 'text' => 'buffalo, badlands np' , 'ref' => 'badl.html' ),
'30' => array ( 'img' => 'img/300_lg05.jpg' , 'text' => 'cerro chaltÚn, patagonia' , 'ref' => 'lg.html' ),
'31' => array ( 'img' => 'img/300_mora09.jpg' , 'text' => 'mt rainier in winter' , 'ref' => 'mora.html' ),
);

$totalPix="31";
// Set x to Julian date. Pick random day if day exceeds number of images.
//$x=date("j");
//if($x > $totalPix) { $x=rand(1,$totalPix); }

// Random picture each time.
$x=rand(1,$totalPix);

// Set array values to variables to be included in HTML.
$img = $myPix[$x]['img'];
$text = $myPix[$x]['text'];
$ref = $myPix[$x]['ref'];

echo <<<EOC
<html>
<head><style type="text/css">body {margin: 0px; padding: 0px;} a:link, a:visited, a:hover, a:active{text-decoration:none; color:white;}
<body>
<div align="center">
<a href="$ref" target="_blank" title="click to launch - max effgen photography"><img src="$img" width="300"></a><br>
<a href="$ref" target="_blank" title="click to launch - max effgen photography" style="color:#666666;font-family:Helvetica, Arial;font-size:11px;font-weight:normal;">$text
</div>
</body>
</html>
EOC;

?>


Options:
- Daily: This code can be modified to a daily image display. Simply "uncomment" the //$x=date("j"); and //if($x > $totalPix) { $x=rand(1,$totalPix); } lines below. That is remove "//" in each line. Also you will need to "comment" the $x=rand(1,$totalPix); line by adding "//" at the start of the line.

- PHP Date Function: the date function has some cool features to make this weekly, yearly, etc. Check the PHP documentation (http://www.php.net/date).

- Simplify: By only hyperlinking to your site. Example: 'ref' => 'index.html'

XML File Example Code
When the PHP file is working to your satisfaction, start working it into a Google Gadget. This is pretty simple.

The Google Gadget is an XML file that will call the PHP file to display the image, description and hyperlinks. The Gadget Documentation (http://code.google.com/apis/gadgets/) details all of the Module Preferences that you can set.

Be sure to modify the <iframe> line with your newly created PHP file.

When your XML file is ready, Upload it into the Google Gadgets Editor (http://code.google.com/apis/gadgets/docs/legacy/gs.html#GGE)
Check the file in the Preview tab. If all looks good, Save and Publish. You can test by adding to your iGoogle or another webpage. When that is complete, publish to iGoogle Directory. Google takes approximately a week to make it fully available in the directory. You can also send to friends, family and clients the Gadget immediately via email.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="max effgen photography" width="320" height="260" scaling="true" title_url="https://www.salmonbay.net/" directory_title="max effgen photography" author_location="Seattle, Washington, USA" description="max effgen photography, Nature and travel photography by Max Effgen. Image is randomly selected on page refresh." author="Max Effgen" author_link="https://www.salmonbay.net/bio.html" author_email="max+nospam@salmonbay.net" author_affiliation="max effgen photography" author_photo="https://www.salmonbay.net/img/sbp.PNG" screenshot="https://www.salmonbay.net/img/sbp_gg2.jpg" thumbnail="https://www.salmonbay.net/img/sbp_gg.jpg">
<Content type="html">
<![CDATA[
<div align="center">
<iframe style="width:100%; height:260px;" frameborder="0" scrolling="no" src="https://www.salmonbay.net/sbp_gg_rnd.php" />
</div>
]]>
</Content>
</Module>


Working Example
The code above created this Gadget.



Reference Sites

Gadgets - Google Code Documentation (http://code.google.com/apis/gadgets/)

Google Gadgets Editor (http://code.google.com/apis/gadgets/docs/legacy/gs.html#GGE)

KillerPHP.com: PHP Tutorials for web design (http://www.killerphp.com/)

PHP Date function (http://www.php.net/date)

Questions?