Galeria De Fotos Do Picasa No Seu Site Ou Blog
por gadarf em: Blogger, HTML, Informática, Internet, Tutoriais
Picasa Web Integrator é uma biblioteca em javascript que lhe permite, de forma simples e eficiente, inserir suas fotos do Picasa 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 e procure pela linha: pwi_username = "YOUR_USER_NAME_HERE";
3 – Subistitua YOUR_USER_NAME_HERE com o seu login de usuário.
Para saber seu login, entre no Picasa e clique em algum álbum. No url irão aparecer o nome de login e do álbum corretos. Tenha em mente que esses valores podem ser diferentes do que aparece tanto na hora de você logar quanto na descrição do álbum. Portanto para saber o certo observe a URL do seu álbum. Exemplo: http://picasaweb.google.com.br/gadarf/Cosplay02#, onde gadarf é o login e Cosplay02 o nome do álbum.
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 três 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.
4 – Upe todos os arquivos do Picasa Web Integrator para seu serviço de hospedagem.
5 – Em toda página que quiser usar o álbum deverão ser inseridos os CSSs e scripts tal como no arquivo index.html.
6 – No local onde desejar inserir a galeria coloque o seguinte código: <div id="container">This will contain the album(s)</div>.
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 comando <div id="container">This will contain the album(s)</div>, possui a mesma ID de uma outra DIV do meu template.
Mudando o nome de 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.
Abaixo encontra-se um exemplo, algumas opções do pwi-1.0.js foram alteradas para dar uma personalizada. Acessando a matéria "Grande Coleção Cosplay De Personagens Femininos" será possível ver outro exemplo. É isso, siga essas dicas que com um pouco de paciência você irá conseguir fazer a sua galeria também.
Não entendi direito, eu preciso colocar todos os albuns no meu blog sem que a pessoa precise ir ao site do Picasa como neste site: (http://www.rostoker.ca/index.php?option=com_morfeoshow&task=view&gallery=5&Itemid=54)
Como faço isso em um blog?
Você pode me responder pelo email do msn: fadusantos@hotmail.com
ou gmail mesmo: fadusantos@gmail.com
Obrigado
Muito legal esta opcao de galeria do google
@Fábio Duran
Isso, tal como o do link.
Mas não posso te responder como se faz por e-mail porque, simplesmente, essa matéria já explica como fazer.
@messiasdojornal
Não foi o google que "fez", apesar de que ele é quem dispõe da API necessária para ser feito.
Oi naum consegui fazer a parte do login do picasa!! por favor responde e me ajuda!! explicar mais detalhadamente! agradeço
ótima dica, acho que com um pouco mais de empenho eu consigo fazer tudo certinho, apesar que eu não gosto muito do Picasa e prefiro o Flickr auhsuahs. Enfim belo post
@Theo Lima Says
É só o que ta escrita la em cima.
@Rafa's Blog Says
Tem do flicker também: http://www.blog.clacelestial.com/2010/03/album-imagens-blog-site-flash-temas.html.
Achei muito interessante, acoplar a ferramenta do google em um site ou blog.
mais realmento nao esta funcionando como o esperado.
alterei as linha que estão descritas em cima.
-----------------------------------------------------------------
pwi-1.0.js
var pwi_username = " ";
var pwi_container_div = "container";
var pwi_album_only = " ";
-----------------------------------------------------------------
se alguem puder mostrar o que realmente colocar nessas variaves eu agradeço.
1 - É necessário sim, ter conhecimentos prévios de HTML para fazer bom uso dessa biblioteca, caso contrário, certamente irá ter dificuldades na implementação.
2 - Para funcionar no modo padrão, só uma coisa precisa ser feita, colocar seu nome de usuário da conta Picasa no arquivo pwi-1.0.js.
3 - Uma vez executada essa unica ação pode-se testar pelo arquivo index.js.
@dime23menor Says:
O que está fora do esperado?
var pwi_username = Seu nome de usuário no Picasa.
var pwi_container_div = O nome div que irá receber a galeria dentro do site/página/template/blog e etc. Não precisa alterar.
var pwi_album_only = Em branco exibe todos os álbuns. Se colocar o nome de um álbum especifico apenas ele será exibido.
Eu terminei mas agora ñ sei como coloca no post
Seguiu os passos 4,5 e 6? Qual deles não conseguiu executar?
Não sei Upa os arquivos do Picasa Web Integrator para seu serviço de hospedagem. e que serviço é esse?
Olá,
Tentei usar esta galeria mas não funcionou de primeira. Só depois descobri o problema.
Essa galeria somente acessa os álbuns que estão marcados como "Público" no Picasa. Como eu não tinha nenhum álbum público nada estava aparecendo na galeria.
Ou seja, é uma coisa que deve ser verificada.
De qualquer forma, esta galeria é muito útil.
Obrigado pela dica, certamente será útil para outros, e parabéns pelo empenho em tentar até conseguir.
Eu tenho que upar todos os arquivos que vieram naquele download do Picasa Web??
Você pode indicar um hospedeiro legal pra colocar esses arquivos, com o 4Shared funciona?
Sim, você deve upar tudo. O 4Shared, megaupload e etc não servem, não são servidores web.
Tente o http://www.xpg.com.br/, é gratuito.
Belo post, já baixei os arquivos e vou começar a mexer agora. Como já tive problemas c/ o Google (por um redirecionamento q coloquei certa vez no site da empresa q trabalho, o site foi excluído do index do Google por mais de 20 dias, o q derrubou em mais de 90% o nro de acessos ao site), lhe pergunto: é seguro colocar esta galeria no site? Ou seja, o Google 'vê' esta ferramenta c/ bons olhos? Se ñ souber responder, sem problemas. 1ABS
Não sei responder 100%. Mas creio que não haja problemas uma que vez que a API necessário ao desenvolvimento do script é criada pelo próprio google.
Sabe o motivo pelo qual seu site foi banido? Só por curiosidade.
Coloquei essa galeria no blog, mas como faço para colocar a galeria na mesma dimensão da area do post?
Preciso de ajuda para configurar essa galeria na pagina, podem me ajudar?
olha como ficou no meu blog.
www.arenateenpt.com
Agradeço se puderem me ajudar a configurar a galeria na pagina fdo blog.
As fotos estão ficando cortadas, já tentei redimensionar mas sem sucesso!
www.arenateenpt.com
@Focado
Isso é extremamente simples pra quem conhece o mínimo de HTML. No passo 6 onde pede pra inserir <div id="container">This will contain the album(s)</div>, coloque <div style="width: 500px" id="container">This will contain the album(s)</div>. 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.
Tentei incorporar no meu site mas não consegui, sera que é por que eu to usando javascript pra abrir?
so aparece a mensagem "This will contain the album(s)"
Não é mais fácil vc postar o código fonte que usou nessa pagina aqui?
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;
Legal amigo, estava procurando algo simples e rápido não tava achando em php.
Com isso resolvi meu problema.. vlw mesmo t+
Alguem ai sabe se isso funciona nossa site da WEBNODE? pois não tenho acesso ao servidor para upar os arquivos
Precisa de um servidor para os aquivos, sem isso não da pra fazer por esse método.
como faço pra deixa as miniaturas do mesmo tamanho. desde já agradeço.
ótimo seu post
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.
Cara a galeria não está funcionando mais. O que será?
Eu mudei o nome do álbum no picasa e não atualizei aqui. Já esta arrumado, obrigado por avisar.
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!
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.
Posso hospedar os arquivos no SkyDrive?
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"?
Se não for público não funciona e não entendi a segunda parte da pergunta.