Google Gadgets (brunobraga.net)

Build your own Gadget for Google Sites

posted Jan 11, 2009 8:58 PM by Bruno Braga [ updated Jan 11, 2009 10:20 PM ]

If you want to directly contact me, feel free to email anytime to bruno.braga@gmail.com, or chat:

Chat with me

Here are some guidelines for writing, editing, testing and deploying Google Gadgets for Google Sites.

Getting Started

Here we will cover the starting points for using gadgets on your site.

The editing tool

Although the code is pure HTML (with JavaScript, etc) embedded in XML, which can be edited by

Contents

1 Getting Started
2 Testing and Deploying
3 Adding the gadget to your page
1. 3.1 Add new gadget
2. 3.2 Configure Gadget
4 Additional Info

using any text editor available (from Notepad to Word), Google offers a tool for you to check your code. This is very useful because:

testing:

the preview simulates your gadget and at the same time it serves as a check tool to make sure everything is ok.

deploying:

the tool handles gadgets under your Google Account, by saving and publishing them to you on a public environment (actually, it will go to the gmodules.com domain)

If you think this is not enough reason, think again. The first time you upload anything to be used as gadget (even if you leave the XML on your own web hosting), Google will cache your gadget for some time (around 2 hours, if I am not mistaken), so if you plan to test, and then upload the newer version again, note that it will take that long for the newer version to be replaced. So, the tool can save you this trouble.

Some notes to consider though:

If you plan to create Gadgets that can be used by all, it is a good practice to leave, as much as possible, the settings customizable under the Gadget Setting Form.

To do so, there is a catch with the tool above, it will not run properly for required fields that are empty. The workaround is to simply add the "default_value" property into the required field (called UserPrefs inside the Gadget), that will make the Preview option of the tool to work fine.

Writing the XML

Even if the Gadget will focus on the HTML rendering (read also the info below), writing the XML is as important as the code itself, since that is what defines all properties and information pertinent to your Gadget. With proper info, you help other people to use your gadget as well.

Some of the attributes to consider:

Module > ModulePrefs item

title=""

This is how your gadget will be presented to the public. So the title is very important. Try to be succinct but in a way that the title describes exactly what your gadget does.

title_url=""

The URL that specifies a detailed information repository of your gadget. You should always prepare a public page to leave guidelines (or even a possible ChangeLog page), for interacting with the end-user.

width=""

The default width of your gadget
Note: In Google Sites, by default this setting can be changed by the end-user, always!

height=""

The default height of your gadget
Note: In Google Sites, by default this setting can be changed by the end-user, always!

author=""

Your name, or nickname.

screenshot = ""

The URL of the screenshot of your gadget (the big version that is displayed in the pages under edit mode, in Google Sites)

thumbnail = ""

The URL of the small screenshot of your gadget (the small version that is displayed in the gadget search panel under edit mode, in Google Sites). Note that if the small version is not readable enough, be creative to attract attention of the end-users.

description=""

One of the most important parts, which explains in details what is your gadget, its purposes, and what it does.

author_email=""

To be reachable by your end-users and/or Google seems like a good idea.

For a complete guide of the valid ModulePrefs attributes, see the Google reference:
http://code.google.com/apis/gadgets/docs/reference.html#Moduleprefs_Ref

Writing the HTML

No secrets here, actually. Just the HTML code (including iframes or javascript, for instance) that you can not directly input to your page, add it in the Content property:

...
<Content type="html">
<![CDATA[
<div id="content_div"><b>Hello World!</b></div>
]]>
</Content>
...

Of course, there are more complexity involved, in order to enable the customizable data, but the best for your to do here is to go directly to Google's documentation and read it carefully until you get what you want. You can also see some real examples and base on them to make your own (here are some I designed myself):

Google's documentation: http://code.google.com/apis/gadgets/docs/legacy/gs.html
Note: The version compatible with Google Sites is the Legacy version.

Testing and Deploying

You may use the tool above for that, but for some strange reason, the embedded version of the Google Gadget Editor does not work in Google Sites, the following message is displayed:

The workaround for this is to use your iGoogle page, and simply add this gadget there. It will work fine:

Or, Google also offers a page where you can do that: http://code.google.com/apis/gadgets/docs/legacy/gs.html#GGE

Adding the gadget to your page

Follow the steps so that you can apply them into your Google Sites pages, if applicable:

Add new gadget

You may find this option at: (Page in Edit mode) Insert > More...

You will have to add it manually, clicking at "Add by URL", as shown below:

Then place the URL of your gadget (it is the URL of the XML file uploaded in your iGoogle gadget). To get it, simply right-click the file title on the top right of the gadget panel, and copy the link URL.

Configure Gadget

Based on the customizations you added to your gadget, they will be displayed here (Width and Height are default settings you can not disabled):

Additional Info

For general information on writing Google Gadgets, you may want to check this post as well:

http://www.seoish.com/how-to-make-google-gadgets-intro/

| Attachments: gadgets_editor_hosting_error.JPG gadgets_editor_igoogle.JPG

GTalk Status for Google Sites

posted Jan 10, 2009 1:14 PM by Bruno Braga [ updated Jan 11, 2009 10:40 PM ]

If you want to directly contact me, feel free to email anytime to bruno.braga@gmail.com, or chat:

Chat with me

A GTalk Status badge gadget to allow you to display your online status on your web page and guest chat.

Summary

I have posted here before about a workaround on this in my Sites Help page (Add GoogleTalk (Gmail) online status to your Sites), however Google blocked the iFrame workaround, which blocked my solution, forcing me to finally adopt the gadget solution.

More Help:
If you want information on how to build or add gadgets on your pages, please visit: Build your own Gadget for Google Sites

Configure the Gadget

Once you try to add the gadget to your page, the gadget setup should look like this:

The only information you need to change here is the "Badge URL", which is the URL extracted from the iFrame code that you are supposed to place on your webpage:

Just place that URL (complete) into this property, and the Preview screen should be able to place your name there.

The result

And here is one example of how it may look like. This page can be accessed at: Home

The Code

If someone wants to adventure on Google Gadgets creation, feel free to improve the code I designed:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
   <ModulePrefs
       title="GTalkStatus"
       title_url="http://www.brunobraga.net/gadgets/gtalk-status"
       width="200"
       height="60"
         scaling="false"
         author="Bruno Braga"
         screenshot = "http://www.brunobraga.net/gadgets/gtalk-status/gtalk-status.JPG"
         thumbnail = "http://www.brunobraga.net/gadgets/gtalk-status/gtalk-status_small.JPG"
       description="Google Gadget created to enable GTalk Status (iFrame version) functionality throught Google Sites. This will only work by extracting the source URL of the iframe code and pasting in the required parameter."
       author_email="bruno.braga@gmail.com"/>

   <Content type="html"> <![CDATA[
        <script type="text/javascript">
            /*
                File name:     Gadgets_Gtalk-Status.xml

                Description:     Google Gadget created to enable GTalk Status
                                functionality throught Google Sites
                                (which currently does not allow embedding
                                javascript, or iframe contents on it).

                Created by:     Braga, Bruno

                Last Updated:     2009/01/13

                Version:         rev002

                Remarks:
                                More info at: http://www.google.com/talk/service/badge/New
            */
        </script>
        <script type="text/javascript">
            var prefs = new _IG_Prefs();
            badge_url = prefs.getString("url");

            // Write the iframe
            document.write('<iframe src="' + badge_url + '" allowtransparency="true" width="200" frameborder="0" height="60"></iframe>');
        </script>
    ]]> </Content>
   <UserPref
       name="url"
         display_name="Badge URL (the link the iframe is opening)"
         required="true"
       default_value="http://www.google.com/talk/service/badge/Show?tk=z01q6amlqsotsibo83jt5b0r62ijaa1kpvrf35lp9lulmun33jojlgdml9tombacg55oubiajnkcct9ll803s6k10occmd39jdvm6njo33l34hn43dclnpluqqqmjb8t46t3jua600vabkensc01co947sag36um0nrcvj8a8&w=200&h=60"/>
</Module>

References

Here are some references that helped me to make this happen:

None, yet.

Updates

Here follows the updates of this article, and/or any relevant info that may be linked or helpful to this.

None, yet.

The gadget spec URL could not be found

| Attachments: gtalk-gadget_setup.JPG gtalk-status.JPG gtalk-status_small.JPG

Digg-It! - Gadget for Google Sites

posted Dec 2, 2008 5:31 PM by Bruno Braga [ updated Jan 11, 2009 9:50 PM ]

If you want to directly contact me, feel free to email anytime to bruno.braga@gmail.com, or chat:

Chat with me

A Digg gadget to allow users to add the Digg-it button into their pages (specially the Announcements pages used as Blog, or similar).

Summary

Most of the Gadgets available are actually part of the iGoogle interface, which does not quite fit to the Google Sites or even Google Pages purpose (who would want to add a "Gmail inbox view" gadget on their website?), for obvious reasons.

However, due to the lack of functionalities on Google Sites, which will soon enough replace the Google Pages as well, I felt compelled to write this one, initially to add to my own pages, but then, why not just release to all?

Contents

1 Summary
2 Adding the gadget to your page
3 More
4 References
5 Updates
1. 5.1 Gadget Url
2. 5.2 Collaboration

Of course, the Digg makes more sense with contents such as blogs and turtorials where you want some public interaction (hei, this may server as the comments section for now). So, I would suggest to place them into these kind of pages only (Digg is kind'a dirty enough of no added value pages).

Adding the gadget to your page

Follow the steps so that you can apply them into your Google Sites pages, if applicable:

Add new gadget

You may find this option at: (Page in Edit mode) Insert > More...

I am publishing this Gadget in a proper place, meanwhile, it is in my own website, at:

http://web.brunobraga.net/Gadgets_Digg-It.xml

Update: The gadget has been published at Google's Submit a Gadget site, but I don't know when it will become available (or if it ever will) on the search popup. Here is the link:

http://hosting.gmodules.com/ig/gadgets/file/112838111412942265046/Gadgets_Digg-It.xml

(but, for reference purposes, I will keep my own too)

You will have to add it manually, clicking at "Add by URL", as shown below:

Configure Gadget

Here, basically you will need only to add the "Digg URL" of the page you want to display the Digg-it. Although by default, Google also lets you choose the gadget's width and height, you don't need to do that, unless it will fit other purposes on your page.

The Digg URL page is the Digg page registered for your artcile or web page, as exemplified at: http://digg.com/tools/integrate

http://digg.com/programming/Digg_s_Eli_White_Releases_PHP_Book

where the information is content and your page title, respectively.

Click OK! And you're DONE!!

The result

And here is one example of how it may look like. This page can be accessed at: Page Naming Conventions in Google Sites

More

If someone wants to adventure on Google Gadgets creation, feel free to improve the code I designed:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
 <ModulePrefs 
 title="DiggIt" 
 title_url="http://www.brunobraga.net/gadgets/digg-it" 
 width="50" 
 height="80" 
 scaling="false"

 author="Bruno Braga" 
 screenshot = "http://www.brunobraga.net/gadgets/digg-it/digg-it.JPG"
 thumbnail = "http://www.brunobraga.net/gadgets/digg-it/digg-it_small.JPG"
 author_email="bruno.braga@gmail.com"/> 
 <Content type="html">

 <![CDATA[ 
        <script type="text/javascript">
            /*
                File name:      Gadgets_Digg-It.xml

                Description:    Google Gadget created to enable Digg-It
                                functionality throught Google Sites
                                (which currently does not allow embedding
                                javascript, or iframe contents on it).

                Created by:     Braga, Bruno

                Created Date:   2008/12/02 14:10

                Version:        rev001

                Remarks:        Required item [url] (Digg URL) is the Digg page
                                as: http://digg.com/{category}/{title}
                                More info at: http://digg.com/tools/integrate
            */
        </script>
        <div id="content_div"></div>
        <script type="text/javascript">
            var prefs = new _IG_Prefs();
            digg_url = prefs.getString("url");  
        </script>

        <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script> 
  ]]> 
 </Content>
 <UserPref 
 name="url" 
 display_name="Digg URL" 
 required="true" />
</Module>

References

Here are some references that helped me to make this happen:

Digg

Integrate: "Digg This" Button

Google

Legacy Gadgets API Developer's Guide
(particularly the editor, very good)

Updates

Here follows the updates of this article, and/or any relevant info that may be linked or helpful to this.

Gadget Url

As promissed, I left it in the GModules domain, at:
http://hosting.gmodules.com/ig/gadgets/file/112838111412942265046/Gadgets_Digg-It.xml

Collaboration

The user prac, after discussion in Google Groups, created a variation with more flexibility, such as direct URL input, background color and others. It is worth to check that out too. Thanks prac!
Gadget location at: http://philippe.chappuis.googlepages.com/digg-it-code.xml

Other sites with similar info:
http://sites.google.com/site/gsunhelp/step-by-step-guides/buildinggadgetsforgooglesites

The gadget spec URL could not be found

| Attachments: digg-it.JPG digg-it_1.JPG digg-it_2.JPG digg-it_3.JPG digg-it_4.JPG digg-it_5.JPG digg-it_small.JPG