Email RSS Feed Twitter Feed They think they’re so high and mighty, just because they never got caught driving without pants.Moe

Simpsons widgets

The search engine giant Google has a cool feature called iGoogle where you can customise your home page to include news, info, games and other 'gadgets' on it.

We have created some great Simpsons widgets that you can put on your custom homepage, or on your website/blog.

Simpsons Quote of the Day

The Simpsons Quote iGoogle Gadget brings you a daily one-liner from The Simpsons. There are over 150 quotes from 25+ characters and it's being added to regularly.

Add to iGoogle

Simpsons Word of the Day

The Simpsons Word of the Day iGoogle Gadget helps you expand your vocabularly daily with a new word coined by The Simpsons. There are over 120 cromulent words to embiggen your day!

Add to iGoogle


Webmasters: add gadgets to your web site

I designed these widgets in such a way that it's very simple to add them to your web site! The instructions and code samples below should be straightforward but don't hesitate to email me if you have problems. And I always like to know when my stuff is being used so please send your comments/criticisms/suggestions too!

Iframe method (simple)

The easiest way is to use an iframe to include the same URL as the iGoogle gadget:

You can take the code below as an example. The parts in bold you may want to change:

<iframe src="http://www.simpsoncrazy.com/apps/gadgets/simpquotes.php" frameborder="0" scrolling="no" style="border: 0; margin: 0; padding: 0; overflow: hidden; width: 500px; height: 135px;></iframe>

Include method (advanced)

The alternative way is to use our "lite" version and include it directly on your page. This is a bit more advanced but more customizable. Simply add ?lite to the end of the URL above, then use PHP or another server-side language to include that URL. The PHP code would look like this:

<?php
include 'http://www.simpsoncrazy.com/apps/gadgets/simpquotes.php?lite';
?>

The content you get should inherit formatting from your page (font, colour, etc) but the CSS can be customised. The table has an id of simpsoncrazy_simpquotes (quote) or simpsoncrazy_simpwords (word) and various cell classes. Take a look at the source of the respective URLs above to see the styles/classes.

Here's some example CSS for the Quote of the Day gadget:

<style type="text/css">
table#simpsoncrazy_simpquotes td {
    font: 10pt "lucida sans unicode", verdana, arial, helvetica, sans-serif; padding: 2px;
}
table#simpsoncrazy_simpquotes td.img {
    width: 85px; text-align: right;
}
table#simpsoncrazy_simpquotes td.quote {
    font-style: italic;
}
table#simpsoncrazy_simpquotes tfoot td {
    color: #808080; font-size: 8pt; text-align: center;
}
table#simpsoncrazy_simpquotes a:link,
table#simpsoncrazy_simpquotes a:visited
{
    color: #404040;
}
table#simpsoncrazy_simpquotes a:hover {
    color: #808080;
}
</style>

And for the Word of the Day gadget:

<style type="text/css">
table#simpsoncrazy_simpwords td {
    font: 10.5pt/1.4 "lucida sans unicode", verdana, arial, helvetica, sans-serif;
}
table#simpsoncrazy_simpwords td.word {
    padding: 4px; height: 90px;
}
table#simpsoncrazy_simpwords td.img {
    width: 90px;
}
table#simpsoncrazy_simpwords td.foot {
    height: 15px; color: #808080; font: 8pt "lucida sans unicode", verdana, arial, helvetica, sans-serif; text-align: center;
}
table#simpsoncrazy_simpwords h1 {
    margin: 0; font-size: 140%; text-decoration: underline;
}
table#simpsoncrazy_simpwords p {
    margin: 0.2em 0 0 0;
}
table#simpsoncrazy_simpwords a:link,
table#simpsoncrazy_simpwords a:visited
{
    color: #404040;
}
table#simpsoncrazy_simpwords a:hover {
    color: #808080;
}
table#simpsoncrazy_simpwords q {
    color: #5c3566; font-size: 90%; font-style: italic;
}
</style>