10 janeiro 2018

Como colocar o instagram no blog

|
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:


instagram no blog

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.

instagram no blog

4. Clique sobre o box do username e uma janela vai se abrir.

instagram no blog

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.

instagram no blog

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.

instagram no blog

7. Agora copie e guarde o código para a próxima etapa.

instagram no blog

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.

É 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.


16 comentários:

  1. Nossa, estava falando com a minha irmã hoje sobre colocar o instagram no blog. Parece que você adivinhou kkk!

    Beijos

    Boas de Papo

    ResponderExcluir
    Respostas
    1. Ai que bom, que eu "adivinhei" rsrsrs.
      Depois me conta se deu certo!
      Grande beijo :*

      Excluir
  2. Faz um post de como colocar o pinterest!!!!!!!!!

    ResponderExcluir
    Respostas
    1. O próximo tutorial será esse Millena =)
      Obrigada pela sugestão <3

      Excluir
  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.
    - Grande beijo Andréia Blog

    ResponderExcluir
    Respostas
    1. 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 :*

      Excluir
  4. Ola, consegui colocar, mas qdo clico sobre a foto é direcionado para o Snapwidget, como faço para direcionar para o meu blog??

    ResponderExcluir
    Respostas
    1. Olá Cristina,
      Está 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.

      Excluir
  5. Onde coloco o " Me acompanhe com o link do instagram" ??

    ResponderExcluir
    Respostas
    1. Pode adicionar qualquer frase dentro da condicional p. É só deletar a frase ME ACOMPANHE NO pela frase que quiser.

      Excluir
    2. Continuei nao entendendo e nem achando essa condicional p

      Excluir
  6. Adorando seu blog!!!
    Muitas 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

    ResponderExcluir
    Respostas
    1. Obrigada Cilene <3
      Infelizmente os tutoriais do blog são somente para o Blogger. Não tenho muitos conhecimentos no WordPress. Muito sucesso no seu novo blog <3

      Excluir
  7. Onde está essa condicional p ? Para trocar o me acompanhe?

    ResponderExcluir