|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.
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.
- Daily: This code can be modified to a daily image display. Simply "uncomment" the
- PHP Date Function: the date function has some cool features to make this weekly, yearly, etc. Check the PHP documentation ( ).
- 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 ( ) 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 ( )
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.
The code above created this Gadget.
Gadgets - Google Code Documentation (
Google Gadgets Editor ( )
KillerPHP.com: PHP Tutorials for web design ( )
PHP Date function ( )