10 janeiro 2018
Como colocar o instagram no blog
Aprenda agora como colocar o instagram no blog de
forma simples e profissional.
O instagram é uma rede social que cresce absurdamente todos os dias, e é fundamental para qualquer blog ter um perfil para ajudar na interação com os leitores e na divulgação dos conteúdos. Confesso que o manual ainda não tem o seu espaço no instagram, mas em breve quero resolver essa questão. Nesse tutorial você vai aprender como colocar as imagens do feed e uma frase de ação com um botão clicável, veja:
Ao clicar no botão, o leitor será direcionado para outra janela, ou seja, para o seu perfil. O manual da blogueira também já ensinou uma forma simples de como adicionar o instagram no rodapé do blog que vale a pena conferir. Acompanhe agora o passo a passo de como colocar o instagram no blog.
1. Acesse o site SnapWidget.
2. Caso não tenha uma conta no site, será preciso se cadastrar. Faça isso clicando em Sign up. Mas caso você já seja cadastrado, basta acessar o seu painel clicando em Log in.
3. Agora clique em EDIT WIDGET.
4. Clique sobre o box do username e uma janela vai se abrir.
5. Na janela vai aparecer um botão com fundo azul com um símbolo de mais, clique sobre ele e outra janela irá se abrir. Digite nos campos o seu e-mail e senha de acesso a sua conta no instagram, e em seguida clique em Entrar. Outra janela vai se abrir, agora clique no botão Authorize, como a imagem abaixo está ilustrando. Sua função nada mais é do que autorizar o site SnapWidget exibir o seu feed.
5. Na janela vai aparecer um botão com fundo azul com um símbolo de mais, clique sobre ele e outra janela irá se abrir. Digite nos campos o seu e-mail e senha de acesso a sua conta no instagram, e em seguida clique em Entrar. Outra janela vai se abrir, agora clique no botão Authorize, como a imagem abaixo está ilustrando. Sua função nada mais é do que autorizar o site SnapWidget exibir o seu feed.
6. Deixe o seu painel com os mesmos dados que a imagem abaixo demonstra, em seguida clique em UPDATE & GET WIDGET para gerar o código.
7. Agora copie e guarde o código para a próxima etapa.
7. Agora copie e guarde o código para a próxima etapa.
8. Procure por Layout, Adicionar um Gadget, clique em HTML/JAVASCRIPT e dentro da caixa de edição, cole esse código. Onde está escrito COLE O SEU CÓDIGO AQUI adicione o código que você gerou no site SnapWidget. Salve e verifique se está tudo ok.
É importante você saber:
O que pode ser mudado no estilo do código, está sinalizado com uma frase explicando a função de cada elemento CSS. Caso você não queira cor de fundo no botão, basta mudar o código da cor (#c05697) em background por transparent, tanto no botão em estado normal, como quando se passa o mouse, lembrando que sem o sinal de jogo da velha.
O que pode ser mudado no estilo do código, está sinalizado com uma frase explicando a função de cada elemento CSS. Caso você não queira cor de fundo no botão, basta mudar o código da cor (#c05697) em background por transparent, tanto no botão em estado normal, como quando se passa o mouse, lembrando que sem o sinal de jogo da velha.
É possível também mudar o @seuinstagram pelo seu user, e a frase Me acompanhe no pela frase que você desejar. Caso as imagens do feed fiquem cortadas, é sinal de que você precisa diminuir o tamanho das miniaturas do código porque a sua lateral não comporta a largura total do widget. Pra resolver essa questão, basta trocar o número 125 em Thumbnail size por um número menor, e gerar um novo código. Faça testes até a largura ficar da forma que você deseja.
Gostou do tutorial? Compartilhe e marque uma amiga que precisa adicionar o instagram no blog mas não sabe como. Acompanhe o manual nas redes sociais e assine nossa newsletter.
Nossa, estava falando com a minha irmã hoje sobre colocar o instagram no blog. Parece que você adivinhou kkk!
ResponderExcluirBeijos
Boas de Papo
Ai que bom, que eu "adivinhei" rsrsrs.
ExcluirDepois me conta se deu certo!
Grande beijo :*
Faz um post de como colocar o pinterest!!!!!!!!!
ResponderExcluirO próximo tutorial será esse Millena =)
ExcluirObrigada pela sugestão <3
Adorei esse tutorial, era exatamente o que eu estava precisando. Muito obrigada e super parabéns por seu trabalho, toda vez que uso seus códigos eles sempre funcionam.
ResponderExcluir- Grande beijo Andréia Blog ♥
Que linda gente <3 Obrigada Andréia! Fico feliz em saber que deu certo, fui no seu blog e vi mesmo que ficou perfeito. Um grande beijo :*
ExcluirOla, consegui colocar, mas qdo clico sobre a foto é direcionado para o Snapwidget, como faço para direcionar para o meu blog??
ResponderExcluirOlá Cristina,
ExcluirEstá certo! Ao clicar na foto você será direcionado ao Snapwidget, mas basta clicar no seu user que a pessoa será direcionada ao seu perfil no instagram. Não tem como direciona-la para o blog.
Onde coloco o " Me acompanhe com o link do instagram" ??
ResponderExcluirPode adicionar qualquer frase dentro da condicional p. É só deletar a frase ME ACOMPANHE NO pela frase que quiser.
ExcluirContinuei nao entendendo e nem achando essa condicional p
ExcluirAdorando seu blog!!!
ResponderExcluirMuitas dicas bacanas e úteis, comecei um blog tem pouco tempo e estou ajeitando a "casa" ainda rs.
Estou tentando colocar o instagram no rodapé do blog, uso o wordpress mas não consigo colocar ele na horizontal no rodapé. Você teria uma dica de como fazer isso? Estou usando ele na barra lateral direita, mas gostaria muito de colocar no rodapé. Beijos
Obrigada Cilene <3
ExcluirInfelizmente os tutoriais do blog são somente para o Blogger. Não tenho muitos conhecimentos no WordPress. Muito sucesso no seu novo blog <3
Concegui instalar!
ResponderExcluirEbaaaaa =)
ExcluirOnde está essa condicional p ? Para trocar o me acompanhe?
ResponderExcluirEstá tudo em único código. Você só vai trocar a frase ME ACOMPANHE. Deleta essa, e escreva outra =)
ExcluirOlá gostaria de agradecer a você, que Deus te abençoe muitoooo.
ResponderExcluirEstou feliz pois estou aprendendo muito aqui com você, estou amando tudinho ... bjo
Olá Patrícia, fico muito feliz que esteja aprendendo muito com o Manual <3
ExcluirAgradeço de coração por ter tirado um tempinho pra comentar =) Bjão!
Obrigada flor, acabei de aplicar sua dica no meu blog, amei a dica. E ja vou pedir para voce ensinar como colocar o youtube?! Pleaseee!!
ResponderExcluir