Instagram [sw-instagram]
Exibe o feed do Instagram de forma nativa via proxy PHP server-side, sem token de API, sem pacotes externos. Também suporta JSON estático e embed oficial do Meta por URL.
1. Como Funciona — Os 3 Modos
A Instagram Basic Display API foi desativada em dezembro de 2024. A oEmbed pública requer token desde 2020. Não existe acesso direto pelo browser (CORS bloqueado). O SWInstagram resolve isso via proxy PHP server-side — seu servidor faz a requisição, o browser nunca toca diretamente no Instagram.
Copie sw-instagram.php para seu projeto.
Informe sw-instagram-user. O PHP busca e cacheia por 1h. Cards nativos com imagem, legenda e stats.
Crie um feed.json manualmente
ou via cron. 100% confiável, sem depender do Instagram. Ideal para produção crítica.
URLs individuais de posts via sw-instagram-urls.
Usa o embed.js do Instagram — renderiza o card nativo completo por post.
2. Modo Proxy PHP — Feed Automático
A forma mais prática. Copie sw-instagram.php para seu projeto, aponte o atributo
sw-instagram-proxy e informe o username. O PHP busca no Instagram, cacheia por 1h
e serve para o JS. Zero token, zero configuração.
Passo 1 — Copie o proxy
O proxy cria automaticamente a pasta cache/instagram/ ao lado do PHP.
Certifique-se que o PHP tem cURL habilitado (padrão na maioria dos servidores).
Passo 2 — Use no HTML
Demo ao vivo (modo demo)
Preview visual com dados simulados de @sanweb.dev:
Atributos do modo proxy
| Atributo | Padrão | Descrição |
|---|---|---|
sw-instagram-user | — | Username do Instagram (sem @) |
sw-instagram-proxy | /dist/sw-instagram.php | Caminho do proxy PHP no seu servidor |
sw-instagram-limit | 12 | Máximo de posts a exibir (até 50) |
sw-instagram-cols | 3 | Colunas da grade |
sw-instagram-gap | .4rem | Espaçamento entre os cards |
API do proxy PHP
O proxy faz proxy de imagens automaticamente — as URLs das imagens apontam para o seu servidor, evitando que o Instagram bloqueie hotlinking direto. Cache de imagens por 24h.
O proxy faz scraping sem autenticação. Pode parar de funcionar se o Instagram mudar a estrutura interna. Use o Modo 2 (JSON estático) como fallback confiável.
3. Modo JSON Estático — 100% Confiável
Mantenha um feed.json com os dados dos posts.
Pode ser atualizado manualmente, por cron job ou qualquer processo.
Zero dependência do Instagram em tempo real.
Formato do JSON
Dica pro: combine o proxy PHP com um cron job. O PHP gera o JSON e salva em
/data/instagram.json. O componente aponta para esse arquivo.
Se o Instagram bloquear, o JSON antigo ainda serve o conteúdo.
4. Modo Embed Oficial — Posts por URL
Para incorporar posts específicos pelo link. Usa o embed.js do Instagram
e renderiza o card nativo completo. Não precisa de proxy nem JSON.
Modo embed (padrão)
Modo iframe
Modo iframe não carrega embed.js, mas pode ser bloqueado pelo navegador dependendo de cookies de terceiros.
5. Variações Visuais
4 colunas, 8 posts
2 colunas, 4 posts, gap grande
5 colunas, sem header (feed compacto)
6. Comparativo dos Modos
| Característica | Proxy PHP | JSON Estático | Embed URL |
|---|---|---|---|
| Automático | ✅ Sim | ⚙️ Via cron | ✅ Sim |
| Confiabilidade | ⚠️ Pode ser bloqueado | ✅ 100% | ⚠️ Depende do Instagram |
| Velocidade | ✅ Cache 1h | ✅ Arquivo estático | ⚠️ Carrega embed.js |
| Design customizável | ✅ Cards SW nativos | ✅ Cards SW nativos | ❌ Layout do Instagram |
| Requer PHP | ✅ Sim | ❌ Não | ❌ Não |
| Dados de perfil | ✅ Nome, avatar, followers | ✅ Se incluir no JSON | ❌ Por post apenas |
| Proxy de imagens | ✅ Automático | ❌ Você hospeda | ✅ Nativo do embed |
7. Quick Reference — Todos os Atributos
| Atributo | Modo | Padrão | Descrição |
|---|---|---|---|
sw-instagram | todos | — | Ativa o componente no elemento |
sw-instagram-user | proxy | — | Username do Instagram (sem @) |
sw-instagram-proxy | proxy | /dist/sw-instagram.php | Caminho do proxy PHP |
sw-instagram-json | json | — | URL do JSON estático |
sw-instagram-urls | embed | — | URLs de posts separadas por vírgula |
sw-instagram-mode | embed | embed | embed ou iframe |
sw-instagram-limit | proxy/json | 12 | Máximo de posts a renderizar |
sw-instagram-cols | todos | 3 | Colunas da grade |
sw-instagram-gap | todos | .4rem | Espaçamento entre posts |
sw-instagram-demo | demo | — | Ativa modo demo com dados simulados |