Picasa Web Albums Integrator - show your photos on your site!
When you have a Picasa Web Albums account you know it's a nice place to store up to 1 Gb of photos. You can organise all your pictures in albums, tag and geotag them.
The Web Albums even work together with the free Picasa application. Uploading from Picasa to Picasa Web Albums is a breeze. Using the new Sync to Web option even updates your on-line Albums automatically. This means that you can update the image galleries on your website just by using Picasa, and without uploading etc. Your webalbums will even reflect changes you've made inside Picasa.
One of the drawbacks of Picasa on-line however is that the lay-out of these web albums is rather uninspiring.
Fortunately there is a Google API to extract data from the Web Albums to other aplications, including other web pages.
On this page I have used the code from http://code.google.com/p/pwi/ to create a gallery that can be inserted in any existing web page and fits into almost any design. All you'll have to do is to insert some lines of code into your existing webpage(s). Many thanks to Jeroen Diderik at www.multiprof.nl.
The Youtube video below shows the use of Picasa and Picasa Web Albums.
Download
Download this zip file, and unzip the contents.
What else do I need?
A free Picasa Web Albums account. For those of who don't have this yet, get it here. The Picasa application itself can be used without a Web Albums account. And all the free templates on this site also do not rely on such an account.
Basic instructions
1. Open the pwi-1.0.js file (use a html editor or Notepad!) and look for this line: var pwi_username = "YOUR_USER_NAME_HERE";
2. Replace YOUR_USER_NAME_HERE with your Picasa Web Albums username (this is not your Google account login name) and you're almost ready to go.
3. Insert this line <div id="container">This will contain the album(s)</div> on the spot where your Picasa Web Album should appear.
4. Finally edit your existing webpage so it points to the needed css and js files (see index.html in download).
5. Depending on your page lay-out you may have to make some (minor) changes to the attached javascript and css files. You don't need to be a senior webdesigner to do this, although some knowledge of HTML and CSS is really needed. Use a text or HTML editor like Notepad or Dreamweaver to do this.
6. Finally upload all the files and start enjoying your integrated Picasa Web Album pictures.
Integration demo Picasa Web Album "Cups by IKEA"
The images below are an example of the integration of a public Picasa Web Album in an existing (this) webpage. The PWA album itself can be seen here.