Create Interactive Gadgets for Blogger with the improved API

In recent times, Blogger has improved drastically in terms of interactivity, customization and new features. Most recently, we have been able to search for and add Google gadgets to our blogs directly through the Blogger dashboard, a feature which has now been rolled out to all Blogger blogs across the system.

On Thursday, Blogger announced several updated for the Gadget API which enables developers to create more interactive gadgets for use with the Blogger platform:

In addition to leveraging social data, gadgets can now access a blog’s post and comment feed via new JSON APIs. For example, with this data you could easily build a map gadget that maps the geo-location of posts, or a “Most Commented On” gadget that ranks posts by the number of comments they’ve received.

What’s more, we can also add our own Gadgets to the directory using an online submission form; this enables our gadgets to be visible in the Gadget directory within 30 minutes of submission, ready for Blogger users to add to their blogs with just a few clicks.

How are Gadgets Constructed?

Google (and Blogger) Gadgets are constructed in XML format, but don’t be put off developing gadgets if you have little knowledge of XML – it is easily possible to create a simple gadget if you have only a little knowledge of HTML!

A very simple gadget can be created using only a few lines of code. Let’s take a look at the “Hello World” example which is explained in the Google Gadget – Getting Started page:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="hello world example" />
  <Content type="html">
     <![CDATA[
       Hello, world!
     ]]>
  </Content>
</Module>

This simple gadget will produce a message saying “Hello World” in the blog (or website) where it is installed.

This basic gadget includes the following components:

  • In line 1, we can see the XML specification for the gadget.
  • Line 2 includes the <Module> tag. This indicates that the XML file contains a gadget, and enables it to be processed as such.
  • Line 3 includes the <ModulePrefs> tag, which includes information about the gadget. In the above example, this tag cites only the title (“hello world example”). We can also include information about the Gadget’s author, a description and other optional information in this section.
  • Line 4 uses the <Content type> tag, which in this case defines the content of the gadget as HTML code.
  • The <![CDATA[ and ]]> tags are used to contain HTML and JavaScript code. Content between these tags typically defines the content and interactivity of the gadget, and for most developers will become the central focus of their gadgets interactivity.
  • The closing </Content> tag defines the end of the content section, while </Module> signifies the end of the Gadget’s code.

Constructing interactive gadgets for Blogger Blogs

When developing Gadgets for use in Blogger, we can use the API to access public post and comment data for the blog which is hosting the gadget. In the most basic forms, this enables us to retrieve and write a list of recent posts or comments for the blog in which the gadget is installed.

We can also access the Friend Connect API to provide social widgets which are interconnected with data produced by the blog on which the gadget is installed, for example, a widget which displays recent comments and highlights those which have been made by a friend of the viewer (see this example).

Some knowledge of JavaScript and JSON is crucial when developing interactive widgets which rely on the updated APIs.  You can find a complete guide to using JSON feeds with Google’s APIs here.

To utilize the APIs for the services on which your gadget will be based, you will need to include these APIs as “required features” in the code of your gadget, like this:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs height="300" title="BlogSocial">
  <Require feature="opensocial-0.7"/>
  <Require feature="google.blog"/>
  <Require feature="skins"/>
  <Require feature="views"/>
 </ModulePrefs>

A full list of features which can be optionally required by Gadgets for Blogger can be found here.

Once you have specified the feature you require for your gadget, you will need to utilize JavaScript to parse and display the items within your gadget. This aspect of your gadget will depend highly on the features you wish to use.

Luckily, Blogger have provided a couple of examples using Blogger feeds, Friend Connect and Open Social features which you can browse through to see how these are constructed.

What new gadgets can we expect to see?

The Blogger Team recently asked Blogger users which gadgets they would most like to use for their blogs; this page details the most requested widgets, and now it is possible for developers to create many of these gadgets including:

  • A recent activity widget, based on Google Friend Connect
  • A popular posts widget based on the number of comments received for each post
  • Recent posts and/or comments in the sidebar (which could even be coded with tabbed navigation!).

Essentially, the list of possibilities are endless!

The updated API and knowledgebase for developers is still rather new, but with these new options available we can expect to see a whole host of new and interesting gadgets available especially for those using Google Blogger.

Want to learn more?

As an avid Blogger user and developer, I’m certainly interested in using the updated API to create some useful and interesting widgets for use in our blogs.

For my post next week, I will explain how to develop a simple Gadget for Blogger using the API for Blogger post and comment data which you can use as a base on which to develop your own interactive gadgets.

  • 1
  •  
  •  
  •  
  •  

Disclosure: In full disclosure, it is safe to assume that the site owner is benefiting financially or otherwise from everything you click on, read, or look at while on my website. This is not to say that is the case with all content, as all publications on the site are original and written to provide value and references to our audience.

5 Comments

  1. Tech-Freak Stuff June 22, 2009
  2. Bob June 24, 2009
  3. Amanda June 24, 2009
  4. shravan mishra June 25, 2009
  5. Josly July 3, 2009