Introduction

The sample provides you an easy to way to create an Image Gallery from your Picasa account. This is achieved by making call to Picasa API (Google Data API) from your ASP.NET web application and displaying images in a gallery using a JQuery Plugin.

Prerequisites

Description

The source code is attached in this sample. I have used Default.aspx file to show image gallry, but you can use any aspx page such as Gallery.aspx in your ASP.NET project.

As a first step you need to include the css and js folder from the Galleriffic plugin source code into your ASP.NET project. Then you need include the stylesheets and javascripts in your aspx page and then design your aspx page to display the images as in an image gallery. This is detailed here - Creating picasa image gallery in ASP.NET.  

Once you have done necessary steps in your aspx page next step is to add the proper configuration in your Web.config file to include Google user name, album and password.

There can be two scenarios you can use to display the images

  1. You can display any public album which can belong to you or any other user. For this you will need google account username (yours or the username of person whose album you are accessing) and the album id.
  2. Accessing your own private album. Here you will need to provide your username, password and album id. You will need to authenticate with API using your credentials and then access the album.

 

For any of the above cases, it’s a good idea to have username and album information in Web.config as below

 

XML
Edit|Remove
<appSettings    <add key="albumid" value="5792668263385651889"/> 
    <add key="user" value="username@gmail.com"/> 
    <add key="password" value=""/> 
</appSettings> 

 

Here, user should be either your google user name or in case of a public album of some user, that user's user name.

To get album id for the album that contains the photos you want to display, you can simply brose to the album and from the url in the address bar, you can get the album id. For example in case of https://plus.google.com/u/0/photos?tab=mq#photos/114107981519387242086/albums/5792668263385651889, the album id is 5792668263385651889.

In case you are displaying your private album you will need to uncomment the following line in the code:

C#
Edit|Remove
//service.setUserCredentials(userName, password);  //-- needed when you need to show albums with private visibility
After you make the necessary changes in the config file as above you are good to go.

Source Code Files

Attached

More Information

For complete stpe by step instructions on how I built this project refer to http://techyfreak.blogspot.com.au/2012/10/an-aspnet-picasa-image-gallery.html.

The same approach can be extended to show images from Twitter, Flickr, Facebook,  Photobucket etc as well.