The Captain’s (B)log

OMG is this so much harder than it needs to be.

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!