How to Display Picasa/Google+ Images On Your Website without Any Authentication?

google plus picasa Posted by : rvlive

Many a times we need to show some of our picasa images or albums on our website without the need of passing through the google authentication mechanism. For such cases, we can use the following method. The method described includes the use of JavaScript, making itself suitable and usable for all the languages and CMSes.

Google provides us an API for requesting a required set of parameters from a particular picasa album. The primary requisites are:

  • Google Account User ID (in numeric or text format).
  • Album ID of the Picasa Album to which the image belongs.
  • Name of image to be displayed.
  • The Image Must be Publicly Shared on Picasa/Google+.

Basic Principle Behind Image Display:

Google provides us an access to a feed listing all albums belonging to a particular userID when we send the following HTTP request:

https://picasaweb.google.com/data/feed/api/user/userID

For Example: If my Gmail ID is aks.shukla07@gmail.com, I’ll send the following HTTP request:

https://picasaweb.google.com/data/feed/api/user/aks.shukla07

This will provide me a feed, in JSON format having the details of all my albums and a public link to get further contents of those albums in form of JSON feed. The links of my albums would be something like this:

https://picasaweb.google.com/data/feed/api/user/userIdInNumericForm/albumid/albumID

https://picasaweb.google.com/data/feed/api/user/108744674552167197428/albumid/5873248688253721681

We can use our textual gmail id (ex – ‘aks.shukla07’) and numeric userID (like 108744674552167197428) interchangeably.

So requesting this
'https://picasaweb.google.com/data/feed/api/user/aks.shukla07/albumid/5873248688253721681'
will also fetch the same result.

Again, when you go to the above URL, you will be provided the image links along with other meta data of all the public images in this album. The image links would be something like this:

https://lh5.googleusercontent.com/-pyBCGRcPQq4/UYH4kGzkXFE/AAAAAAAAAGs/b98ESxwXqiI/s160-c/ProfilePhotos04.jpg

How to request your image based on the above principle?

If we carefully take a look at the URL again,

https://picasaweb.google.com/data/feed/api/user/108744674552167197428/albumid/5873248688253721681

We observe that google provides us an API for fetching our public images of picasa albums without getting authenticated.

The complete syntax of the URL is as follows:

  • To fetch data of all album:

    http://picasaweb.google.com/data/feed/base/user/:user_id?alt=json&kind=album&hl=en_US&access=visible&fields=entry(id,media:group(media:content,media:description,media:keywords,media:title))&callback=?&imgmax=1000

  • To fetch data of a single album:

    http://picasaweb.google.com/data/feed/base/user/:user_id/albumid/:album_id?alt=json&kind=photo&hl=en_US&fields=entry(title,gphoto:numphotos,media:group(media:content,media:thumbnail))&callback=?&imgmax=1000

For more details of these syntax parameters included in the query string of the URL, please visit this links:

https://developers.google.com/picasa-web/docs/2.0/reference#Kin
https://developers.google.com/picasa-web/docs/2.0/reference#Parameters

1. Displaying a complete album on your webpage:

Our approach is to first fetch meta-data feed of all the albums by using this URL:

http://picasaweb.google.com/data/feed/base/user/:user_id?alt=json&kind=album&hl=en_US&access=visible&fields=entry(id,media:group(media:content,media:description,media:keywords,media:title))&callback=?&imgmax=1000

Then we traverse through this feed to get the details of our desired album. We use the details thus obtained to request the images of that album by using the second request:

http://picasaweb.google.com/data/feed/base/user/:user_id/albumid/:album_id?alt=json&kind=photo&hl=en_US&fields=entry(title,gphoto:numphotos,media:group(media:content,media:thumbnail))&callback=?&imgmax=1000

Then we traverse through the album and display all its images using the links fetched from the above request.

2. Displaying a particular image on your webpage:

We use the album_id to request all the images of that album by using the second request:

http://picasaweb.google.com/data/feed/base/user/:user_id/albumid/:album_id?alt=json&kind=photo&hl=en_US&fields=entry(title,gphoto:numphotos,media:group(media:content,media:thumbnail))&callback=?&imgmax=1000

Then we traverse through the meta-feed having links and other meta-info regarding the album and display only image(s) that are required.

NOTE: We can find the album_id in the URL when we visit our album on picasaweb.google.com . It is in the address bar of the browser at that moment.

Code

We will be using jQuery code. The main benefit of using  jQuery code is that it can be used across all platforms/programming languages/CMSes. The following is the code snippet:

<html>
<head>
<title>
Picasa Image Demo
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// Define core functions-----------------------------------------------------------------------

(function($) {
$.picasa = {
albums: function(user, callback) {
var url = "http://picasaweb.google.com/data/feed/base/user/:user_id?alt=json&kind=album&hl=en_US&access=visible&fields=entry(id,media:group(media:content,media:description,media:keywords,media:title))&callback=?&imgmax=1000";
url = url.replace(/:user_id/, user);
$.getJSON(url, function(data) {
var album = null;
var albums = [];
$.each(data.feed.entry, function(i, element) {
album = {
id: element.id["$t"].split("?")[0].split("albumid/")[1],
title: element["media$group"]["media$title"]["$t"],
description: element["media$group"]["media$description"]["$t"],
thumb: element["media$group"]["media$content"][0]["url"],
}
album.images = function(callback) {
$.picasa.images(user, album.id, callback);
}
albums.push(album);
});
callback(albums);
});
},

images: function(user, album, callback) {
var url = "http://picasaweb.google.com/data/feed/base/user/:user_id/albumid/:album_id?alt=json&kind=photo&hl=en_US&fields=entry(title,gphoto:numphotos,media:group(media:content,media:thumbnail))&callback=?&imgmax=1000";
url = url.replace(/:user_id/, user).replace(/:album_id/, album);
var image = null;
var images = [];
$.getJSON(url, function(data) {
$.each(data.feed.entry, function(i, element) {
image = element["media$group"]["media$content"][0];
image.title = element.title["$t"];
image.thumbs = [];
$.each(element["media$group"]["media$thumbnail"], function(j, j_element) {
image.thumbs.push(j_element);
});
images.push(image);
});
callback(images);
});
}
};

$.fn.picasaAlbums = function(user, callback) {
$.picasa.albums(user, function(images) {
if (callback) {
callback(images);
}
});
};

$.fn.picasaGallery = function(user, album, callback) {
var scope = $(this);
$.picasa.images(user, album, function(images) {
if (callback) {
callback(images);
} else {
var picasaAlbum = "<ul class='picasa-album'>\n";
$.each(images, function(i, element) {
picasaAlbum += " <li class='picasa-image'>\n";
picasaAlbum += " <a class='picasa-image-large' href='" + element.url + "'>\n";
picasaAlbum += " <img class='picasa-image-thumb' src='" + element.url + "'/>\n";
picasaAlbum += " </a>\n";
picasaAlbum += " </li>\n";
});
picasaAlbum += "</ul>";
scope.append(picasaAlbum);
}
});
}
})(jQuery);

//---------------------------------------------------------------------------------------------

//To display single image:
var iname = "Your image name";
var puid = "Your GMAIL ID";
var palid = "Your album id";
$.picasa.images(puid, palid, function(images) {
var picasaAlbum = "<ul class='picasa-album'>\n";
$.each(images, function(i, element) {
if (element.title == iname)
{
picasaAlbum += " <li class='picasa-image'>\n";
picasaAlbum += " <a class='picasa-image-large' title='"+ element.title +"' href='" + element.url + "'>\n";
picasaAlbum += " <img class='picasa-image-thumb' src='" + element.url + "'/>\n";
picasaAlbum += " </a>\n";
picasaAlbum += " </li>\n";
}
});
picasaAlbum += "</ul>";
$("#picasa-albums").html(picasaAlbum);
});

//---------------------------------------------------------------------------------------------

//To display all images of the album:
var puid = "Your GMAIL ID";
var palid = "Your album id";
$("#picasa-gallery").picasaGallery(puid, palid);
$.picasa.images(Drupal.settings.picasa_uid, Drupal.settings.picasa_aid, function(images) {
var picasaAlbum = "<ul class='picasa-album'>\n";
$.each(images, function(i, element)
{
picasaAlbum += " <li class='picasa-image'>\n";
picasaAlbum += " <a class='picasa-image-large' title='"+ element.title +"' href='" + element.url + "'>\n";
picasaAlbum += " <img class='picasa-image-thumb' src='" + element.url + "'/>\n";
picasaAlbum += " </a>\n";
picasaAlbum += " </li>\n";
});
picasaAlbum += "</ul>";
$("#picasa-albums").html(picasaAlbum);
});
</script>
</head>
<body>
<div id="picasa-albums" style="clear:both;"> The picasa albums will be displayed in this div on page load. </div>
</body>
</html>

So, using the above code at the right time will help you in displaying your Picasa/Google+ pictures in the best possible way. Enjoy happy photo editing and uploading now.

Share Button

Leave a reply

Leave a Reply

Your email address will not be published. Required fields are marked *