Exibindo Fotos do Instagram no Blog (Versão 2.0)

09/07/2012

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 stagram_pics($username = '', $num = 4, $tam = 90) {
include_once(ABSPATH.WPINC.'/class-simplepie.php');
$rss = fetch_feed('http://web.stagram.com/rss/n/'.$username.'/');
if (!is_wp_error($rss)) {
    $items = $rss->get_items(0, $num);
    foreach ($items as $item) {
        $url = $item->get_permalink();
        $title = $item->get_title();
        $pic = $item->get_content();
        preg_match_all('/src=[\'"]?([^\'" >]+)[\'" >]/', $pic, $pic_lista);
        $pic = $pic_lista[1][1];
        echo '<li><a href="'.$url.'" target="_blank"><img src="'.$pic.'" title="'.$title.'" width="'.$tam.'" height="'.$tam.'" /></a></li>';
        }
    }
}

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:

<ul><?php stagram_pics('XXXXX', 4, 90); ?></ul>

P.S. O código deve ficar dentro da tag ul pois o retorno é por li.

Alterações:
“XXXXX” colocar o seu nome de usuário do instagram.
“4” colocar o número de imagens que quer exibir.
“90” colocar o tamanho da imagem em pixels.

Qualquer dúvida é só deixar um comentário! :)
E se quiser uma versão que se integre diretamente com a API do Instagram entre em contato no mari@plicplac.com.br.

Comentários!
  1. Luana (Responder)
    09/07/2012

    Mari, como faz para aparecer uma foto ao lado da outra? No meu ficou uma em baixo da outra, tem como?

    • Mari (Responder)
      09/07/2012

      Luana,
      Tenta colocar um float: left no seu css de li! :)

  2. Luana (Responder)
    09/07/2012

    Hummm vou tentar, obrigada! :)

  3. Luana (Responder)
    09/07/2012

    Deu certo Mari!! Obrigada de novo!!

  4. Amália (Responder)
    29/07/2012

    Boa noite!
    Te mandei um e-mail com uma dúvida (mandei por lá porque foi um print em anexo hehe), se puder me ajudar, agradeço bastante.
    Obrigada!

  5. Amália (Responder)
    29/07/2012

    Agora que vi a sua resposta à Luana, mas mesmo assim, como sou novata no WP, nao sei onde iria este float left hehe.
    Obrigada!

    • Mari (Responder)
      30/07/2012

      Amália,
      Você precisa procurar no seu aqruivo .css onde está configurado o ul e li e ver se tem float: left! :)

  6. Mari! Tudo bem?
    Coloquei no blog e deu tudo certinho!
    Só gostaria de colocar bordinhas brancas iguais a da sua sidebar… Como faço?

    Obrigada!

    • Mari (Responder)
      01/08/2012

      Anie,
      Coloca no css das suas listas ou no do instagram (se criou classe) algo como: border: 5px solid #FFF;

  7. Pois é! Tentei desse jeito… Deu certo só que ficou com bordinha em varias partes da sidebar! :(
    Tentei tirando os de onde não queria borda mas aí desconfigurou algumas coisinhas.
    Será que devo criar uma classe?

    • Mari (Responder)
      01/08/2012

      Anie,
      Como usa o seu ul/li para outros lugares, daí precisa criar um para o instagram! :)

  8. Obrigada!!!

  9. Julien (Responder)
    09/11/2012

    Oi Mari! Tudo bom?
    Estou tentando colocar as fotos do instagram no meu blog, mas não acho a opção functions.php.
    Esses passos servem pra qualquer wordpress, ou só pro wordpress.org?
    Obrigada! Um beijo!

    • Mari (Responder)
      10/11/2012

      Julien,
      No wordpress.com se não me engano, não tem como editar os arquivos no tema – daí não dá pra alterar o functions.php! :(

  10. Aline (Responder)
    03/01/2013

    Olá Mari, adorei seu post. No meu caso dá esse erro aqui:
    Warning: array_slice() expects parameter 1 to be array, null given in /home/lariduar/public_html/novo/wp-content/themes/Lari_Duarte/functions.php on line 18

    Como posso fazer?

    • Mari (Responder)
      03/01/2013

      Aline, tem algum erro na sua programação, na linha 18.

      Beijos!

  11. Carolina (Responder)
    26/02/2013

    Mari, fiz tudo conforme você explicou no post e mesmo assim, eu tento por na sidebar esse código alterado com meu usuário, coloquei aquele código no final do arquivo functions.php e no blog aparece em branco o espaço que deveria aparecer as fotos, acho que por algum motivo não tá rodando o script. Faz ideia do que seja?

  12. Paulo (Responder)
    03/06/2014

    Mari, tem como exibir fotos filtrada por uma tag? Tipo #topdica

    • Mari (Responder)
      09/09/2014

      Paulo, com esse código infelizmente não!
      Teria que adaptar!

  13. Maike (Responder)
    09/09/2014

    VOCÊ ARRRASA!
    Obrigado mesmo.