Incorporação

Incorpora as tuas coleções e pesquisas guardadas do Linkflare diretamente em qualquer site. Os visitantes podem explorar as tuas listas curadas sem saírem da tua página — perfeito para recomendações de livros, listas de recursos, listas de desejos, coleções de receitas e muito mais.

Exemplo ao vivo

Eis uma pesquisa guardada realmente incorporada (nomeações ao Óscar de Melhor Filme) — 4 colunas, cartões com título, link, imagem e metadados extraídos automaticamente, com o cabeçalho, a barra de pesquisa e o controlo de ordenação ocultos:

Primeiros passos

Para incorporares, é necessária uma coleção ou pesquisa guardada pública. Se ainda não partilhaste nenhuma, vê primeiro Partilha e colaboração.

1. Abre a coleção ou pesquisa guardada que queres incorporar.
2. Clica no botão Partilhar no cabeçalho.
3. Ativa o Acesso público (caso ainda não esteja).
4. Expande a secção Incorporar no teu site por baixo do URL de partilha.
5. Personaliza o aspeto (tema, vista, campos — ver abaixo).
6. Copia o código gerado e cola-o no HTML do teu site.

Métodos de incorporação

O Linkflare oferece três formas de incorporar conteúdo. Todas geram um iframe responsivo que ajusta automaticamente o seu tamanho e que, por predefinição, adota a preferência clara ou escura do teu visitante.

Widget (recomendado)

O widget é a opção mais simples. Coloca um <div> e um pequeno <script> na tua página — e está feito.

<div
  data-linkflare-collection="YOUR_SHARE_ID"
  data-theme="auto"
  data-view="grid"
  data-columns="3"
></div>
<script src="https://linkflare.io/embed.js" async></script>

Para pesquisas guardadas, substitui data-linkflare-collection por data-linkflare-search.

O widget apresenta um link «Powered by Linkflare» por baixo do iframe, que ajuda outros a descobrirem a ferramenta. Os utilizadores Pro podem removê-lo com data-branding="false".

iframe

Usa um iframe simples se preferires controlo total ou se o teu CMS não permitir scripts próprios.

<iframe
  src="https://app.linkflare.io/embed/collection/YOUR_SHARE_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border:0;border-radius:8px;"
  loading="lazy"
  allowtransparency="true"
></iframe>

Componente web

O mesmo script embed.js regista também um elemento personalizado <linkflare-embed>. Usa-o se preferires uma tag limpa e autoexplicativa:

<linkflare-embed
  type="collection"
  share-id="YOUR_SHARE_ID"
  theme="auto"
  view="grid"
  columns="3"
></linkflare-embed>
<script src="https://linkflare.io/embed.js" async></script>

Opções de personalização

Todas as opções podem ser definidas visualmente no gerador de incorporação dentro da janela de partilha — o código gerado atualiza-se em tempo real. Também as podes definir manualmente através de atributos de dados (widget), atributos de elemento (componente web) ou parâmetros de consulta no URL (iframe).

Tema

Escolhe Automático (adapta-se à preferência de sistema do visitante), Claro ou Escuro.

Modo de vista

Estão disponíveis três esquemas: Grelha (predefinição), Moodboard (masonry) e Lista.

• Widget: data-view="masonry"
• Componente web: view="masonry"
• URL do iframe: ?view=masonry

Colunas

No modo grelha ou moodboard, podes definir o número de colunas (1–6, predefinição 3). No modo lista, isto é ignorado.

• Widget: data-columns="2"
• Componente web: columns="2"
• URL do iframe: ?columns=2

Campos visíveis

Define quais os campos do marcador que surgem em cada cartão. Por predefinição, são apresentados todos os campos. Passa uma lista, separada por vírgulas, dos campos que devem estar visíveis:

Exemplo — mostrar apenas a imagem e o título:

• Widget: data-fields="name,image"
• URL do iframe: ?fields=name,image

O gerador de incorporação tem ainda predefinições rápidas: Todos, Mínimo (apenas título + URL) e Apenas imagem.

Elementos visíveis

Podes ocultar determinados elementos de interface da incorporação. Passa uma lista, separada por vírgulas, dos elementos a ocultar:

• header – o nome da coleção e a descrição no topo
• search – a barra de pesquisa
• sorting – o menu suspenso de ordenação

Exemplo — ocultar o cabeçalho e a ordenação:

• Widget: data-hide="header,sorting"
• URL do iframe: ?hide=header,sorting

Destino dos links

Define onde os links clicados são abertos: Novo separador (_blank, predefinição) ou Mesmo separador (_top).

• Widget: data-target="_top"
• URL do iframe: ?target=_top

Altura

Define a altura inicial do iframe em pixels (predefinição 600). O widget e a componente web ajustam automaticamente o seu tamanho ao conteúdo, pelo que isto é relevante sobretudo para iframes simples.

• Widget: data-height="800"
• Componente web: height="800"
• iframe: height="800"

Marca

Por predefinição, o widget apresenta um pequeno link «Powered by Linkflare» por baixo do conteúdo incorporado. Este link é renderizado fora do iframe e dá à tua página um verdadeiro backlink de SEO.

Os utilizadores Pro podem ocultar esta marca através do interruptor no gerador de incorporação ou manualmente com data-branding="false" / ?branding=0.

Incorporações protegidas por palavra-passe

Se uma coleção ou pesquisa guardada partilhada estiver protegida por palavra-passe, a incorporação apresenta um formulário de palavra-passe inline. Os visitantes introduzem a palavra-passe uma vez por sessão para desbloquearem o conteúdo — não é necessário qualquer redirecionamento.

Análises de incorporação

Cada incorporação regista automaticamente contagens de visualizações anónimas. Abre a secção de incorporação na janela de partilha para veres as tuas estatísticas:

• Todos os utilizadores – número total de visualizações da incorporação.
• Utilizadores Pro – adicionalmente, uma repartição por referenciador que mostra que páginas apresentam a tua incorporação.

oEmbed

O Linkflare disponibiliza um endpoint oEmbed, o que significa que plataformas como o WordPress, o Medium e o Notion conseguem incorporar automaticamente as tuas coleções quando colas um URL de partilha.

O URL de descoberta de oEmbed segue este padrão:

https://api.linkflare.io/linkflare/collections/{shareId}/oembed
https://api.linkflare.io/linkflare/searches/{shareId}/oembed

Referência rápida