Picasa (or Google) offers nothing in the way of little blog widgets (unlike Flickr’s great support for everything), nor is there really any third-party support for this kind of thing out on the web.

I don’t understand why, since — at least to me — what Picasa offers for free is so much better than what Flickr offers, still, even to this day. :\

Every third-party WordPress plugin I’ve tried either doesn’t work, doesn’t work right, or needs so much configuration on the server side — and I’m talking about editing raw PHP here (unacceptable) or creating farking CURL scripts for the server (why did you even release this plugin?).

Sadly enough, the BEST solution I could find for the problem of integrating Picasa was actually done in straight JavaScript (yay!), found here: http://www.bloggingtips.com/2009/03/23/picasa-widgets-and-plugins-for-your-blog/

Her code works great, works fast, requires almost no configuration (besides your Picasa username), and uses JQuery, so pretty much anyone can edit and customize it.

Which I did. ^_^ Though the code works, it doesn’t appear to always grab your latest photos from Picasa. (I’m guessing it has something to do with the “max-results” flag in the URL string — you have to restrict the number of photos that Picasa feeds up for you to get the latest.) I also made each photo be a link to the Picasa page where it’s at, as well as cleaning up the code a little.

There’s basically two parts:

First, put this code in a widget text block where you want it to be in your wordpress blog (this is also where you can edit the style):

<style>
#picasaStream img {border: 1px solid #000; margin: 0 5px 5px 0;}
</style>  

<div id="picasaStream"></div>

Second, put this code either right after the widget, or wherever you put your JavaScript (if you choose to put it in another place, like a footer):

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">
/*
****	Uncomment this line if you are using other JavaScript libraries
****	(Prototype, Scriptaculous, etc.)
*/
// jQuery.noConflict();

jQuery(document).ready(function(){
	/*
	****	Change your Picasaweb username here,
	****	as well as how many thumbnails you want to show
	*/
	var _userName = "captainskyhawk",
		_count = 6

	/*
	****	Choose your thumbnail size here:
	**** 	"0" for small, "1" for medium, and "2" for large
	*/
	var _thumbnailSize = 0;

	/*
	****	Script Code
	****	No need to edit any further
	*/
	jQuery.getJSON("http://picasaweb.google.com/data/feed/api/user/"
		+ _userName + "?kind=photo&thumbsize=72c&access=public&alt=json&max-results="
		+ _count + "&callback=?",
		function(data){
			jQuery.each(data.feed.entry, function(index, pic) {
				jQuery('<a href="' + pic.link[1].href + '"><img src="'
					+ pic.media$group.media$thumbnail[_thumbnailSize].url
					+ '" alt="' + pic.summary.$t + '" /></a>')
				.appendTo("#picasaStream");
			});
		}
	);
});
</script>

Just change your name in the code from “captainskyhawk” (that’s me!), and it should work!