Google IG module (personalized home page)

andyatkinson · September 12, 2006

Flickr has a Google IG (a.k.a personalized home page) module (google.com/ig) and I use this all the time. I don't actually use Flickr for my photos, but I *do* have 5-10 Flickr "friends" (some I don't even know but they take great shots) and using this module, I get small 30px by 30px or so image previews from the latest photos and latest updates. I may get one photo from each user, or 2-3 photos from one user and just one from the remaining users. Anyway, its a great module and fits in nicely with my RSS reader of choice (Google IG).

Can someone hack something together like this for SmugMug? I'd like to learn the <st1:stockticker>API</st1:stockticker>, my PHP skills are inferior to my java skills, but I'll bet this would be a half-day task for a motivated individual. They wouldn't even have to do anything more than show "last 10 updates" to a specific users photos. This would be valuable for people that want to track just one user. A later enhancement could make it customizable for more users, more photos, SmugMug "friends and family" etc.

For more info I'd be happy to chat by email. Thanks in advance to anyone interested in pursuing this or providing more information on it.

greenpea · September 12, 2006

andyatkinson wrote:

Flickr has a Google IG (a.k.a personalized home page) module (google.com/ig) and I use this all the time. I don't actually use Flickr for my photos, but I *do* have 5-10 Flickr "friends" (some I don't even know but they take great shots) and using this module, I get small 30px by 30px or so image previews from the latest photos and latest updates. I may get one photo from each user, or 2-3 photos from one user and just one from the remaining users. Anyway, its a great module and fits in nicely with my RSS reader of choice (Google IG).

Can someone hack something together like this for SmugMug? I'd like to learn the <?xml:namespace prefix = st1 /><st1:stockticker>API</st1:stockticker>, my PHP skills are inferior to my java skills, but I'll bet this would be a half-day task for a motivated individual. They wouldn't even have to do anything more than show "last 10 updates" to a specific users photos. This would be valuable for people that want to track just one user. A later enhancement could make it customizable for more users, more photos, SmugMug "friends and family" etc.

For more info I'd be happy to chat by email. Thanks in advance to anyone interested in pursuing this or providing more information on it.

This is a pretty cool idea. I took a quick look into what it might take. Looks like what you do is to create a "Google Gadget" (http://code.google.com/apis/gadgets/). Test the gadget out on your own google home page, then upload it for the world to use on base.google.com. I don't have any experience with the Google API, but I believe this can be done in any language that will generate HTML and XML (i.e. Java, PHP, Perl, ASP). When I get some time I'll take a deeper look into this, I've been wanting an excuse to play around with the Google API.

greenpea · September 12, 2006

I assume that this is the Google Gadget you are talking about.

The guy who wrote this also wrote his own javascript XML parsing library (wow!), which you can find a link to in the source code. He provides his library for free use through GNU Lesser General Public License.

His gadget code, obviously won't work for smugmug, but I think his javascript XML parsing library could be used to easily parse the smugmug rss feed without the need for anything more than XML, HTML and javascript. Also after looking at everything he had to do to get the pictures from Flikr, I think it should be far easier to create a smugmug google gadget that displays pictures based on the RSS feeds for something like new photos or popular photos.

I'll play around with it this a bit and see what I can come up with.

andyatkinson · September 12, 2006

Actually slightly different
that is great news greenpea. Can you ping me if you update this, I'd be happy to test it for you!

I'll even review it on my tech website and get you some exposure.

The specific flickr module I was describing is actually this one though: flickr contact thumbnails.

I agree though, I think parsing the XML feed and then doing a little javascript according to the Google api spec should get the job done. I wanted to try this out myself, but don't have the time this week. Let me know what you find out.

greenpea · September 13, 2006

test my Smugmug Google Gadget
I got the most basic of functionality working, and I would appreciate it if anyone who has a Google homepage give this a quick try, and let me know what you think.

Here is where this *alpha* version (as in pre-beta) of the smugmug google gadget can be found:
[EDIT]
http://staff.washington.edu/gorohoff/google/smugmug-gadget-v3.xml
[/EDIT]
(Note: I reserve the right to move this to another location once I get the all functionality I want in it).

Once you add the gadget to your homepage, you to input your Smugmug nickname (unless you want to just look at the default...my pictures:D ). It will then randomly display a thumbnail picture from your rss feed of recently uploaded pictures. Clicking on that picture and it will link you back to your Smugmug web site where that picture is located.

greenpea · September 14, 2006

test my Smugmug Google Gadget v2
Got the gadget cleaned up a bit, but still have a few things I want to do to it.

Here is where the gadget is located
[edit]
http://staff.washington.edu/gorohoff/google/smugmug-gadget-v3.xml
[/edit]

How to use:
* If you have a Google homepage go to it, if you don't have one get one

* Click on the "Add more to this page >>" link in the upper left corner
* Next ot the "Search Homepage Content" button click on the little "Add by URL" link
* add the URL for smugmug-gadget-v2.xml to the Add by URL box and click the Add button
* Click "Back to homepage" in the upper left corner
* Note the cool Smugmug Photos gadget on your home page

By default the gadget will display a random photo pulled from Smugmug's most popular photos of the day.

To configure it for YOUR Smugmug site:
* on the Smugmug Photos gadget click on the edit link
* change smugmug to your nickname to show a random picture from YOUR most popular photos
- OR -
* input a gallery number (just the number).
For example if you wanted to show photos from this gallery
http://www.smugmug.com/gallery/1400653
you would input 1400653 and the control will display a random photo from that gallery.

Coming soon in the next iteration:
* Ability to show a new picture at a regular interval (i.e. new picture every 10 seconds). I just want to figure out how to do this without hitting the smugmug rss feed every 10 seconds.
* Ability to show multiple pictures in the control at the same time like on this control
* Ability to display photos based on a keyword (now that Mike Lane brought that ability to my attention).
* Sometimes a photo won't show up, I need to figure out why and get that fixed, for right now refreshing your browser will bring up a new photos.

DJ-S1 · September 14, 2006

Hmmm, I think that link to v2 is bad?

[edit]v1 works though and I can't wait to try out v2![/edit]

greenpea · September 14, 2006

DJ-S1 wrote:

Hmmm, I think that link to v2 is bad?

[edit]v1 works though and I can't wait to try out v2![/edit]

My bad...

its not V2 its V3 (seemed to have totally passed by V2).

http://staff.washington.edu/gorohoff/google/smugmug-gadget-v3.xml

andyatkinson · September 15, 2006

greenpea wrote:

My bad...

its not V2 its V3 (seemed to have totally passed by V2).

http://staff.washington.edu/gorohoff/google/smugmug-gadget-v3.xml

Hi greenpea. I was able to load an image from your page, but when I put my nickname in "aa" it continually says "Loading...". The javascript console in FF says "response.getElementsByTagName is not a function". Sorry I can't be of more technical assistance other than that for now. if you want me to look into some of the JS I can do that. I also started using the Javascript debugger at work today which could be incredibly handly if you are not already using that tool for FF.

andyatkinson · September 15, 2006

andyatkinson wrote:

Hi greenpea. I was able to load an image from your page, but when I put my nickname in "aa" it continually says "Loading...". The javascript console in FF says "response.getElementsByTagName is not a function". Sorry I can't be of more technical assistance other than that for now. if you want me to look into some of the JS I can do that. I also started using the Javascript debugger at work today which could be incredibly handly if you are not already using that tool for FF.

in getPhoto() function I'm getting and error with current item (line 54):

var nodeList = currentItem.childNodes;

currentItem has no properties

Looks like the entire source is in the javascript though eh, there is nothing else? I shoudld dig into this some...

greenpea · September 15, 2006

andyatkinson wrote:

Hi greenpea. I was able to load an image from your page, but when I put my nickname in "aa" it continually says "Loading...". The javascript console in FF says "response.getElementsByTagName is not a function". Sorry I can't be of more technical assistance other than that for now. if you want me to look into some of the JS I can do that. I also started using the Javascript debugger at work today which could be incredibly handly if you are not already using that tool for FF.

Hmm. Looks like I've got quite a few bugs left in this code. You were running v3 right? Could you give me some info about what browser your using, and what galleries you were trying to view (i.e. yours, smugmugs, popular). The "response.getElementsByTagName" is a method call in the google api. I just got the FF JS debugger, now I have to figure out how to use it.

Thanks for testing out my first attempt at a google gadget!

EDIT: One other thing to try, if you refesh your browser does it ever load an image? For some reason, it doesn't load the image sometimes.

greenpea · September 15, 2006

andyatkinson wrote:

in getPhoto() function I'm getting and error with current item (line 54):

var nodeList = currentItem.childNodes;

currentItem has no properties

Looks like the entire source is in the javascript though eh, there is nothing else? I shoudld dig into this some...

Thanks for testing the code for me.

All of my code lives only in the javascript found in smugmug-gadget-v3.xml, but I am using the google API's quite a bit. The problems seem to coming from the XML I am getting back from the my call into the google method _IG_FetchXmlContent(url, func).

Thanks again for the feedback. I'll keep working on it.

greenpea · September 15, 2006

Testing...
I tried to reproduce some of the errors that were seen.

I tested the v3 version of the gadget against all of the following browsers on WinXP PC.

Mozilla (v1.7.13)
Flock (v0.7.1)
Opera (v8.5)
Firefox (v1.5.0.6)
IE (v6.0.2900)
NN (v8.0.3.3)

I tested the default setting (nickname or gallery feild says "smugmug" and it loads most popular pics from all of smugmug.com), I tested it against a specific gallery by putting in a gallery number, and I tested it against my site (type in my nickname and get my most popular photos) and andyatkinson site.

I did run into problems with the image loading when I tested against mine and andyatkinson sites most popular photos (when I put my nickname in the edit feild). The URL was good to the photo would be good, it just never loads.

Refreshing the browser, usually caused an image to load. However, I never got any javascript errors in any of my tests.

I'll try and put some better debug code in and see if I can do something to force an error.

DJ-S1 · September 16, 2006

v3 is working for me in Firefox - cool gadget, thanks for posting it.

andyatkinson · September 19, 2006

v3 working in FF 1.5.0.7 Windows

greenpea wrote:

I tried to reproduce some of the errors that were seen.

I tested the v3 version of the gadget against all of the following browsers on WinXP PC.

Mozilla (v1.7.13)
Flock (v0.7.1)
Opera (v8.5)
Firefox (v1.5.0.6)
IE (v6.0.2900)
NN (v8.0.3.3)

I tested the default setting (nickname or gallery feild says "smugmug" and it loads most popular pics from all of smugmug.com), I tested it against a specific gallery by putting in a gallery number, and I tested it against my site (type in my nickname and get my most popular photos) and andyatkinson site.

I did run into problems with the image loading when I tested against mine and andyatkinson sites most popular photos (when I put my nickname in the edit feild). The URL was good to the photo would be good, it just never loads. Refreshing the browser, usually caused an image to load. However, I never got any javascript errors in any of my tests.

I'll try and put some better debug code in and see if I can do something to force an error.

Hi greenpea. I've got v3 working (mostly) in FF 1.5. occasionally when I hit refresh I'll get a blank image with the alt text displayed (see attach #2) and caption text below. I've also got some more feedback: have you considered implementing a "reshuffle" (see attach #1) like the Flick Contacts gadget that reloads images without a page refresh? this is a very neat way to preview thumbnails from a bunch of contacts, then jump to the full image if something catches your eye. I also made a small suggestion to add a "br" tag or space character between the title and caption if possible (see attach #1). Looks great. I'm looking forward to discussing this on my tech site. Let me know if you've got a website or blog I can link to (if you are interested in more exposure, questions, feedback, etc.). Thanks!

andyatkinson · September 19, 2006

Attachment #2
see attachment

greenpea · September 19, 2006

andyatkinson wrote:

Hi greenpea. I've got v3 working (mostly) in FF 1.5. occasionally when I hit refresh I'll get a blank image with the alt text displayed (see attach #2) and caption text below. I've also got some more feedback: have you considered implementing a "reshuffle" (see attach #1) like the Flick Contacts gadget that reloads images without a page refresh? this is a very neat way to preview thumbnails from a bunch of contacts, then jump to the full image if something catches your eye. I also made a small suggestion to add a "br" tag or space character between the title and caption if possible (see attach #1). Looks great. I'm looking forward to discussing this on my tech site. Let me know if you've got a website or blog I can link to (if you are interested in more exposure, questions, feedback, etc.). Thanks!

I've definitely got a lot of work to do on this control; unfortunately I won't be able to put a lot of work into this week. My goal is to get it automatically rotating through pictures, then to have multiple images constantly reshuffling (like the Flikr control you originally gave as an example).

I’m not sure why the image doesn’t load sometimes. Every time I’ve seen that happen the link that it uses to pull the pictures from is good.

If you look here, flyingdutchie has a working example of how to do what your talking about on your own smugmug site. I just need to figure out how to get it working on my google gadget.

Google IG module (personalized home page)

Comments