Feed do Instagram JavaScript

O que é

Serve para a página "Siga a gente" de uma loja, restaurante ou estúdio: as últimas fotos do Instagram aparecem no site, e cada uma leva ao post. Você escreve uma <div sw-instagram> e diz de onde vêm os posts. Como o Instagram não deixa um site qualquer ler o perfil direto do navegador, há quatro caminhos: demonstração (posts de exemplo, para montar a tela), seu servidor (um arquivo PHP seu busca o perfil), arquivo JSON que você mantém, ou links de posts escolhidos a dedo (usa o incorporador oficial do Instagram).

Precisa do JavaScript do SW Core. Nos modos servidor e JSON, ele busca os dados, mostra blocos "carregando" e monta um cabeçalho (foto, @perfil, seguidores e link) mais a grade de posts; passar o mouse mostra a legenda e as curtidas, e o ícone ▶ marca vídeo. No modo links, cada post é o incorporado oficial do Instagram. Atenção: o arquivo PHP do modo servidor não vem no pacote do SW Core — você precisa criá-lo (o formato está na receita).

Quando usar

• Montar e aprovar o layout antes de ter a conta ligada: sw-instagram-demo.
• Feed sempre atualizado e você tem um servidor PHP: sw-instagram-user + o seu proxy.
• Site estático (sem PHP): gere um posts.json e use sw-instagram-json.
• Só alguns posts escolhidos (os melhores trabalhos): sw-instagram-urls.

Comece aqui

1. 1

   Coloque o SW Core na página.

   <link rel="stylesheet" href="swcore/swcore.min.css">
   
   <!-- fim do body -->
   <script src="swcore/swcore.min.js"></script>

2. 2

   Comece pela demonstração, que funciona sem nada externo, para acertar colunas e espaço.

   <div sw-instagram sw-instagram-demo sw-instagram-limit="6"></div>

3. 3

   Depois troque a fonte por uma de verdade — por exemplo, um arquivo JSON do seu site (formato na receita abaixo).

   <div sw-instagram sw-instagram-json="/dados/instagram.json" sw-instagram-limit="6"></div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

{
  "user": "cafe.recife",
  "name": "Café Recife",
  "avatar": "https://seusite.com/img/avatar.jpg",
  "followers": 2480,
  "posts": [
    {
      "url": "https://www.instagram.com/p/AAA/",
      "image": "https://seusite.com/img/post-1.jpg",
      "caption": "Café novo no cardápio ☕",
      "likes": 187,
      "comments": 24,
      "is_video": false
    }
  ]
}

<!-- em caso de problema, devolva { "error": "mensagem" } que ela aparece no lugar da grade -->

<div sw-instagram
     sw-instagram-json="/dados/instagram.json"
     sw-instagram-cols="3"
     sw-instagram-limit="9"></div>

<!-- atualize o /dados/instagram.json quando quiser (à mão ou por uma automação) -->

<div sw-instagram
     sw-instagram-user="cafe.recife"
     sw-instagram-proxy="/api/instagram.php"
     sw-instagram-limit="9"></div>

<!-- O componente chama:  /api/instagram.php?user=cafe.recife&limit=9
     O seu PHP busca os posts (pela API oficial da Meta, com o token da SUA conta,
     guardado só no servidor) e devolve o JSON no formato da receita acima.
     Se "image" vier como "?img=…", o componente pede a imagem ao mesmo proxy. -->

<!-- post completo, como no Instagram (carrega o script instagram.com/embed.js) -->
<div sw-instagram
     sw-instagram-urls="https://www.instagram.com/p/AAA/, https://www.instagram.com/reel/BBB/"
     sw-instagram-cols="2"></div>

<!-- sem o script do Instagram: cada post num iframe de 500 px -->
<div sw-instagram
     sw-instagram-urls="https://www.instagram.com/p/AAA/"
     sw-instagram-mode="iframe"></div>

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js.
• Modo servidor: um arquivo seu (PHP ou outro) que devolva o JSON da receita. O SW Core não traz esse arquivo — o padrão /dist/sw-instagram.php não existe no pacote.
• Modo JSON: o arquivo JSON acessível no seu site.
• Modo links: internet no navegador de quem visita (o conteúdo vem do instagram.com).

Cuidados — erros comuns

• Usar sw-instagram-user sem ter criado o proxy: aparece "Erro ao carregar: 404" e um aviso dizendo que o proxy não vem no SW Core. Crie o seu e aponte em sw-instagram-proxy.
• Colocar o token da conta do Instagram no HTML ou no JavaScript: qualquer visitante vê. O token fica só no seu servidor, dentro do proxy.
• Esquecer de tirar o sw-instagram-demo quando ligar a fonte real: a demonstração tem prioridade e os posts de exemplo continuam aparecendo.
• Modo links com o incorporador oficial: ele carrega script do Instagram (que rastreia visitas). Se o site usa o banner LGPD, prefira sw-instagram-mode="iframe" ou o modo JSON.

O que ele não faz

• Não fala direto com o Instagram: sem proxy, JSON ou links, não há posts.
• Não atualiza sozinho depois que a página abriu.
• Não tem eventos nem função para recarregar por código.
• Se o Instagram mudar o incorporador ou a API, os modos links e servidor podem parar; o modo JSON é o mais estável.