How to Integrate Google Picasa into your website with PHP

In a recent project I needed to have a simple way for the client to be able to display their snapshots on their website. I thought Google Picasa Web Albums would be ideal for this and began to put the wheels in motion. The end results can be seen in action here. Today I thought I would share with you how I went about this.

OK grab yourself some strong coffee or a bevarage of your own choice and lets get started.

This ‘how to’ assumes you have a fairly decent knowledge of PHP and that you already have installed the Google Data PHP Client Library, this is part of the Zend Framework. If not get this done at head right back here.

Step by Step

Step 1

First of all you require a Google account, if you don’t have one grab one of those (they are free) and head right back here.

Step 2

If you haven’t done so already, upload some albums. You can do this either through iPhoto using Picasa Web Albums Uploader utility on a Mac or Picasa on a Windows.

Step 3

Let’s write some PHP. First we need to load the Zend classes.

<?php
 
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
Zend_Loader::loadClass('Zend_Gdata_Photos');
Zend_Loader::loadClass('Zend_Gdata_Photos_UserQuery');

Step 4

We write the PHP to grab the album feed.

function processPageLoad() 
{
  // Parameters for ClientAuth authentication
  $service = Zend_Gdata_Photos::AUTH_SERVICE_NAME;
  $user = "username";
  $pass = "password";
 
  // Create an authenticated HTTP client
  $client = Zend_Gdata_ClientLogin::getHttpClient($user, $pass, $service);
 
  $photos = new Zend_Gdata_Photos($client);
 
  $query = new Zend_Gdata_Photos_UserQuery();
    $query->setUser($user);
    
  // set num of columns
  $columns = 3 ;
  // counter used to determine whether to end row
  $i = 0 ;
  
    // crop albmun thumbnail img to 72px
    $query->setThumbsize("72c");
    $query->setMaxResults(9);
 
    $userFeed = $photos->getUserFeed(null, $query);
    $numResults = $userFeed->getTotalResults()->text;

Step 5

Write the PHP to display the albums.

<?php 
  echo "<table border='0'>\n";
 
    foreach ($userFeed as $entry) 
  {
   
    if( $i % $columns == 0) 
    {
      //if there is no remainder, we want to start a new row
      echo "<tr>\n";                
    }   
   
    if ($entry instanceof Zend_Gdata_Photos_AlbumEntry) 
    {
      echo "\t<td>";
      
      $var = ($i % $columns);
      
      echo "<a href='gallery.php?albumId=". $entry->getGphotoId();
      echo "'>";
      $thumb = $entry->getMediaGroup()->getThumbnail();
      echo "<img alt='pic' class='galleryimg' src='" . $thumb[0]->getUrl() . "' /><br />";
      echo "</a></td>";
    }
 
    if( ($i % $columns) == ( $columns - 1) || ($i + 1) == $numResults) 
    {
      echo "</tr>\n";
    }
    
    $i ++ ;
    }
 
  echo "</table>";  
}
 
}
?>

Step 6

All that is left is to call the function where you want to display the albums.

<?php
  processPageLoad();
?>

Conclusion

Now that wasn’t too difficult was it. Thanks Google. Next time I will be showing you how access the pictures in each of the albums. In the meantime download the complete code and if you have any questions or comments please let me know.