Wednesday, October 6, 2010

Monetize Your Google Gadget

Inspired by the response to Increase Traffic | Create a Google Gadget ( Topping the popularity chart on this blog for the last month ) I researched methods to add advertisements to Google Gadgets.

Here is the method by which you can add any type of advertisement to your Google Gadget. Since you can put a Google Gadget within a post ( in contrast to Blogger Widgets ) this method also allows you to add Google Adsense Ads. within your post as demonstrated here ........

First create your Google Gadget. Looking for content to put in your Google Gadget? I have created one which shows the pictures from my picasa gallery as a sample. You can create a similar one based on your photo album collection. After creating the gadget and adding the Google Adsense or Amazon code as shown below submit it to the Google directory for syndication.

In the below code substitute the items in red with your own code :

1. Change the Module Preferences to those of your own.

2. Change the image URLs' to those from your Picasa gallery album.

3. Change the Amazon Ad. code to your own code.

4. Change the Google Analytics code to your own code.

The code for the Picasa photo albums Google Gadget is shown below :


<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Aishwarya Rai Photos"
title_url="http://betabloggerfordummies.blogspot.com"
author="Vin."
author_email="drbhatns+coolgadget@gmail.com"
author_affiliation="http://betabloggerfordummies.blogspot.com"
category="Fun & Games"
screenshot="http://i52.photobucket.com/albums/g7/vinayak06/ashgadget.jpg"
thumbnail="http://i52.photobucket.com/albums/g7/vinayak06/DummiesGuideBttn120.png"
render_inline="optional"
height="375"
width="175"
description="Aishwarya Rai Photos">
<Require feature="analytics"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<div id="ashcontainer"
style="text-align:center;">
</div>
<script type="text/javascript">

var counter = 0;

// Preload the images using _IG_GetImage().
var images = new Array();
images[0] = _IG_GetImage("http://lh4.google.com/drbhatns/RuUOIxWr19I/AAAAAAAAAic/xXD5IfB-_LY/s144/ash1.jpg");
images[1] = _IG_GetImage("http://lh4.google.com/drbhatns/RuUOIxWr1-I/AAAAAAAAAik/kYxo3nxP4Vg/s144/ash2.jpg");
images[2] = _IG_GetImage("http://lh4.google.com/drbhatns/RuUOIxWr1_I/AAAAAAAAAis/pL6I66h9h4I/s144/ash3.jpg");
images[3] = _IG_GetImage("http://lh4.google.com/drbhatns/RuUOIxWr2AI/AAAAAAAAAi0/Me2ac0M4gxo/s144/ash4.jpg");
images[4] = _IG_GetImage("http://lh5.google.com/drbhatns/RuUOJBWr2BI/AAAAAAAAAi8/RJXOS6p68ms/s144/ash5.jpg");


// Browse through photos sequentially. When you get to the end of the array, start over.
function browse(){
if (counter == images.length)
{
counter = 0;
}
_gel("ashcontainer").innerHTML = "";
_gel("ashcontainer").appendChild(images[counter]);
counter++;
}

browse();

</script>
<br />
<div style="text-align: center;">
<input type=submit value="Next ->" onClick="browse()">
<br/><br/>
<iframe src="http://rcm.amazon.com/e/cm?t=xxxxxxxxxx-20&o=1&p=21&l=ur1&category=beauty&banner=00AFNRTEE7XXVA2G6TG2&f=ifr" width="125" height="125" 

scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>

<script type="text/javascript">
_IG_Analytics("UA-xxxxxx-xx", "/ash");
</script>
]]>
</Content>
</Module>


Then paste the whole code in Google gadget editor online scratchpad and save it as an xml file. Publish the Google Gadget and get free publicity for your blog.



Lastly in Google Gadget editor go to File--->Publish----->Add to a Webpage. Customize your gadget and click Get Code button. Copy and paste the code in the Edit Html tab of post editor when creating post and Publish.
See my Google gadget with Amazon Ads. on the left side of this post.

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home