Some have asked me how I integrated the Picasa Webalbums as I did on my site here.
This is a short tutorial on how to do this the way I did for SPHPBlog (Simple PHP Blog).

Step 1.
Download pwa.js, a javascript originally from Haochi Chen at http://googlified.com.

Upload the pwa.js and lightbox-files to the root or a subdirectory of your site.
Make sure you set the correct paths of the js src attributes in step 2 when placed in a subdirectory.

Step 2.
Create a static page with a static-entry-name: “photogallery”
You may call the entry differently, but then you will have to adapt the js code.
I might implement autosensing the entryname in a future release.

and include the following html code:

[html]
<script type="text/javascript">
username = 'your.username';
photosize='512';
</script>
<script type="text/javascript" src="/pwa.js"></script>
[/html]

Step 3.
Set the correct value of the variables username and photosize.
The username is the picasa webalbum gallery name that can be found in the picasa webalbum settings menu under gallery-URL, which is most of the time the same as the username.

Step 4.
Save the page!

MY PERSONALISED VERSION DETAILS FOR SPHPBLOG
Remember, I adapted the script to work with SPPHPBlog and added paging and lightbox view.
You can further personalize this script by changing the number of rows and columns you want to see in the pwa.js at line 32 and 33. The number of rows is defined by the maxreslts / cols.
Thumbsize can be changed at line 56 (albums) and 140 (photos). Keep in mind that the API of google doesn’t support a lot of different sizes, to create a certain thumb size you might have to use browser scaling on your images which doesn’t do any good to the quality.

Questions or remarks, place a comment or send me a mail through the Contact page.

Yours truly,

JD (Jeroen Diderik)

Popularity: 13% [?]

Other posts

One Response to “Picasa web album integration in Simple PHP Blog”

  1. thomas yu says:

    I have tried to make use of the above script to access the picasaweb album for lifstyle3. The pwa.js seems failure to process the RSS feed. I guess that the cause may be the RSS actually contains some Asian characters or some special characters which cause the parsing to failure.

    If I try back the sample album from google (tester), everything works fine.

    If my guess is right, how can I identify which album cause the error?