Difficulties with Google Gadget in WordPress

I had a hard time trying to put my little flickr-show Google Gadget into a WordPress page -- Various versions of the gadget has been used in Google Sites and Blogger pages (also on the sidebar) successfully.

This gadget is very much a proof of concept: The Gadget concept is Google's way for developers to write small apps in XML and JavaScript that could be placed in all kinds of web pages and the Google Desktop. It's not a novel concept but Google seems to be the most open among the companies that have something like it. Google Gadget is simple conceptually: You write an XML module that specifies a number of things, among that relevant to interfacing with the users are (1) a section for options, (2) content area which functions as an HTML/DOM container, (3) JavaScripts that work in the content area and (4) optional message files in XML for multiple language support.

One issue I take with Google's handling of gadgets is inconsistency: The same gadget behaves differently in Google Sites than in a non-Google website where you have to use Google's gadget creator tool to turn the XML modules into an HTML for rendering by user's browsers. Little differences can be very annoying. For example, the gadget creator tool generates three div containers around the iframe with white background color for no apparent reason. I mean, I can understand that Google wants to put their logo on rendered gadgets, but why this obnoxious white background?

Blogger allows gadgets in the sidebar directly. But if you want to put one in your blog entry contents, you have to run it through the gadget creator. Now, on to what I think is a bug somewhere in the Google code cloud. The code the creator tool generated calling Flickr's API function to search for photos returns an empty list in a WordPress page while it works in a Blogger page -- I have later learned that this could be caused by the chaotic use of jQuery in WordPress and many of its plugins, but this seems to be a problem of a different kind as the call does go out through Google's gadgets.io.makeRequest() proxy function and return with results.


To avoid using the Google gadget creator tool, I made changes to make the flickr-show.js module work with or without the Google Gadget API.


On the WordPress side, we observed a situation in which multiple instances of jQuery gets loaded. Which caused chaos for jQuery UI: UI widget functions would randomly disappear from the jQuery namespace. WordPress seems to need a JavaScript library manager badly -- something like the Drupal JavaScript Libraries Manager.

No Short URL on Flickr?

I tried to put a Google Maps link to the Kiva Koffeehouse in the description of my photo on Flickr, Flickr keeps saying There was an error.

Posting a comment with the link, Flickr says: Hey! A URL or phrase that you tried to post has been used for abuse on Flickr before. (ex. SPAM) If that's you, stop it! If that's not you, sorry, but you can't post it.

So, Flickr seems to have effectively banned short URLs, or at least Google's short links.

That seems to be an unfair practice. But I guess Flickr has no good way to work around short linked web pages using photos shared on Flickr without linking back.

Flickr: Groups and Tags

Flickr is an easy to use photo-sharing web service.

I have created a Google Gadget called flickr-show to display shared photos when I needed such a tool for showing photos on the AHRP website. The gadget allows me to display a set of photos on Flickr selected by a combination of a group and some tags.

A group on Flickr is simply a way for people with similar interest to share photos. For example, I have created a group called AHCS for friends of the Ann-Hua Chinese School to share their photos about or related to the school.

Tagging is another way for people to find photos on Flickr. For example, by tagging a photo with AHCS, we allow ourselves and others to search for photos related to the school; With a tag 2010, we limit the search to photos taken in the year of 2010; Using 3 tags together, AHCS,2010,mid-Autumn, we can limit the selection of photos to those taken at the AHCS 2010 mid-Autumn gala.

Now a bit of boring instructions for joining a group on Flickr and tagging photos:

• Group
• Before you can add photos to a group, you have to join the group first: You go to your page on Flickr, which is called your photostream page. For example, mine is at http://www.flickr.com/photos/gswj/.
• On that page, you will see a horizontal menu right under the Flickr icon on the top of the page. The first item is Home, then You, and so on. The 5th item is Groups with a little downward triangle next to it.
• AHCS is an open public group, meaning anyone may apply to join. Here is the generic way to join a group on Flickr: Click the word Groups in the main menu -- not the triangle. You will see a page the groups you administer, created, and belong to, etc. You will also see a Find group search box on the right side of the page.
• Enter AHCS in the search bar and click the Search button. The AHCS group has the Ann-Hua logo on it so you won't miss it.
• Click the group name or logo to enter the group page. You should see a Join? link somewhere in the page. Click that to join. That sends an application to the group administrator, that is yours truly for now.
  
• Go back to your photostream page. Find the Organize and Create menu item with a little downward triangle. Click on the little triangle to pull down the menu and select All your content or Most recent upload, depending on what you have.
• That opens the Batch organizer. There, you will see your photos shown as thumbnails across the bottom of the window.
• Right above the thumbnails, there is a Select all (very small) link. Click that to select all the photos; Or you may manually select one and the shift-click to select a group of photos.
  
• Drag and drop the selected photos into the center part of the window that displays Drag items here to edit them as a batch. If you get it right, your photo thumbnails will be displayed in that area.
• In the Batch Organizer, there is also a menu item called Send to group. Click that.
  
• You will see AHCS in a list of groups you are a member of. Click it to add your photos to the group.
  
• Tag
• This should be relatively easy: We'll assume you have just done sending the photos to the AHCS group as outlined above and continue from there.
  
• Right above those photo thumbnails, there is a horizontal menu item under Batch Organize labeled Add Tag. Click that.
• You should then see a pop-up for you to enter tags. Enter AHCS 2010 2010-10 mid-Autumn and hit the Enter key.
  
• You are done!

Once accepted in the AHCS group, your photos tagged with AHCS 2010 mid-Autumn will appear in this slide show.

My first Google gadget: flickr-show

Here it is:



This example shows photos published by anyone on Flickr with the tag UT12.

[Update 2010-10-14] Version 1.1 is now functioning, with bug fixes and a photo pre-loading new feature.