Incrustación

Incrusta tus colecciones de Linkflare y búsquedas guardadas directamente en cualquier web. Quienes la visiten pueden explorar tus listas cuidadas sin salir de tu página: perfecto para recomendaciones de libros, listas de recursos, listas de regalos, colecciones de recetas y más.

Ejemplo en vivo

Aquí tienes una búsqueda guardada incrustada de verdad (nominaciones al Óscar a la mejor película): 4 columnas, tarjetas con título, enlace, imagen y metadatos extraídos automáticamente, con la cabecera, la barra de búsqueda y el control de orden ocultos:

Primeros pasos

Para incrustar se necesita una colección o búsqueda guardada pública. Si aún no has compartido ninguna, consulta primero Compartir y colaborar.

1. Abre la colección o búsqueda guardada que quieres incrustar.
2. Haz clic en el botón Compartir en la cabecera.
3. Pon Acceso público en ACTIVADO (si aún no lo está).
4. Despliega la sección Incrustar en tu web debajo de la URL de compartir.
5. Personaliza el aspecto (diseño, vista, campos; ver más abajo).
6. Copia el código generado y pégalo en el HTML de tu web.

Métodos de incrustación

Linkflare ofrece tres formas de incrustar contenido. Todas generan un iframe responsivo que ajusta su tamaño automáticamente y que, de forma predeterminada, adopta la preferencia de modo claro u oscuro de quien lo visita.

Widget (recomendado)

El widget es la opción más sencilla. Coloca un <div> y un pequeño <script> en tu página y listo.

<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 búsquedas guardadas, sustituye data-linkflare-collection por data-linkflare-search.

El widget muestra un enlace «Powered by Linkflare» debajo del iframe, que ayuda a otros a descubrir la herramienta. Los usuarios Pro pueden eliminarlo con data-branding="false".

iframe

Usa un iframe sencillo si prefieres el control total o si tu CMS no permite scripts propios.

<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

El mismo script embed.js registra además un elemento personalizado <linkflare-embed>. Úsalo si prefieres una etiqueta limpia y 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>

Opciones de personalización

Todas las opciones se pueden configurar visualmente en el generador de incrustación del diálogo de compartir —el código generado se actualiza en tiempo real—. También puedes definirlas manualmente mediante atributos de datos (widget), atributos de elemento (componente web) o parámetros de consulta de la URL (iframe).

Diseño

Elige Automático (se adapta a la preferencia del sistema de quien lo visita), Claro u Oscuro.

Modo de vista

Hay tres diseños disponibles: Cuadrícula (predeterminado), Moodboard (mosaico) y Lista.

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

Columnas

En el modo cuadrícula o moodboard puedes definir el número de columnas (1-6, predeterminado 3). En el modo lista se ignora.

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

Campos visibles

Define qué campos del marcador aparecen en cada tarjeta. De forma predeterminada se muestran todos los campos. Pasa una lista de campos separados por comas que deban ser visibles:

Ejemplo: mostrar solo la imagen y el título:

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

El generador de incrustación tiene además preajustes rápidos: Todos, Minimal (solo título + URL) y Solo imagen.

Elementos visibles

Puedes ocultar determinados elementos de la interfaz de la incrustación. Pasa una lista separada por comas de los elementos que quieras ocultar:

• header: el nombre y la descripción de la colección, arriba
• search: la barra de búsqueda
• sorting: el desplegable de orden

Ejemplo: ocultar la cabecera y el orden:

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

Destino del enlace

Define dónde se abren los enlaces al hacer clic: Pestaña nueva (_blank, predeterminado) o Misma pestaña (_top).

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

Altura

Define la altura inicial del iframe en píxeles (predeterminado 600). El widget y el componente web ajustan su tamaño automáticamente al contenido, así que esto es relevante sobre todo para los iframes sencillos.

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

Marca

De forma predeterminada, el widget muestra un pequeño enlace «Powered by Linkflare» debajo del contenido incrustado. Este enlace se renderiza fuera del iframe y le da a tu página un enlace de retroceso (backlink) real para el SEO.

Los usuarios Pro pueden ocultar esta marca con el interruptor del generador de incrustación o manualmente con data-branding="false" / ?branding=0.

Incrustaciones protegidas con contraseña

Si una colección o búsqueda guardada compartida está protegida con contraseña, la incrustación muestra un formulario de contraseña en línea. Quienes la visiten introducen la contraseña una vez por sesión para desbloquear el contenido, sin necesidad de redirección.

Analíticas de la incrustación

Cada incrustación registra automáticamente el número de visualizaciones de forma anónima. Abre la sección de incrustación en el diálogo de compartir para ver tus estadísticas:

• Todos los usuarios: número total de visualizaciones de la incrustación.
• Usuarios Pro: además, un desglose de referencias que muestra qué páginas muestran tu incrustación.

oEmbed

Linkflare ofrece un punto de acceso oEmbed, lo que significa que plataformas como WordPress, Medium y Notion pueden incrustar tus colecciones automáticamente cuando pegas una URL de compartir.

La URL de descubrimiento de oEmbed sigue este patrón:

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

Referencia rápida