Skip navigation

Integrating Google Gadgets Into WordPress Themes

As if you weren’t satisfied with all the , you can also incorporate a wide variety of into your full version WordPress Theme.

Google Gadgets

Google Gadgets are, well, anything. They are services, searches, feeds, games, toys, information, and anything. Basically, they are tools, utilities, and games you can add to your web pages by copying and pasting the Google Gadget’s javascript into your web page design.

Most people will want to include these in their sidebars, but they can be included in any template file in a full version WordPress Theme blog.

Google Gadgets - the Moon Phase Gadget in a too narrow widthDeciding where you want to put your fun Google Gadgets on your WordPress blog is a little tricker than you may imagine. The average sidebar in a WordPress Theme is about 180 pixels wide. Some are narrower and some are wider. Most Google Gadgets are designed to fit within a 320 pixel width. This will break most WordPress Theme sidebars.

Narrow the Google Gadget and you can get a funky looking squished or half concealed image with scroll bars.

Basically, to add a Google Gadget to your WordPress blog, you have three choices.

  1. You can try to find a Google Gadget that will work within the narrow format of your sidebar.
  2. Put your Google Gadget somewhere else within your WordPress Theme.
  3. Widen the sidebar width.

To widen the sidebar width, you need to edit the style.css file in your WordPress Theme, widening the width of the sidebar to 320 pixels plus maybe a little more, but also narrow the width of your content container column to make up for the extra width of the sidebar. Otherwise, the sidebar container will push the content column down or overlap. If you add to one container, you must subtract from its neighbors. If this is too complicated for you, consider looking for a WordPress Theme with a wide sidebar, or using the Google Gadget elsewhere.

In our example, let’s skip playing with sidebar width and put the Google Gadget in the footer so it appears at the bottom of the content as a visual accessory.

Open the footer.php template file in a text editor. Look though the code in the template file for where you want the Google Gadget to appear. Some footers only include the “Powered by WordPress” with the name and link to the WordPress Theme author. Others may include a template tag to list your categories or pages. Let’s put it before all of these.

The Google Gadget we’re going to add is the . This Gadget shows the current stage of the moon.

Google Gadgets - the Moon Phase Gadget

Google Gadgets - Customizing the Moon Phase GadgetOn the Moon Phase Google Gadget’s page, click the Add to Your Web Page button and you will be taken to the customization page for the Gadget. Here, you can change the title, size, border, and more customization features.

Pay close attention to the customization features. The width and height maybe set, but the actual width is also controlled by the thickness of the border you choose. A wide border won’t make the Google Gadget wider, but it will compress the inside area. Play around with the borders to get the look you want and then play with the width and height to frame it to your specifications.

For our experiment, I changed the width to 220 pixes to narrow it a little and changed the border to the thinnest non-descript border. You can choose whatever look you want. Since I want to showcase the way the moon looks from the Northern Hemisphere, I set those settings as well.

When you have the look you want, click Get Code. A window will appear below with the Javascript for the Google Gadget. Copy the entire code.

Google Gadgets - Get Code

To select the code, you can click and drag your mouse across it. Or use the keyboard shortcut of Ctrl+A to select it all and then Ctrl+C to copy it.

Paste the javascript code into the appropriate spot in your footer with Ctrl+V, taking care to put it on it’s own line and not breaking up any PHP code sections. In your footer, you can put it under the <div id="footer> line to put it at the top of the footer before all the links.

Google Gadgets - putting the javascript code into the footer template file

I recommend you make some space above and below your Google Gadget, just to give it some room. There are a couple ways of doing this. The simplest is to add some line breaks (<br />) before and after.

The better way is to create a spacer DIV container to help you control the specific size of the space.

In the footer template file, above and below the Google Gadget Javascript, add:

<div class="spacer">&nbsp;</div>

In your stylesheet, add the following style:

.spacer {clear:both; height:10px}

This inserts a 10 pixel blank space above and below.

Let’s say in our example, we’d like the Moon Phase Google Gadget to sit on the right size of the footer with the links moved to the left. To do that, we need to put the javascript code into it’s own HTML container and add a float, an declaration in the stylesheet that instructs that container to align itself to the right of the rest of the content around it.

In the footer, let’s wrap the javascript in a DIV with a class called “gadget”:

<div class="gadget">
<script src="http://gmodules.com/ig/ifr?url=http://...
...&output=js"></script>
</div>

In the stylesheet, add the following:

.gadget {float:right;}

You can also add margin and padding space and even wrap it in a border. From here, you can do a lot more to style the container the Google Gadget sits in. Be creative.

Save and upload the changed stylesheet and footer file to your WordPress Theme’s folder and check out your new Google Gadget on display. Some editing and tweaking maybe required, but that’s the core of it.

Incorporating Google Gadgets Into Your Post Content

If you are using the full version of WordPress, you can include Google Gadgets in your blog post content. In most cases this will work.

Simply paste the Javascript code into your post.

Because the resulting Google Gadget will just sit there, not shifting to the right or left so text will wrap around it or crowd against the top and bottom, you might want to wrap it in a DIV as described above, to shift it from one side to the other or put two side-by-side.

If you have classes in your WordPress Theme for right, left, alignright, or alignleft styles in your style.css, then wrap the Javascript in a DIV with that class to float it to the left or right such as:

<div class="right">
<script src="http://gmodules.com/ig/ifr?url=http://...
...&output=js"></script>
</div>This is text that would wrap
around the Google Gadget to the left of the
image...

For more information on Javascript and WordPress, see Using Javascript in WordPress.

Warning: Fun but Filling
Overwhelming Your Web Pages With Too Many Google Gadgets

A final word of warning. It’s really easy to go nuts with these gimmick gizmos and clutter up your page with all the fun. And there are some fun Google Gadgets. Each one calls out from your website to Google’s website to pull in the information. Every one takes a few seconds to load. The more you have, the longer it may take your web page to load.

You can have a great deal of fun using the power of WordPress’ and PHP coding to show your Google Gadgets only on the front page or on specific page views like offering the Dictionary.com search or Wikipedia search on your search template file.

For bloggers, stay tuned. If these prove to be as popular as I think they will be, I’m sure they will figure out how to include them in your blogs.

So tell us all how you are adding these fun new gadgets to your blog!


*Update*

I just got an email asking me to explain how NOT to break PHP code with these Google Gadgets in your WordPress Theme’s template files.

PHP code used in WordPress begins with <? or <?php and ends with ;?>. The code between instructs your WordPress Theme to do something, such as pull information out of the database or activate a WordPress Plugin.

A PHP and WordPress template tag commonly found on most WordPress Themes is wp_list_cats, used to display links to your blog’s categories. In our example, the template tag’s arguments (instructions) are set to display category links sorted by name, showing the number of posts per category, and excludes category ID numbers 10 and 15 from the category link list:

<ul>
<?php 
wp_list_cats('sort_column=name&optioncount=1&exclude=10, 15'); 
?>
</ul>

When you paste the Google Gadget Javascript, you do not want to do this:

<ul>
<?php 
<div class="gadget">
<script src="http://gmodules.com/ig/ifr?url=http://...
...&output=js"></script>
</div>
wp_list_cats('sort_column=name&optioncount=1&exclude=10, 15'); 
?>
</ul>

That will break the WordPress template tag and PHP code and cause an error. Keep the Javascript outside of PHP statements like this:

<ul>
<?php 
wp_list_cats('sort_column=name&optioncount=1&exclude=10, 15'); 
?>
</ul>
<div class="gadget">
<script src="http://gmodules.com/ig/ifr?url=http://...
...&output=js"></script>
</div>

Adding these Google Gadgets, glorified Widgets, to your WordPress Theme should be simple and easy, if you just think it through and place the Javascript code carefully.

Related Articles


Site Search Tags: , , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network Feed on Lorelle on WordPress Subscribe

Member of the 9Rules Blogging Network

21 Comments

  1. Posted October 7, 2006 at 1:18 am | Permalink

    pretty useful…will be trying them out now.

  2. Posted October 7, 2006 at 5:56 am | Permalink

    Can I put a gadget on a post????
    Great job!!

  3. Posted October 7, 2006 at 6:58 am | Permalink

    Yes, and no. You can put a Google Gadget, which is just a javascript code, into full version WordPress posts if you follow the instructions for using Javascript in WordPress. You cannot use these inside of a WordPress.com blog or any other WordPressMU driven blogging service as they strip out all Javascript from post content.

    I’ll add specific instructions on how to add these to a post later today. Thanks for reminding me.

  4. Posted October 7, 2006 at 10:36 am | Permalink

    Thanks you very much!!!

  5. Posted November 21, 2006 at 10:59 am | Permalink

    wow! thanks! I’m actually on the process of making my own wordpres theme. I’ll try this out…

  6. Posted March 7, 2007 at 6:23 am | Permalink

    Thanks for the tips! I just forwarded this to my designer to make sure he’s doing the same! haha

  7. Posted April 6, 2007 at 9:12 am | Permalink

    Lorelle,

    Is there a way to do a fourth option: Reduce the width of a gadget that currently only works at a width wider than the sidebar? I am altering a widget I found but it only works at 400px wide. Way to wide for any sidebar and it’s just not effective in the post or footer areas of blogs.

    Thanks. :)

  8. Posted April 6, 2007 at 9:50 am | Permalink

    The only option to a gadget or widget that is wider than your sidebar is to allow it to scroll horizontally. You cannot change the size of the gadget if the gadget will not allow it. You would have to dig into the code and change it, and drag and drop in gadgets and widgets won’t allow you to do that – even if you know the code. It’s fed from offsite locations. Sorry. That’s a limitation of these things.

  9. Posted May 31, 2007 at 10:26 am | Permalink

    If you’re looking for the most popular Google Gadgets already set up for you on a really funky site? Then check out Funky Homepage (http://www.funkyhomepage.com). It’s comprised mainly of the most popular Google gadgets (as well as some great Gadgets from other sources), live news feeds (with your choice of news provider), daily Bushisms, daily jokes, horoscopes, videos, weather (up to 5 locations), interactive calendar, Google calendar viewer (for up to 5 Google calendars), comic strips and lots more besides. It also lets you choose your own search engine, colour scheme, etc.

    The whole website is subdivided into tabs and sub-categories, like “News”, “Tools” and “Fun Stuff”. So you’ll find some really useful Google gadgets like currency converters, unit converters, messengers, email tools, maps, etc. already set up for you under “Tools”; and fun stuff like games, videos, jokes, etc, already set up for you under “Fun Stuff”. The “Start” tab is fully customisable and lets you choose your own news providers and gadgets from a drop down list of the most popular gadgets available. No more wading through millions of gadgets just to find the ones that work and that are of any use! No more having to create an account and sign in! Start using Funky Homepage and get started using the most popular feeds and gadgets right away. All your settings are remembered with no need to create an account.

    It’s free to use and you can check it out at http://www.funkyhomepage.com

  10. Posted July 25, 2007 at 6:51 am | Permalink

    oh wow, I have never thought of doing this. Really nice post. Now I’m going to rush over to the gadget page and see if there is anything that would be worth putting on. And thanks for posting the warning. It’s easy to go crazy with this kind of stuff.

  11. Nicholas Boler
    Posted September 13, 2007 at 7:00 pm | Permalink

    I dont care what anyone says, Google is King. Is there something they havent thought of?

  12. Posted January 18, 2008 at 6:07 am | Permalink

    looks like need a lot of technical skill, but I hope it’s worth it

  13. Akshay Raje
    Posted December 23, 2008 at 4:18 pm | Permalink

    I have made a widget which will enable you to place a Google Gadget in the sidebar without tampering the theme in any way.

  14. Posted December 30, 2008 at 2:10 am | Permalink

    Great post!

    I’m sure gonna be using your tips to make my blogs look better.

    Thanks a lot!

  15. Posted June 21, 2009 at 11:21 pm | Permalink

    Thanks for your tips

    But i just put my Google adsense in my post :D

  16. Posted July 2, 2009 at 7:34 pm | Permalink

    That was a nice read

  17. Posted March 30, 2011 at 8:47 pm | Permalink

    How to put Google friend gadgets in wordpress?

    • Posted March 31, 2011 at 1:19 am | Permalink

      Your URL says that you are on WordPress.com. You cannot use Google gadgets on the hosted version of WordPress.

    • Posted March 31, 2011 at 1:33 am | Permalink

      Is there any way that i can use Google gadgets? Any ideas i need to change in order to use them?

    • Posted March 31, 2011 at 4:40 pm | Permalink

      If you are on WordPress.com, you cannot use Google gadgets, no matter how much you want to play with these time wasters. If you are a self-hosted blog, either these instructions or others you may find will help. Fortunately, or in your case unfortunately, Google Gadgets in websites went the way of other nasty fashion trends.

  18. Posted August 22, 2014 at 7:15 am | Permalink

    What’s up to all, the contents present at this website are in fact
    amazing for people experience, well, keep up the nice work fellows.


17 Trackbacks/Pingbacks

  1. [...] Here’s a “for dummies” tutorial on how to integrate Google Gadgets with a WordPress theme courtesy of Lorelle. tagged as: google, googlegadgets, tutorials, wordpress Related Posts: Put Google Gadgets on Your Own SiteWordPress URLs, Dates, Usability, and SEOHosted Webmail yet Again: Scoble’s on GmailHello Google, Anyone Home?Picasa Web Albums – Google Photos – Coming Soon to a WWW Near You [...]

  2. [...] Lorelle zeigt, wie es geht!   [...]

  3. [...] Integrating Google Gadgets into WordPress themes [...]

  4. [...] Integrating Google Gadgets Into WordPress Themes « Lorelle on WordPress a nice article on your options for integrating Google gadgets with your WordPress blog. (tags: wordpress gadgets google) [...]

  5. [...] Integrating Google Gadgets Into WordPress Themes « Lorelle on WordPress a nice article on your options for integrating Google gadgets with your WordPress blog. (tags: wordpress gadgets google) [...]

  6. [...] Integrating Google Gadgets Into WordPress Theme Tagged as: blog reference howto google [...]

  7. [...] Integrating Google Gadgets Into WordPress Themes Guida su come integrare i gadgets di Google nei temi di wordpress (in inglese) (tags: wordpress google gadgets widgets blogging howto) [...]

  8. [...] Lorelle on WordPress offers a tutorial on how to integrate them into your WordPress blog. [...]

  9. [...] Integrating Google Gadgets Into WordPress Themes « Lorelle on WordPress Incorporate a wide variety of Google Gadgets into your full version WordPress Theme. (tags: widgets google wordpress blog tips gadgets reference)                            Tags [...]

  10. [...] Integrating Google Gadgets Into WordPress Themes [...]

  11. [...] of Google Gadegts in general.  Lorelle gives a very nice, succinct description in her post here. By Byron Bennett [...]

  12. [...] blog Lorelle on WordPress presented how you can integrate Goole gadgets into Worldpress theme. Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]

  13. [...] There are only a few WordPress Plugins that will help you monitor other people’s money, and maybe some of your own, though there are a lot of Google Gadgets you can use are similar to Widgets and Plugins, and integration into WordPress is fairly easy. [...]

  14. [...] Integrating Google Gadgets Into WordPress Theme Tagged as: blog reference howto google [...]

  15. [...] Integrating Google Gadgets Into WordPress Themes – extend the capabilities of your WordPress blog with Google Gadgets. [...]

  16. […] Integrating Google Gadgets Into WordPress Themes […]

  17. […] these are discussing third-party content Widgets, like Google Gadgets, which bring content to your blog, take care with how many and what widgets you add to your […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,487 other followers

%d bloggers like this: