Exibindo Fotos do Instagram no Seu Blog

17/05/2011

ATENÇÃO: Tem uma versão mais nova deste script, desconsidere este e leia o novo tutorial aqui! :)

Script bem simples para quem usa wordpress e instagram.
Ele vai exibir através de feeds, suas últimas imagens adicionadas no instagram.

No seu arquivo functions.php do wordpress, no finalzinho dele, antes do fechamento ?> adicione o seguinte código:

function instagram_pics($username = '', $num = 4, $linked = true, $size = 70, $margin = 5, $border = 0, $bordercolor = '#FFFFFF') {
include_once(ABSPATH.WPINC.'/rss.php');
$rss = fetch_rss('http://instagram.heroku.com/users/'.$username.'.atom');
$items = array_slice($rss->items, 0, $num);
if (!empty($items)) {
  foreach ($items as $item) {
    $url = $item['link'];
    $pic = explode('<div xmlns="http://www.w3.org/1999/xhtml">',$item['atom_content']);
    $pic = explode('src="',$pic[1]);
    $pic = explode('"',$pic[1]);
    $pic = $pic[0];
    if ($linked == "true") {
      echo '<a href="'.$url.'" target="_new"><img src="'.$pic.'" width="'.$size.'" height="'.$size.'" style="margin: '.$margin.'px; border: '.$border.'px solid '.$bordercolor.';" class="twitpic" /></a>';
      } else {
      echo '<img src="'.$pic.'" width="'.$size.'" height="'.$size.'" style="margin: '.$margin.'px; border: '.$border.'px solid '.$bordercolor.';" class="twitpic" />';
    }
    }
  }
}

Se o seu arquivo functions.php estiver vazio, você terá que abrir e fechar uma função php:

<?php coloque o código aqui ?>

No seu arquivo sidebar.php (ou onde quiser mostrar as fotos) coloque a seguinte linha:

<?php instagram_pics('AAAAA', 2, true, 111, 10, 3, '#FFF'); ?>

Alterações:
“AAAAA” colocar o seu número de usuário do instagram
“2” colocar o número de imagens que quer exibir
“true” colocar true para criar link, ou “false” para não criar link
“111” colocar o tamanho da imagem em pixels
“10” colocar o tamanho da margem em pixels
“3” colocar o tamanho da borda em pixels
“#FFF” colocar a cor da borda da imagem

P.S. Se você não sabe o seu número de usuário, descubra neste link, usando o seu username do twitter.
Clique no “photo feed”, o seu número vai aparecer no endereço do navegador:
http://instagram.heroku.com/users/NÚMERO.atom

Comentários!
  1. Achei legal mais não entendi como funciona rs :)

    • Mari (Responder)
      24/07/2011

      Dri, você não entendeu como fazer?
      Sabe as imagens do flickr que a gente manda exibir na lateral? Seria a mesma coisa mais ou menos, mas esse script exibi as suas últimas fotos postadas no Instagram! :)

  2. Ataaa rs :) vou tentar colocar e te falo se funcionou rs :)

  3. Vany (Responder)
    07/08/2011

    Uhuuu tudo o que eu queriaaaaa saberr… Valew florrr!

  4. Mari, to com um probleminha. Coloquei os códigos como você explicou, tudo direitinho. As fotos do Instagram aparecem e tal. Mas quando eu tenho criar uma página ou fazer um post, ele dá o seguinte erro:

    Warning: Cannot modify header information – headers already sent by (output started at /home/marianap/public_html/wp-content/themes/bow01/functions.php:1) in /home/marianap/public_html/wp-includes/pluggable.php on line 934

    Me socorre? :(
    Esse erro acontece quando eu coloco o Instagram. Quando eu tiro, ele volta ao normal! Tipo, o post e a página são publicados, mas esse erro me deixa encucada! x_x

    Beijos

    • Mari (Responder)
      18/10/2011

      Mariana,

      Você verificou se no seu arquivo functions.php tá fechando o php no final?

  5. Tá fechando sim. Posso chorar? :(

  6. Amei! Coloquei e deu super certo!! Obrigaaaada!

  7. Milenna (Responder)
    18/01/2012

    Consegui não :/

  8. Lena (Responder)
    02/04/2012

    Não consigo visualizar o meu número :(

  9. Fui tentar colocar e agora tá dando um erro no tema inteiro, até quando entra no blog… Não consigo acessar o painel administrativo =/
    Que faço? O blog ficou fora do ar…

    Obrigada!!

    • Mari (Responder)
      06/05/2012

      Camille,
      Você deve ter colocado o código no lugar errado no seu arquivo functions.php.
      Colocou antes de fechar o ?> ?
      Entra pelo FTP, puxa o arquivo functions.php, deleta o código que colocou e manda ele novamente… O blog deve voltar a funcionar! ;)

  10. Mari,
    obrigada pela atenção! Felizmente eu pensei na mesma solução e apaguei o arquivo, e subi o original e voltou ao normal… rs

    Mas eu tinha feito certo… Não sei o que pode ter acontecido =/

    Mesmo assim, obrigada! =)

  11. Daniela (Responder)
    24/05/2012

    Oi Mari.

    Tudo bom, encontrei o seu tutorial e fiquei super animada, mas quando eu coloco o código no functions do blog dá a seguinte mensagem: Parse error: syntax error, unexpected T_AS in /home/clandest/public_html/teste/wp-content/themes/inspirationwp/functions.php on line 184

    Fiz exatamente como está no tutorial. O que pode ser?

    • Mari (Responder)
      29/05/2012

      Dani,

      Você colocou o código antes de fechar o ?> do seu functions.php?

  12. Criszinha (Responder)
    30/05/2012

    Mari amei, já consegui colocar no meu blog, beijos e obrigada!

  13. Laninha (Responder)
    04/07/2012

    Puxa… Só consegui exibindo no meu index.php. Pra exibir na lateral pela widget ñ aparece! =(
    Pode me ajudar?

    • Mari (Responder)
      04/07/2012

      Laninha,
      O wordpress não executa código php em widgets… Precisa de um plugin pra isso!
      Dá uma olhada neste link.
      Beijos!

  14. Laninha (Responder)
    04/07/2012

    Mari minha flor, nossa vc salvou minha vida!! FUNCIONOU!! Muito obrigada!
    Agora entendi pq todos os códigos php nunca funcionaram nas minhas widgets!! MUITO OBRIGADA! Deus te abençoe! ^^ Bjs

  15. Maike (Responder)
    09/09/2014

    Olá, Mari!

    Não consigo gerar meu número, o site não ta pegando ;( Sabe como me ajudar?

  16. Maike (Responder)
    09/09/2014

    Mariiiiiiiiii!
    Achei um outro lugar legal e bem simples, pra ajudar aí o pessoal também!

    http://www.pinceladasdaweb.com.br/instagram/user-id/