Picasa WebAlbum Integrator: Galeria De Fotos Para O Google

Picasa web integrator.

Picasa Web Integrator é uma biblioteca em javascript que lhe permite, de forma simples e eficiente, inserir suas fotos do antigo Picasa, atualmente chamado Google Fotos, em um site ou blog. Tem como base visual o sistema Slimbox2, que certamente trarão um charme a mais para suas páginas. Saiba que são necessários conhecimentos intermediários sobre como criar sites para executar os procedimentos. Se tiver alguma dúvida deixe um comentário, mas lembre-se de dar detalhes sobre seu problema.

O sistema é muito prático, após instalado, a galeria de imagens ficará plenamente sincronizada com as fotos armazenas no Picasa. Mas nem tudo são flores, para executar o passo a passo a seguir serão necessários conhecimentos básicos de HTML além de um serviço de hospedagem:

1 – Faça o download do Picasa Web Integrator modificado.
2 – Abra o arquivo pwi-1.0.js com seu editor de texto
3 – Procure pela linha: pwi_username = “YOUR_USER_NAME_HERE”;
4 – Subistitua YOUR_USER_NAME_HERE com o seu login.

Como você já deve ter reparado o arquivo pwi-1.0.js contém a maioria das variáveis de customização. Já no passo quatro o sistema estará funcionando no modo standard. Para testar abra o arquivo index.html no seu navegador e as fotos e álbuns do Picasa deverão aparecer, a seguir:

5 – Upe todos os arquivos do PWI para sua hospedagem.
6 – Insera os scrips e css entre as tags Head.
7 – No local da galeria insira uma DIV com id=”container”.
8 – Use o arquivo index.html como modelo nos passos 6 e 7

Funciona perfeitamente com o blogger também. Nele os scripts podem ser colocados tanto no template como diretamente no corpo do post (recomendado). Dependendo das configurações de CSS do seu site bugs podem ocorrer. No meu, por exemplo, o visual ficou completamente torto. O problema era que o id=”container” já estava sendo usado por outra por outra DIV.

Mudando o nome do ID nas configurações do PWI o problema se resolveu. A propósito o arquivo pwi-1.0.js possui muitas outras opções como: alterar o álbum a ser exibido, mudar o tamanho das miniaturas e da imagem grande, alterar os texto que devem ou não aparecer entre outras. Tudo muito bem comentado. É isso, siga essas dicas que com um pouco de paciência você irá conseguir fazer a sua galeria também.

! 54 comentários até o momento

Escreva O Seu Comentário!

Ficou com alguma dúvida?
Tem uma crítica construitiva ou uma sugestão maneira?
Escreva ai embaixo, mas não maltrate o português, por favor!

  1. Leandro Lestat comentou: responder

    Como você fez pra usar as opções Anterior | 1 2 3 4 5 6 7 8 9 10 11 | Proximo igual na sua demonstração acima???

  2. Anonymous comentou: responder

    Ja resolvi o problema que disse acima no código CSS pwi-1.0.css.
    na tag .pwi_album{. Mudei o valor para um maior.

    Valeuuu!

  3. Anonymous comentou: responder

    MARAVILHA!!!
    Funcionou perfeitamente aqui. Valeu mesmo pela dica gadarf!
    Só tenho uma dúvida, o album de baixo está ficando um pouco em cima da descrição do album de cima. Sabe o que pode estar acontecendo?

  4. gadarf comentou: responder

    Se não for público não funciona e não entendi a segunda parte da pergunta.

  5. Renato Ferraz comentou: responder

    Boa tarde amigo…usei a biblioteca e deu certinho.. só tem um porem..ele só mostra os álbuns que tiver a permissão como “publico”, tem como eu fazer aparecer só os álbuns “qualquer um com o link”?

  6. Pedro Barros comentou: responder

    Posso hospedar os arquivos no SkyDrive?

  7. gadarf comentou: responder

    Pode ser que resolva caso esse nome já esteja sendo usado.

    Para mudar vá no pwi-1.0.js e altere a variável var pwi_container_div para algo diferente. Não se esqueça de atualizar as DIVs para o novo nome.

  8. Diogo Rafael Souza comentou: responder

    Bom dia! Preciso de uma orientação simples:

    “Mudando o nome de ID nas configurações do PWI o problema se resolveu”.

    Onde é necessário mudar o nome da id? em quais arquivos devo mudar a palavra “container”?

    Ao testar em meu site, as fotos que são as capas dos albuns ficaram sobrepostas, como que se estivessem espalhadas na tela. Esse procedimento de mudar a id resolve esse problema?

    No mais, obrigado por esse post, ajudou muito!

    Feliz 2012!

  9. gadarf comentou: responder

    Eu mudei o nome do álbum no picasa e não atualizei aqui. Já esta arrumado, obrigado por avisar.

  10. Anonymous comentou: responder

    Cara a galeria não está funcionando mais. O que será?

  11. gadarf comentou: responder

    A variável var pwi_album_crop e var var pwi_photo_crop fazem o que você quer, se deixar elas em 0 o plugin manterá as proporções originais da imagem na miniatura, mas se deixar elas em 1 ele irá cortar a imagem e tentar deixa-la quadrada.

    Desse modo ficarão vários quadradinhos iguais, mas não funciona para todos os tamanhos de miniatura, sei que em 64 pixel fica correto, portanto coloque var pwi_album_thumbsize e var var pwi_thumbsize em 64.

    Não tenha medo de fazer testes que vai dar certo.

  12. Anonymous comentou: responder

    como faço pra deixa as miniaturas do mesmo tamanho. desde já agradeço.
    ótimo seu post

  13. gadarf comentou: responder

    Precisa de um servidor para os aquivos, sem isso não da pra fazer por esse método.

  14. vagner lucas comentou: responder

    Alguem ai sabe se isso funciona nossa site da WEBNODE? pois não tenho acesso ao servidor para upar os arquivos

  15. Bruno comentou: responder

    Legal amigo, estava procurando algo simples e rápido não tava achando em php.

    Com isso resolvi meu problema.. vlw mesmo t+

  16. Anonymous comentou: responder

    nao funcionou fizs todos os passos certo!
    da uma olhada no codigo e alem do mais publiquei as fotos tambem e fica a mensagem procurando dados e tanto faz usar o login ou codigo

    var pwi_username = “111711006958758751643”;
    var pwi_container_div = “container”;
    var pwi_album_only = “Teste”;
    var pwi_album_thumbsize = 144;
    var pwi_album_crop = 1;
    var pwi_photosize = 800;
    var pwi_thumbsize = 144;
    var pwi_photo_crop = 0;
    var pwi_maxresults = 999;

  17. Leo Lestat comentou: responder

    Não é mais fácil vc postar o código fonte que usou nessa pagina aqui?

  18. Leo Lestat comentou: responder

    so aparece a mensagem “This will contain the album(s)”

  19. Leo Lestat comentou: responder

    Tentei incorporar no meu site mas não consegui, sera que é por que eu to usando javascript pra abrir?

  20. gadarf comentou: responder

    @Focado

    Isso é extremamente simples pra quem conhece o mínimo de HTML. No passo 6 onde pede pra inserir

    This will contain the album(s)

    , coloque

    This will contain the album(s)

    . No lugar de 500px coloque o tamanho que desejar, e é claro de uma estudada em HTML.

    @Leandro

    Não tem nenhuma galeria nesse endereço, se quer que eu veja dê o endereço exata onde ela se encontra. Não sei o que quer dizem com cortada mas as miniaturas são geradas pelo picasa, o que da é pra mudar o tamanho delas apenas. Para tanto encontre o arquivo pwi-1.0.js, ache a linha var pwi_thumbsize e altere para um dos tamanhos permitidos. Esse arquivo tem muitas outras opções, e com instruções de uso, sei que estão em inglês mas basta usar o tradutor.