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.

22 de julho de 2018

Como colocar o feed do instagram no blog

Como colocar o feed do instagram no no blog

Colocando o feed do instagram no blog tutorial completo

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

Nenhum comentário:

Postar um comentário