Instalando feed responsivo do Instagram no blog

O tutorial de hoje é para quem deseja colocar as fotos do Instagram no blog, exibindo um feed com as fotos mais recentes. O gadget do Instagram é muito útil e pode deixar o seu espaço ainda mais bonito e atrativo para os leitores. Eu vou ensinar a usar um código responsivo, ou seja, que vai se adaptar automaticamente ao espaço onde ele for inserido, sem necessidade de alterar manualmente o tamanho das imagens. Vamos lá:

1. Acesse o site SnapWidget, Se você não é cadastrado vá em Sign Up e crie uma conta, com seu e-mail e senha ou Facebook. Se já possui uma conta, clique em Log in e insira seus dados.

2. Depois de ter feito o login, clique em GET STARTED TODAY.

3. Agora clique em CREATE A NEW WIDGET.

4. Observe a 1ª opção de Widget que aparece, cuja descrição é "A responsive grid of Instagram photos. Supports username and hashtag filtering". É ela que vamos usar, portanto clique em CREATE YOUR WIDGET referente à essa primeira opção.

Configurando sua Widget do Instagram

Agora vamos às configurações básicas:

Username: Escreva seu nome de usuário no Instagram fazendo login na janela que aparecer.

Thumbnail Size: Tamanho das miniaturas das fotos. Como nosso feed do Instagram será responsivo não será necessário mexer nessa configuração.

Layout: Escolha o número de fotos por linha e por coluna. Exemplo: 10x2: 2 linhas com 10 fotos cada; 3x3: 3 linhas com 3 fotos, e por aí vai.

Photo Padding: Mude o número de 5 para 0 para que não haja espaço entre as fotos.

Hover Effect: Efeito ao passar o mouse:

Fade in: Fotos aparecem mais claras e ficam do tom original ao passar o mouse.

Fade out: Fotos aparecem com o tom original e ficam mais claras ao passar o mouse.

None: Fotos permanecem com o mesmo estilo antes e depois de passar o mouse.

Sharing Buttons: Deixe com a opção Yes selecionada se quiser que os botões de compartilhar a imagem no Facebook, Twitter e no Instagram apareçam quando se passar o mouse sobre elas, caso contrário marque a opção No.

Responsive: Selecione a opção Yes porque queremos usar o código responsivo.

Você pode pré-visualizar como ficará seu feed clicando em PREVIEW IN NEW WINDOW para visualizar seu feed em uma nova janela no navegador ou em PREVIEW para visualizar no próprio site, logo acima de onde você está digitando as configurações básicas.

Colocando o feed do Instagram no blog

1. Clique em GET WIDGET, logo depois das opções de pré-visualização.

2. Copie o código que aparecerá:

3. Agora é só adicionar o código onde você quer que ele apareça. Para quem usa Blogger é só ir em Layout. Você pode inserir o código no rodapé/footer ou na própria sidebar. Clique em Adicionar um Gadget, escolha a opção HTML/JavaScript, cole o código e clique em Salvar. Pronto!

Então é isso, nesse site vocês encontram também várias outras opções de widgets legais. Espero ter ajudado e qualquer dúvida é só comentar <3