Como mostrar o seu Instagram no WordPress, Blogger ou site comum

Como colocar o seu Instagram no WordPress, Blogger ou site

O Instagram é uma rede social com o objetivo de compartilhar as melhores imagens tiradas pelos usuários de smartphone. O serviço, que recentemente foi adquirido pelo Facebook, é sucesso absoluto, devido a sua simplicidade e os seus famosos filtros para dar aquele charme na sua imagem. E para quem tem blog, agora é possível mostrar estas imagens tiradas por lá diretamente do seu site. Aprenda a mostrar as suas imagens do Instagram diretamente em seu blog ou site, seja ele WordPress, Blogger ou site comum.

Para mostrar as últimas imagens que você postou em seu Instagram diretamente do seu site ou blog, podemos utilizar alguns plug-ins e serviços de terceiros, como o BadgePlz e o SnapWidget para sites, e o Instagram for WordPress para quem usa WordPress.

 

Blogger / BlogSpot / Sites comuns

Para colocar o Instagram em seu Blogger, Blogspot ou em Web Sites, podemos utilizar o BadgePlz ou o SnapWidget. Através destes sites, você insere o seu usuário Instagram, configura opções como tamanho, cor e insere o código que ele irá gerar para você em seu site.

Instagram para BlogSpot/Blogger e sites comuns

 

WordPress

Já para quem utiliza o WordPress, as coisas ficam mais simples. Basta você instalar em seu site o plug-in Instagram for WordPress. Após isso, ficará disponível na galeria de Widgets uma opção para inserir o Instagram, bastando apenas você informar o seu nome de usuário e configurar outras opções de ajustes. Se você utiliza o WordPress.com, então não será possível instalar este plug-in.

Caso você goste de programação e saiba trabalhar com a API OAuth, a mesma que o Twitter utiliza, você pode criar uma aplicação em PHP que pegue suas imagens diretamente, sem a necessidade de usar plug-ins.

 

Lucas Peperaio

Estudante de Ciência da Computação, trabalho com desenvolvimento web há 5 anos e com hardware há 8. Nas horas vagas, sou entusiasta de Overclock, Casemod e Benchmarks, além é claro dos Games. Apaixonado por informática e pela vida, procuro compartilhar meus conhecimentos e assim, ajudar as pessoas. Siga-me no youtube, posto semanalmente muito material sobre Hardware, tecnologia e games em geral: Clique aqui

Receba gratuitamente em seu E-mail
Novos artigos do meu Blog!


Após o Cadastro você receberá um Email Automático. Clique no link enviado para Ativar e receber as novidades.

Categorias do site

Mais visitados





50 Comentários Deixe o seu

  1. Paulo Almeida

    Oi Lucas, tudo bem? Meu site fica no wordpress.com e não consigo encontrar a ferramenta de plug. O wordpress.com é diferente do wordpress.org?

    • Lucas Peperaio

      Olá Paulo, sim, o WordPress.com é a mesma plataforma de blog do WordPress.org, a diferença é que o “.com” é gratuito, já o “.org” você precisa baixá-lo e hospedar por conta própria, pagando a sua própria hospedagem. No caso seu blog, você precisará usar o primeiro exemplo, que serve para todos os tipos de sites. Apenas gere um código na ferramenta e crie um widget com ele, em seu blog

  2. Keila

    Olá! O meu blog no word press tb é ponto com.. e não tem o plug… Tentei gerar o cód como explica no primeiro exemplo e mesmo assim não visualiza no blog, fica só os códs… O que será que pode ser? Poderia me ajudar?

    Obrigada!

    • Lucas Peperaio

      Olá Keila, em qual área do seu painel WordPress você inseriu o código gerado? Foi num Widget em HTML?

  3. Keila

    Oi Lucas! Fui em Aparência -> Widget -> coloquei a caixinha de texto (que é de HTML) no lado direito do blog. Mas ao visualizar o blog só aparece os cód e não a caixa normal do instagram…

  4. Lucas Peperaio

    Estranho Keila, talvez seja um erro com o seu tema. Eu testei aqui usando o http://snapwidget.com/, inseri um Widget HTML do lado direito deste blog, e deu certo. Teste novamente ou caso queira, entre em contato (link no menu) por e-mail informando o código que a ferramenta gerou e que não funcionou

  5. Keila

    Eu mudei de tema no blog.. e mesmo assim não funciona. Este link de contato vai para o contato do seu próprio blog, é isso mesmo? Bem de qualquer forma, agradeço muito sua atenção.

  6. Lucas Peperaio

    Sim vai para o meu e-mail, fique a vontade para contactar-me e enviar o código para que eu veja para você

  7. marina mioto

    O meu nao aparece, coloco o meu nome do instagram e nada, ajuda plisssssssssssssssssssssss

  8. Lucas Peperaio

    Você está usando no Blogspot? Você precisa inserir um Widget HTML, siga estas instruções:
    http://www.dicasblogger.net/2012/05/adicionar-htmljavascript-no-blogger.html

  9. Yara

    Lucas,

    Quanto copio o código gerado para aparecer o instagram no widget de texto/HTML do wordpress.com e clico em salvar ele some com o código.. não aceita salvar. Vc faz ideia porque?]

    Obrigada,

    • Lucas Peperaio

      Olá Yara, como eu mencionei nesta matéria, os sites que rodam no wordpress.com não aceitam o Widget. A única solução é migrar o seu site para a plataforma paga do WordPress, que é o WordPress.org. Neste caso, você tem a plena liberdade de trabalhar com o seu site e por consequência, o Widget irá funcionar

      • Jackelyne

        Olá Lucas o meu blog é wordpress.com mais eu pago o domínio dele anual , e não to conseguindo colocar , na verdade eu coloco o código lá no widget texto e ele não carrega o instagram ? vc tem alguma sugestão obrigada

        • Lucas Peperaio

          Embora você pague o domínio, a hospedagem continua sendo no WordPress.com, e lá até o momento não é possível colocar widgets HTML. Isso só é possível em blogs hospedados em hospedagens pagas, com o WordPress.org

  10. Rosimeire Di Paula

    Lucas …. Quando digito meu instagram ursename e clico em Generate nao aparece nada no Preview o que faco para aparecer ?????

    Obrigado Rose

  11. Rosimeire Di Paula

    Lucas …. Quando digito meu instagram username rosedipaula e clico em Generate nao aparece nada no Preview , ele fica branco , aparece o Badge Code , porem ao colar ele no texto/HTML do meu blog aparece o quadrado branco no blog sem fotos … isso tudo porque o Preview nao esta aparecendo nada . Por favor olhe o que esta acontecendo …. utilize o meu username rosedipaula e crie um Badge code pra mim com o Preview funcionando e mande para o meu email . ……..

    muito , muito , muito Obrigado Rose

    • Lucas Peperaio

      Olá Rosimeire, vou testar para você e te mando no seu e-mail ok? Até mais

  12. Camila Moraes

    Lucas, meu blog é no worpress.com e eu quero colocar o código do Instagram nele, mas não estou conseguindo. Eu gerei o código, como é dito no começo do seu post, mas onde eu coloco esse código? Obrigada.

    • Lucas Peperaio

      Oi Camila. Então, como eu menciono no post, usuários do WordPress.com não conseguirão usar o Instagram no site, pois a plataforma não permite o uso. A única forma é usar o WordPress.org em uma hospedagem própria.

  13. Rosa Cordeiro

    Olá. Valeu demais essa dica. Estava querendo muito colocar meu instagram no meu blog. Consegui fazer tudo direitinho,mas queria que o instagram ficasse na lateral do meu blog e não estou coseguindo. Só consegui fazer ele entrar como post. tem alguma dica? Queria que ele ficasse fixo na lateral do blog.. Obrigada

    • Lucas Peperaio

      Rosa, se o seu blog for em WordPress, vc pode adicionar um Widget na sidebar (se o template tiver essa opção)

  14. Gustavo

    Olá Lucas, tenho um blog no wordpress com domínio próprio, http://saveskateboards.com/ porém nao consigo inserir plug-ins e tão pouco criar um widget por imagem ou texto HTML, existe outra opção? Parabens pelo site e pelas dicas

    • Lucas Peperaio

      Olá Gustavo, o que ficou aparente para mim é que o seu site sim possui domínio próprio, mas está hospedado ainda no WordPress.com, portanto não existe a possibilidade de usar plug-ins ou widgets html. O que você precisa fazer é contratar uma hospedagem como a Dreamhost, migrar o seu domínio para lá e baixar o WordPress do site oficial

  15. Mel Marqques

    Olá, Lucas;

    Será que você pode me ajudar? Ao gerar o código no badgepiz ou snapwidget, o preview fica em branco na caixinha e só aparece o código. E colocando o código no gadget do blog, também fica em branco. Obrigada pela atenção!

    Mel

    • Lucas Peperaio

      Provavelmente estes serviços estão passando por manutenções, até o fechamento desta matéria estava tudo ok. Vamos aguardar, voltando a funcionar eu anuncio aqui

      • Mel Marqques

        Obrigada, Lucas! Vamos acompanhar.

  16. Andréa

    Olá,

    Não consigo gerar o código para colocar meu instagram no blog. Já tentei todos os sites indicados e só dá erro. Hoje eu consegui pre-visualizar entrando pelo snapwidget, mas somente pelo pró (pagando) o free da erro, como pode?

    Não sei o que fazer, meu blog ainda não está disponível para busca, mas já deixei liberado e fiz o teste e mesmo assim não deu.

    Obridada,

  17. Fernanda

    Oi!!! Consegui fazer tudo direitinho, só q o instagram não atualiza a cada postagem de fotos, sabe? Como eu faço? Obrigada!

    • Lucas Peperaio

      Provavelmente não seja possível Fernanda, a não ser que o plug-in que você utilizou nesta matéria disponibilize essa opção.

  18. poliana

    Oi Lucas eu consegui gerar o codigo porém eu não sei onde devo colocar ele, o meu é um blogger… vc consegue me ajudar please!!!! tks!

  19. Victoria Cruz

    coloquei no meu blog e deu certinho! obrigada

  20. Carolina

    Bom dia Lucas, Como percebi nos comentários, possuomais vantagens tendo um wordpress.org do que um wordpress.com! Na questão dos plugins e afins, já possuo um .COM gratuito, eu consigo migrá-lo para o .ORG, ou só preciso pagar meu domínio para ter acesso ao painel de plugins ?

    Att,

    Carolina

    • Lucas Peperaio

      É possível migrar os posts, imagens e afins através da ferramenta de importação nativa, em WordPress > Ferramentas > Exportar. Depois, contrate uma hospedagem e importe o conteúdo.

  21. Daiala Oliveira

    Ola Boa noite! Tenho um blogpost (está em criação) conseguir instalar o programa mais não sei como fazer para aparecer as fotos, o local programado para o INSTAGRAM fica em branco. Por favor mim ajude! Obrigado!!!!

  22. Carolina

    No blogger só o código gerado pelo BadgePlz funcionou, o outro não, quando salvo e visualizo a página fica um espaço em branco, igual aconteceu com a minha like box, que tbm não funcionou “/ Pelo menos dessa vez a segunda alternativa funfou ;) Adorei o Post

    • Carolina

      Ta, agora os dois funcionam, mas quando eu publico uma nova foto ela ainda não aparece na page, mesmo eu atualizando … Já sai e entrei de novo, sai e atualizei p ver como os outros veem e nada. Demora muito pra aparecer as atualizações? É normal demorar? (Os dois estão funcionando… deixei os dois lá p ver qual atualiza mais rápido)

    • Lucas Peperaio

      Então Carolina, o pessoal está tendo o mesmo problema. Parece que o Blogspot bloqueia Iframes, por isso não funcionou direito. Mas acabou dando certo né? É isso o que importa! Até mais

  23. Mari

    Obrigadaa, finalmente consegui fazer algo desses blogs sozinha!!! muito obrigadaa (:

  24. Kélvia

    Nenhum dos aplicativos estão funcionando,o que será que acontece ?

  25. Lolla Romã

    Olá Lucas tudo bem? Eu fiz como vc ensinou.. mas não aparece as fotos,, vc sabe o que esta acontecendo? Muito obrigada

  26. Ellen

    Assim como todo mundo, não consegui inserir no meu blog o Instagram, tem outra opção?

    • Lucas Peperaio

      Ellen, algumas pessoas não tem conseguido pois o BlogSpot tem bloqueado Iframe, que é o caso de ambos os Widgets.

  27. fernando

    querem mais seguidores no instagram acesse http://www.highfollows.com/instagram/?ref=421706965

  28. Luana

    .ig-b- { display: inline-block; } .ig-b- img { visibility: hidden; } .ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; } .ig-b-v-24 { width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min–moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .ig-b-v-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png); background-size: 160px 178px; } }

  29. hgdyigfud

    siagam la no insta@fahdossantos

  30. Jonathan Figueiredo

    Ola.Sou Jonathan E tenho 18 anos e tambem sou Apaixonado por Tecnologia eu desenvolvi esse blog pelo tumblr aos 16 anos nao passei por faculdade mas aprendi a criar sites em casa usando a minha curiosidade atraves do facebook “E ME PERGUNTEI COMO SE CRIA UMA COISA INCRIVELMENTE POPULAR” eu começei a ver os scripts do facebook começei a editar e começei a aprender mais sobre isso tem varias ideias mais uma que eu vou criar em breve e um app de messanger:VOÇE PODE CRIAR UMA CONTA ONDE VOÇE VAI TER UM PERFIL,VOÇE TROCA MENSAGENS COM SEUS AMIGOS COM VIDEOS “VOÇE FAZ UM VIDEOS E MANDA PRA UM AMIGO DEPOIS ELE PODE RESPONDER A SUA MENSAGEM,CURTI E ETC” ,OS VIDEOS VAI TER MESMOS EFEITOS USADOS NO INSTAGRAM PARA DA UM EFEITO LEGAU NOS VIDEO vOU CHAMA-LO DE” TubeChat” por causa do youtube

  31. alguem ai

    eu só acho que o @Jonathan Figueiredo esta um pouquinho equivocado com esse pensamento de criar um app desse.. tem muito o que aprender meu rapaz… va entrar em redtube e deixe isso para quem domina alguma tecnologia de verdade, “desenvolvi esse blog pelo tumblr aos 16 anos” parei aqui…

  32. Marina Jasper

    Oi Lucas, estou tentando colocar mas só aparece no blog o nome INSTAGRAM que inseri, copiei o código tbm mas não deu certo. Tem como me ajudar? obrii