Como colocar o feed do instagram no blog - Blog da Mi

22 de julho de 2018

Como colocar o feed do instagram no blog



Como colocar o feed do instagram no no blog 

O instagram hoje em dia é a rede social mais ativa, e praticamente toda blogueira tem, e hoje vou mostrar um passo a passo de como colocar ele no blog, assim as fotos que você posta no seu instagram aparecem automaticamente no seu blog.

Nesse tutorial você vai aprender a colocar de duas formas, na barra lateral ou no rodapé do blog.

Colocando o feed do instagram no blog tutorial completo

Vamos acessar o site  snapwidget, se ainda não tiver um cadastro no site, clique em sing up e crie uma conta e depois clique em create a new widget  escolha instagram grid.

  • Agora é só preencher as informações: username (seu @) tamanho da miniatura ajustar da maneira que mais lhe agrade e encaixe no seu feed,  personalização ok, vamos clicar em gerar widget 

Copie o código gerado e reserve, vamos usa-lo agora nesse próximo passo.

  • Vamos colocar um gadget html/javascript  no layout do blog: no painel do blog clique em layout e depois em adicionar um gadget, na caixa que abrir você vai colocar o código que geramos no site do SnapWidget, ai é só arrastar esse gadget para onde você desejar que ele apareça no seu layout  e salve a organização.


Veja agora como colocar o feed do instagram no rodapé do blog

Siga o mesmo passo a passo acima até chegar na tela onde personalizamos para gerar o código, e vamos mudar as configurações.

Em layout coluna x linhas alteramos para 1 linha e colunas são quantas fotos você quer exibir, mude também o tamanho da miniatura. 
ficara como na imagem abaixo uma linha com as fotos.
Clique em obter o widget e copie o código.


Vamos mexer no seu HTML códigos do seu blog  e alterar seu template, faça em um blog de teste, caso ocorra algum erro não vai interferir no seu layout, ou faça um  backup, pois caso algo dê errado você poderá recupera-lo depois. Vá em Modelo ➝ Fazer backup ➝ Fazer download do modelo completo.
  •  1 →  No painel do blog vamos clicar em tema e depois em editar html
  •  2 →  Dentro da caixa de códigos de um click em qualquer lugar e aperte ctrl+f  dentro da caixa de busca cole o seguinte código:
]]></b:skin>

Cole acima do código que você localizou o código  css abaixo e salve:
#instagram h2{
font: 35px 'Verdana'; /*ALTERE O TAMANHO E TIPO DA FONTE AQUI*/
color: #000000;  /*ALTERE A COR DA FONTE AQUI*/
text-align: center;  /*ALINHAMENTO DO TÍTULO*/
padding: 5px;
}

  • 3 → agora vamos procurar o código </body> coloque ele na caixa de busca e de enter assim localizamos mais facilmente, acima dele cole o código html abaixo:


<div id='instagram'><h2>Atualizações do Instagram | @SEUINSTAGRAM</h2>
SEU CÓDIGO DO WIDGET AQUI
 </div>

Onde está escrito seu código do widget aqui, troque pelo código que geramos no site.
Visualize e salve estiver tudo certo.

Extra para ajudar na personalização do código:

Username: Nome de usuário da sua conta do instagram. Antes de começar as edições é preciso autorizar o uso da conta no site. O próprio site redireciona para autorização.
Thumbnail Size:  Tamanho das miniaturas.
Layout: Estilo das miniaturas. Ou seja, você pode escolher a quantidade de imagens e de colunas. No exemplo abaixo, o número 4 representa a quantidade de imagens e o número 1 a quantidade de coluna.
Photo Border: aplica bordas nas miniaturas.
Background Color: aplica cor de fundo nas miniaturas.
Photo Padding: aplica espaço entre as miniaturas.
Hover Effect: Adiciona efeito feed ao passar o mouse sobre as miniaturas.
Sharing Buttons: Adiciona botões de compartilhamento ao passar o mouse nas miniaturas.

O tutorial é longo mas é bem tranquilo de fazer é só prestar bem a atenção.
Viram como é fácil, tenho certeza que você consegue e caso não consiga ou tenha qualquer duvida solicite ajuda pelo comentários ou pelo formulário na pagina de contato do blog 

Se esse post foi útil pra você compartilhe ele ♥ 


Me siga no instagram » @michelleoliveirablog
Encontre mais dicas me seguindo no Pinterest » michelleoliveirablog

Caso tenha dúvidas ou sugestões, deixe nos cometários aqui abaixo ou entre em contato. Vou ficar muito feliz em receber uma mensagem sua.

Compartilhe esse post e espalhe a informação!

Nenhum comentário:

Postar um comentário


Deixe a opção *NOTIFIQUE-ME* marcada, assim você é aviso quando eu responder seu comentário!


» Seja educado, e respeite os direitos dos outros, seus comentários são bem vindos. Com moderação!
» Aceito criticas, se forem dadas com educação, não me importo em publicá-las, criticas construtivas nos ajudam a crescer.





Subir