Blogging Tips

Second to Flickr, Google owned Picasa is probably the most used photo-sharing service online. Blogger users in particular make great use of Picasa since all image uploads are hosted on their Picasa accounts.

When researching the possibilities of developing a Picasa photostream widget, I realized that widgets to display Picasa photos are actually few and far between (especially when compared to the huge variety of widgets and plugins available for Flickr).

For those who use Picasa to host their photos online, I have collected some of the most useful Picasa widgets and plugins which enable you to display your Picasa album images in your blog.

The Official Picasa Slideshow

Picasa offers a flash based slideshow for you to embed the contents of a single web album in your blog, website or MySpace profile page.

To embed a Slideshow widget, log into Picasa and click on the album you would like to embed. On the right-hand side of your page, you will see the option to “Link to this album”.

When you click this option, several menu options will appear beneath. Here you need to click on the “Embed slideshow” option which will cause a pop-up screen to appear:

Choose the size of widget you prefer and any other options to configure for your needs. A preview of how your widget will appear is on the right-hand side of the options.

Once you’re done, the code to embed the widget in your blog is displayed in the pale yellow area. Simply copy this code and paste in your blog where you would like the slideshow to appear.

Roy Tanck’s Flash Photostream Widget

Originally intended to display Flickr images in a cloud-style flash embed, Roy Tanck’s stunning widget now also supports images from your Picasa photostream:

This widget is beautiful and yet very easy to add to your blog/website in just a few clicks!

First of all, you’re going to need the URL of the Picasa RSS feed for the album you would like to embed. Log in to Picasa Web Albums and choose the album you would like to use. You will find the RSS feed for your album on the right-hand menu. Copy this URL to your clipboard, then head on over to Roy Tanck’s Photostream Widget page.

Paste your URL into the Feed URL section and adjust the other settings (width, height, color, etc) to your tastes. Then click the Generate Code button. You will now be offered a preview of your widget and the code to embed which you should copy and paste into your site.

Get Roy Tanck’s Photostream Widget

Shashin: A WordPress Plugin for Displaying Picasa Photos

Mike Toppa’s plugin for WordPress is a robust and reliable method of embedding Picasa photos in your blog. It can be used to add individual photos and videos; albums of thumbnails; random photos/videos; album covers and much more.

For full details and to download this plugin, head over to Mike Toppa’s blog

Kivela Picasa Web Album Widget (WP-Plugin)

Kivela’s answer to a Picasa photostream widget is a simple interface to display images in the WordPress sidebar.

Once you have installed the plugin in your WordPress blog, you need to add your Picasa username and configure other parameters to suit your requirements. You can choose to display photos only from a single album, or random images from across all your public albums:

To learn more and download this WordPress plugin, pop over to the Kivela Picasa Widget page.

Picasa Web Album Widget for Blogger

Beautiful Beta has developed a Picasa Web Album plugin for Blogger users. This widget will display the album covers of all your Picasa albums in the sidebar of your Blogger blog.

You will need your Picasa username to configure this widget for your needs, and can style the widget by adding CSS declarations to the &ltb:skin> section of your template.

Learn more and install Beautiful Beta’s Web Albums widget in your Blogger blog

A Simple Javascript-based Picasa Photostream Widget for all blog types

I personally find the photostream widgets which display thumbnails of photos and images to be the most appealing (and least obtrusive) when placed in blog sidebars, so I decided to create my own JavaScript-based widget which can be used to display public Picasa photos in any website or blog:

This widget displays thumbnail sized images of your latest public uploads to your Picasa account (from across all public albums). You can configure the style properties according to your needs by editing the style section included in the code.

To add this widget to your blog, copy the following code and paste into a sidebar widget (or directly in your template) where you would like this widget to be displayed. Be sure to replace “YOUR_USERNAME” with your own Picasa username!

<style>
#picasaStream img {border: 1px solid #000; margin: 0 5px 5px 0;}
</style>
<script src="http://bloggerbuster-tools.googlecode.com/files/jquery.min.js" type="text/javascript"></script>    

    <script type="text/javascript">
        $j = jQuery.noConflict();
        $j(document).ready(function(){
        $j.getJSON("http://picasaweb.google.com/data/feed/base/user/YOUR_USERNAME?kind=photo&thumbsize=72c&access=public&alt=json&callback=?",
                function(data){
                  var thumbCount = 9;
                  var smallThumb = 0;
                  var mediumThumb = 1;
                  var largeThumb = 2;
                  var picsCount = data.feed.entry.length - 1;
                  for (var i = picsCount; i > picsCount - thumbCount; i--) {
                        var pic = data.feed.entry[i];
                        $j("<img/>").attr("src", pic.media$group.media$thumbnail[smallThumb].url).attr("alt", pic.summary.$t).appendTo("#picasaStream");
                  }
                  });
                });
      </script>

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

By default, this widget is set to display the 9 most recent images from your Picasa photostream. If you prefer to display a different number of thumbnails, find this line:

                  var thumbCount = 9;

And change “9″ to the number you prefer to display.

You can also alter the style of how thumbnails are displayed by altering this section to suit your requirements:

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

This enables you to add a border, background and alter the margins between each thumbnail image as required.

Final thoughts

I hope you have found this article offers some useful widgets to display your Picasa uploads on your blog. If you know of any other functioning and useful alternatives, please let us know by leaving your comments below.