SWCore / Componentes / Feed do Instagram

Feed do Instagram Componentes

Mostra as últimas publicações de um perfil — grade ou feed completo.

O que é

Exibe posts recentes de um perfil do Instagram na página, em grade de miniaturas ou como um feed completo (foto + legenda + estatísticas).

Como funciona

Não fala direto com a API oficial do Instagram (exige app aprovado) — funciona via proxy próprio, JSON estático, embed oficial, ou uma demo local pra testar sem depender de nada externo.

Exemplos

Demonstração local — sem depender de rede Ao vivo 
<!-- ótimo pra montar e ajustar o layout antes de ligar na conta real -->
<div sw-instagram sw-instagram-demo sw-instagram-cols="3" sw-instagram-limit="6"></div>
Grade — colunas, espaçamento e quantidade Ao vivo
cols="2" · gap="1rem"
cols="4" · sem espaço entre elas
<div sw-instagram sw-instagram-demo
     sw-instagram-cols="4"
     sw-instagram-gap="0"
     sw-instagram-limit="8"></div>

<!-- padrões: cols=3 · gap=.4rem · limit=12 -->
As 4 fontes de posts Ao vivo

A API oficial do Instagram exige um app aprovado, então o componente oferece quatro caminhos — do mais simples ao mais completo:

  1. demo local — sem rede, pra montar a tela
  2. perfil via proxy — o feed de verdade, passando pelo seu servidor
  3. JSON estático — você gera o arquivo e ele lê
  4. URLs de posts — você escolhe quais aparecem
<!-- 1. demonstração local -->
<div sw-instagram sw-instagram-demo></div>

<!-- 2. perfil de verdade, pelo seu proxy PHP -->
<div sw-instagram sw-instagram-user="sanweb.dev"
     sw-instagram-proxy="/dist/sw-instagram.php"></div>

<!-- 3. um JSON que você mesmo mantém -->
<div sw-instagram sw-instagram-json="/dados/posts.json"></div>

<!-- 4. posts escolhidos a dedo -->
<div sw-instagram
     sw-instagram-urls="https://www.instagram.com/p/AAA/, https://www.instagram.com/p/BBB/"></div>
Escolhendo posts a dedo — embed e iframe Ao vivo

Com sw-instagram-urls você aponta os posts um a um. O mode decide como cada um é mostrado:

embed (padrão) usa o script oficial do Instagram — post completo, com legenda e curtidas. iframe incorpora sem depender desse script.

Não há demonstração ao vivo aqui porque os dois modos carregam conteúdo do instagram.com.

<!-- embed oficial (padrão) -->
<div sw-instagram
     sw-instagram-urls="https://www.instagram.com/p/AAA/"
     sw-instagram-mode="embed"></div>

<!-- em iframe -->
<div sw-instagram
     sw-instagram-urls="https://www.instagram.com/p/AAA/"
     sw-instagram-mode="iframe"></div>

Atributos

sw-instagram-demo
só a presença: usa posts de demonstração locais, sem rede nenhuma
sw-instagram-user
o perfil — buscado através do seu proxy
sw-instagram-proxy
caminho do proxy PHP — padrão "/dist/sw-instagram.php"
sw-instagram-json
URL de um JSON estático com os posts (alternativa ao proxy)
sw-instagram-urls
lista de URLs de posts, separadas por vírgula (alias: -url)
sw-instagram-mode
como mostrar as URLs: embed (padrão) \| iframe
sw-instagram-cols
colunas da grade — padrão 3
sw-instagram-gap
espaço entre os posts — padrão ".4rem"
sw-instagram-limit
quantos posts mostrar — padrão 12

Variantes

sw-instagram-demo
fonte 1 — demonstração local: serve pra montar a tela sem depender de nada
sw-instagram-user + -proxy
fonte 2 — o perfil de verdade, passando pelo seu servidor
sw-instagram-json
fonte 3 — um arquivo JSON que você mesmo gera e atualiza
sw-instagram-urls
fonte 4 — você escolhe post a post
mode="embed"
padrão — usa o embed oficial do Instagram
mode="iframe"
incorpora num iframe

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

  • Ele não fala direto com a API oficial do Instagram — ela exige um app aprovado pela Meta. Por isso as quatro fontes acima.
  • No modo perfil, quem busca é o seu proxy (/dist/sw-instagram.php): sem ele no servidor, essa fonte não funciona.
  • Feed de rede social muda sem avisar: se o Instagram alterar o formato, a fonte por proxy pode parar. As fontes JSON e URLs são as mais estáveis.
← AnteriorSlider de imagens Próximo →Tabela avançada