Galeria de fotos do Instagram no blog

Imagem: Flickr

Oi chuchus, tudo bem? Bom, eu estava vasculhando a internet atrás de um bom site que criasse uma galeria com fotos do instagram para colocar no meu blog, e dentre vários que encontrei, o que eu mais gostei foi o SnapWidget, pois ele tem várias opções de escolha. Então, no tutorial de hoje irei ajudá-los a criar e colocar o widget no blog de vocês. Vamos lá?!

Obs: Seu perfil do Instagram deve estar público para funcionar.

1. Entre no site SnapWidget e clique em Get Your Free Widget.

2. Conhecendo as opções:

Username: Aqui você irá colocar o seu nome de usuário do Instagram.

Hashtag: Se você colocou seu username, não é necessário preencher esse campo.

Widget Type: Aqui é o tipo do widget, e você tem 5 opções para escolher:

Grid 

Board

Scrolling

Slideshow

Map

Thumbnail Size: Aqui é o tamanho de cada foto.

Layout: Quantidade de linhas e colunas que você quer no seu widget. (linha x coluna)

Photo Border: Se você quer borda nas fotos ou não.

Background color: Cor de fundo do widget. Eu recomendo a cor branca

Photo Padding: Distância de uma foto para a outra.

Hover Effect: Efeito ao passar o mouse nas fotos:

None: Nenhum efeito.

Fade In: As imagens permanecem com opacidade baixa, e ao passar o mouse voltam com sua cor normal. (Observe a imagem 1)

Fade Out: As imagens permanecem com sua cor normal, e ao passar o mouse ficam com opacidade baixa. (Observe a imagem 1)

Sharing Buttons: Aqui você escolhe se quer ou não que tenha botões de compartilhamento ao passar o mouse nas fotos

Responsive: 

Yes: O widget vai ficar com o tamanho padrão do próprio site.

No: O widget vai ter o tamanho que você definiu.

Após escolher todas as opções, clique em Preview, e se estiver de acordo feche sua janela e então clique em Get Widget.O site irá gerar um código que irei explicar a como colocá-lo no blog de vocês.

1. Copie o código que o site gerou. (Como mostra a imagem acima)

2. Vá até a plataforma do seu blog e clique em Layout.

3. Em seguida clique em Adicionar um widget.

4. Escolha a opção HTML/JavaScript e cole o código que você copiou no site.

5. Clique em Salvar e depois em Salvar organização (você pode colocar seu widget onde você quiser ok?!)

Atualize seu blog e então seu widget já estará funcionando, porém, infelizmente o widget desse site não redireciona para o instagram do usuário quando se clica na foto, então se vocês quiserem adicionar o link do instagram de vocês para que as pessoas acessem é só inserir esse código acima do código do widget:

<center> <a href="link do seu instagram aqui" target="blank">@nome_de_usuário</a></center>

<br />

Se foi útil não deixe de comentar, beijos de luz.