Labels

Picasa Photos in Blogger

I've been working on ways to get photos from Picasa into my Blogger hosted website. The normal slideshow doesn't work for me as it takes the user away to the Picasaweb pages.

Also when you take photos in the volumes I do, adding them one by one also doesn't work.

I had a look at the Picasa API options from Google, and was able with this simple PHP script to at least generate HTML code for each photo in a Picasa album. Host this somewhere or local using WAMP server.

Find the user ID and album ID, feed it in and run the script. When the output looks like you want it, view source and copy from <table> to </table> into your Blogger post.

The 'style="float: right; margin-bottom: 1em; margin-left: 1em;"' is the part that makes the click of a thumbnail load as a pop-up and not in a new window.

I want to work out a way to add Facebook Like and Google+ on a per photo level so I will probably update this script.

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>PicasaWeb Albums</title>
<?php
    // Check if action is set
    if(isset($_POST["action"]))
    {
        switch($_POST["action"])
        {
            case "user_submit" :
                // Submission from the number submit form
                header("Location: ".$_SERVER["PHP_SELF"]."?user=".$_POST["user"]."&album=".$_POST["album"]);
                die();
            default :
                die("Unknown action : ".$_POST["action"]);
            break;
    }
}
?>
</head>

<body>

<?php
                    global $_GET;
                    $user=$_GET[user];
                    $album=$_GET[album];
                    $user=preg_replace("/[^A-Za-z0-9.]/","",$user);
                    $album=preg_replace("/[^A-Za-z0-9.]/","",$album);
        
?>

    <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
        <input type="hidden" name="action" value="user_submit" />
        Please enter a PicasaWEB user ID : <input type="text" name="user" value="<?php echo $user; ?>"/><br>
        Please enter a PicasaWEB album ID : <input type="text" name="album" value="<?php echo $album; ?>"/><br>
        <input type="submit" value="Submit" />
    </form>

<?php

    // set feed URL
    $feedURL = 'https://picasaweb.google.com/data/feed/base/user/'. $user .'/albumid/'. $album;

    // read feed into SimpleXML object
    $sxml = simplexml_load_file($feedURL);
    
    echo "<table border=0><tr>";
    $cellnr = 0;
    
    // iterate over entries in feed
    foreach ($sxml->entry as $entry) {

        // get nodes in media: namespace for media information
        $media = $entry->children('http://search.yahoo.com/mrss/');
    
        // get thumbnail
        $attrs = $media->group->thumbnail[1]->attributes();
        $thumbnail = $attrs['url'];
        
        // get image
        $attrs = $media->group->content->attributes();
        $image = $attrs['url'];
        
        if ($cellnr == 4) { 
            echo '</tr><tr>'; 
            $cellnr = 1;
        } else {
            $cellnr = $cellnr + 1;
            }
        
        echo '<td valign="middle">';
        echo '<center><a href="' . $image . '" style="float: right; margin-bottom: 1em; margin-left: 1em;">';
        echo '<img src="' . $thumbnail . '" /></a><br>';
        echo '</center>';
        echo '</td>';
        
    }

        echo "</tr></table>
        
        </body>";

?>

The source code part of this post was generated at http://formatmysourcecode.blogspot.com/
Labels:

Popular Posts