Esses dias surgiu a oportunidade de um trabalho, o cliente precisava reformular o site, melhorar o processo de publicação de conteúdo, entre outros… Ao acessar o site para dar uma olhada no tipo de conteúdo, me deparo com o link álbum, cliquei pra conferir e fui parar no picasa, no álbum do cara.
Muito empolgado com as funções de XML do PHP resolvi aproveitar a API do picasa para implementar um álbum com a cara do site do meu cliente mas com a infraestrutura do picasa 😀 .
O código é bem simples, coloquei comentários onde pudesse gerar dúvidas.
Segue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Álbum usando a API do Picasa + JQuery + FancyBox</title>
<style type="text/css" media="all">
html, body {margin: 0px; padding: 0px;}
body {background: #EAEAEA; font-family: "Trebuchet MS",Verdana,Arial,sans-serif; font-size: 14px; line-height: 1.6;}
a {outline: none; margin-right: 20px;}
a img {border: 1px solid #CCC; padding: 2px; margin: 10px 5px 10px 0;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fancybox.net/js/fancybox/jquery.fancybox-1.2.6.css" media="screen" />
<script type="text/javascript" src="http://fancybox.net/js/fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.zoom").fancybox();
});
</script>
</head>
<body>
<?php
/* Álbum usando API do Picasa... :D v. 0.1
*
* Auhor: Felipe Furst
* email: [email protected]
*/
$picasaUser = "mobilemechanics"; // usuário do picasa
/* ----------------- daqui só mexa se souber oq está fazendo ---------------- */
if(!$_GET["id"]) {
$tt = file_get_contents("http://picasaweb.google.com/data/feed/api/user/{$picasaUser}"); // busca os álbuns
$xml = simplexml_load_string($tt);
echo "<div id="albuns" align="center">";
for($i = 0; $i < count($xml->{"entry"}); $i++) {
$gphoto = $xml->{"entry"}[$i]->children("http://schemas.google.com/photos/2007"); // pega os nodos filhos do namespace http://schemas.google.com/photos/2007
$media = $xml->{"entry"}[$i]->children("http://search.yahoo.com/mrss/"); // semelhante à linha acima
echo "<a href="".$_SERVER["PHP_SELF"]."?id=".$gphoto->{"id"}.""><img src="".$media->{"group"}->{"thumbnail"}->attributes()->url."" alt="" /></a>";
}
echo "</div>";
}
else {
$tt = file_get_contents("http://picasaweb.google.com/data/feed/api/user/{$picasaUser}/albumid/{$id}"); // busca as fotos de um determinado álbum passado por parâmetro
$xml = simplexml_load_string($tt);
echo utf8_decode($xml->{"title"})."<br>".utf8_decode($xml->{"subtitle"})."<br>";
echo "<div id="album" align="center">";
for($i = 0; $i < count($xml->{"entry"}); $i++) {
$media = $xml->{"entry"}[$i]->children("http://search.yahoo.com/mrss/"); // esse cara aqui vc já conhece ...
echo "<a class="zoom" rel="group" title="".utf8_decode($media->{"group"}->{"description"})."" href="".$media->{"group"}->{"content"}->attributes()->url.""><img src="".$media->{"group"}->{"thumbnail"}[1]->attributes()->url."" alt="" /></a>";
}
echo "</div>";
}
?>
</body>
O bom disso tudo é que você organiza tuas fotos em uma aplicação específica para esta função, não consome tempo desenvolvendo, não consome espaço no servidor e mantém a identidade visual do site.
Claro, há o que melhorar, mas o básico tá aí. Até…
Links de APIs e bibliotecas utilizados:
http://code.google.com/intl/pt-BR/apis/picasaweb/overview.html
http://br.php.net/manual/en/book.simplexml.php
http://fancybox.net/