Home › Blogs › Deepak's blog

Integrating Picasa into your website - Part I

November 24, 2007 - 11:13am — Deepak

Google Picasa is a great place to your store your favorite pictures.  It comes with 1 GB of store and you can download a desktop version of Picasa to easily bulk upload pictures. It is also one of the few photo sharing website that provider API that allow developers to integrate it into other websites.

To integrate Picasa, you can either use client-side language (such as Javascript) or server-side languages (such as PHP).  In this first of two parts article I will discuss a Javascript (JSON) solution.

The Basics

Picasa providers an RSS feed of a user's albums and pictures.  Instead of RSS you can also chose to get a JSON (Javascript Object Notation) version that will allow you to parse the albums without being familiar with XML.

RSS version: http://picasaweb.google.com/data/feed/base/user/<username>?kind=album&alt=rss

JSON version: http://picasaweb.google.com/data/feed/base/user/<username>?kind=album&alt=json&callback=parseAlbums

Code Snipplet

Here's a possible implementation of parseAlbums function:

function parseAlbums(data) {

  var nAlbumsCount = data.feed.entry.length;
  var gItem;
  var strTitle:
  var strDescription;

  for (var i = 0; i < nAlbumsCount; i++) {

     gItem = data.feed.entry[i];
     strTitle = gItem.title.$t;
     strDescription = gItem.media$group.media$description.$t;

  }

}

 
I took this basic code and created a wrapper around it in a JavaScript library.  By defining a few HTML elements and making 3 simple function calls, you can have a functioning integration:


<head><title>Picasa Example></title></head>
<body>

...

<script src="picasa.js"></script>

<script type="text/javascript">
 var objPicasa = new MyGooglePicasa("deepak528");
 objPicasa.init("deepak528", "divAlbums", "divHeaderLeft", "divHeaderCenter", "divHeaderRight");
 objPicasa.setAlbumSuffix(" (optics)");
 objPicasa.write_json_code();
</script>

</body>

</html>

Attachments

picasa.js - defines "MyGooglePicasa" object
picasa.cs - some style information
picasa.html -  A sample webpage