Fotos do seu Instagram no Tumblr
Você é usuário do Instagram ? Quer mostrar a quem acessa seu Tumblr as suas fotos do Instagram ? É bem fácil !
Neste tutorial vou te ensinar a colocar três modelos diferentes de widgets para poder mostrar as suas fotos no theme do seu Tumblr de uma forma bem legal =)
Antes de alterar qualquer coisa no código do seu Tumblr, eu recomendo que você guarde uma cópia do seu theme para caso dê algum problema na hora de salvar, ou você queira voltar seu theme como era antes.
Feita a cópia do seu theme, agora vamos às fotos !
Como eu disse no começo do post, são três modelos, então vou mostrar um exemplo de cada um deles e o modo de como fazê-lo no seu Tumblr:
Grid
Este modelo mostra uma “grade” de fotos, que você pode escolher quantas fotos aparecem em cada linha e coluna, veja um exemplo abaixo:
Para colocar este modelo acesse o SnapWidget, na meta de baixo da página, preencha seu nome (ou alguma hashtag que deseja que as fotos apareçam), e em “Widget Type”, escolha a opção Grid.
Na opção Thumbnail Size, você escolhe qual o tamanho terá cada foto no Grid, em Layout você escolhe quantas fotos aparecerão (coluna x linha). Você ainda pode configurar qual será a cor de fundo do widget, o espaço entre cada foto (Photo Padding), e qual efeito acontecerá quando o usuário coloca o mouse sobre alguma das fotos (Hover Effect).
Clique em Preview pra ver se ficou como você gostaria e, se sim, feche a janelinha do Preview, clique em Get Code, e cole no código do seu theme onde você quer que as fotos apareçam, você pode até colar na sua Description !
Slideshow
Este modelo exibe somente uma imagem, mas que vai passando pra próxima automaticamente. Veja abaixo:
Para usar este modelo, você segue os mesmos passos do modelo anterior (Grid), mas na hora de escolher o Widget Type, escolha a opção Slideshow.
Depois de configurar tudo, clique na opção Preview pra ser se está como você quer. Se sim, feche a janelinha do Preview, e clique em Get Code. O código gerado deverá ser colado no seu theme onde você quer que as fotos apareçam.
Embedagram
Este modelo exibe três fotos, um ao lado da outra, e você pode ir passando/voltando as fotos, veja abaixo:
Para colocar este modelo, você deve acessar o embedagram, e depois clicar em “let’s get started”. Você será levado a uma página onde deve autorizar o site a fazer este widget com suas fotos (por questões de segurança, para que uma pessoa só possa exibir um widget com suas próprias fotos).
Depois de autorizar o site, você será levado a uma página com três opções: “the widget”, “custom css” e “the jQuery plugin”. Se você não sabe CSS, escolha a primeira opção, que gerará o widget igual mostrado acima. Você então receberá o código que deve ser colado no código do seu theme onde você quer que ele apareça, por exemplo, na sua Description.
Se você entende de CSS, pode fazer um layout novo para o widget também, escolhendo a opção “custom CSS”. Se sabe JavaScrit e jQuery, pode também criar do zero o seu widget com a opção “the jQuery plugin”. Mas isso é assunto pra um outro futuro tutorial !
Bom, estes foram os três modelos, espero que tenham gostado ! =)
