Incorporamento

Incorpora le tue raccolte e ricerche salvate di Linkflare direttamente in qualsiasi sito web. I visitatori possono esplorare le tue liste curate senza lasciare la tua pagina, perfetto per consigli di lettura, liste di risorse, liste di regali, raccolte di ricette e altro ancora.

Esempio dal vivo

Ecco una vera ricerca salvata incorporata (candidature all'Oscar come miglior film): 4 colonne, schede con titolo, link, immagine e metadati estratti automaticamente, con intestazione, barra di ricerca e controllo dell'ordinamento nascosti:

Per iniziare

Per incorporare serve una raccolta o una ricerca salvata pubblica. Se non ne hai ancora condivisa una, dai prima un'occhiata a Condivisione e collaborazione.

  1. Apri la raccolta o la ricerca salvata che vuoi incorporare.
  2. Clicca sul pulsante Condividi nell'intestazione.
  3. Imposta Accesso pubblico su ON (se non l'hai già fatto).
  4. Espandi la sezione Incorpora sul tuo sito web sotto l'URL di condivisione.
  5. Personalizza l'aspetto (tema, vista, campi, vedi sotto).
  6. Copia il codice generato e incollalo nell'HTML del tuo sito web.
Pannello per la configurazione dell'incorporamento

Metodi di incorporamento

Linkflare offre tre modi per incorporare contenuti. Tutti generano un iframe responsivo che si ridimensiona automaticamente e che, per impostazione predefinita, adotta la preferenza chiara o scura del tuo visitatore.

Widget (consigliato)

Il widget è l'opzione più semplice. Inserisci un <div> e un piccolo <script> nella tua pagina, ed è fatta.

<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>

Per le ricerche salvate, sostituisci data-linkflare-collection con data-linkflare-search.

Il widget mostra un link «Powered by Linkflare» sotto l'iframe, che aiuta gli altri a scoprire lo strumento. Gli utenti Pro possono rimuoverlo con data-branding="false".

iframe

Usa un semplice iframe se preferisci il controllo completo o se il tuo CMS non consente script personalizzati.

<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>

Web component

Lo stesso script embed.js registra inoltre un elemento personalizzato <linkflare-embed>. Usalo se vuoi un tag pulito e autoesplicativo:

<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>

Opzioni di personalizzazione

Tutte le opzioni si possono impostare visivamente nel generatore di incorporamenti, dentro la finestra di condivisione – il codice generato si aggiorna in tempo reale. Puoi anche impostarle manualmente tramite attributi data (widget), attributi dell'elemento (web component) o parametri di query dell'URL (iframe).

Tema

Scegli Automatico (si adatta alla preferenza di sistema del visitatore), Chiaro o Scuro.

Metodo Attributo / parametro
Widget data-theme="dark"
Web component theme="dark"
URL iframe ?theme=dark

Modalità di visualizzazione

Sono disponibili tre layout: Griglia (predefinito), Moodboard (masonry) ed Elenco.

  • Widget: data-view="masonry"
  • Web component: view="masonry"
  • URL iframe: ?view=masonry

Colonne

In modalità griglia o moodboard puoi impostare il numero di colonne (1–6, predefinito 3). In modalità elenco questo valore viene ignorato.

  • Widget: data-columns="2"
  • Web component: columns="2"
  • URL iframe: ?columns=2

Campi visibili

Stabilisci quali campi del segnalibro compaiono su ogni scheda. Per impostazione predefinita vengono mostrati tutti i campi. Passa un elenco di campi separati da virgola che devono essere visibili:

Chiave del campo Mostra
nameTitolo
linkURL
imageImmagine di anteprima
dateData di aggiunta
tagsTag
linkTypeBarra colorata per il tipo di link
linkTypeIconBadge con icona per il tipo di link
customMetadataCampi di metadati personalizzati
automaticMetadataMetadati estratti automaticamente
notesNote

Esempio – mostrare solo immagine e titolo:

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

Il generatore di incorporamenti ha inoltre alcune preimpostazioni rapide: Tutti, Minimo (solo titolo + URL) e Solo immagine.

Elementi visibili

Puoi nascondere determinati elementi dell'interfaccia dell'incorporamento. Passa un elenco separato da virgola degli elementi da nascondere:

  • header – il nome della raccolta e la descrizione in alto
  • search – la barra di ricerca
  • sorting – il menu a tendina di ordinamento

Esempio – nascondere intestazione e ordinamento:

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

Destinazione dei link

Stabilisci dove si aprono i link cliccati: Nuova scheda (_blank, predefinito) o Stessa scheda (_top).

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

Altezza

Imposta l'altezza iniziale dell'iframe in pixel (predefinito 600). Il widget e il web component si ridimensionano automaticamente in base al contenuto, quindi questo è rilevante soprattutto per i semplici iframe.

  • Widget: data-height="800"
  • Web component: height="800"
  • iframe: height="800"

Branding

Per impostazione predefinita, il widget mostra un piccolo link «Powered by Linkflare» sotto il contenuto incorporato. Questo link viene mostrato al di fuori dell'iframe e fornisce al tuo sito un vero backlink SEO.

Gli utenti Pro possono nascondere questo branding tramite l'interruttore nel generatore di incorporamenti o manualmente con data-branding="false" / ?branding=0.

Incorporamenti protetti da password

Se una raccolta o una ricerca salvata condivisa è protetta da password, l'incorporamento mostra un modulo password inline. I visitatori inseriscono la password una volta per sessione per sbloccare il contenuto, senza alcun reindirizzamento.

Analytics dell'incorporamento

Ogni incorporamento registra automaticamente il numero di visualizzazioni anonime. Apri la sezione incorporamento nella finestra di condivisione per vedere le tue statistiche:

  • Tutti gli utenti – numero totale di visualizzazioni dell'incorporamento.
  • Utenti Pro – in più una ripartizione dei referrer, che mostra quali pagine visualizzano il tuo incorporamento.

oEmbed

Linkflare mette a disposizione un endpoint oEmbed, il che significa che piattaforme come WordPress, Medium e Notion possono incorporare automaticamente le tue raccolte quando incolli un URL di condivisione.

L'URL di discovery oEmbed segue questo schema:

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

Riferimento rapido

Opzione Attributo widget Parametro URL Valori
Tema data-theme theme auto | light | dark
Vista data-view view grid | masonry | list
Colonne data-columns columns 16
Nascondere elementi data-hide hide header, search, sorting
Campi data-fields fields Separati da virgola (vedi tabella sopra)
Destinazione dei link data-target target _blank | _top
Branding data-branding branding false / 0 (solo Pro)
Altezza data-height Pixel (predefinito 600)