Einbetten

Bette deine Linkflare-Sammlungen und gespeicherten Suchen direkt auf jeder Website ein. Besucher können deine kuratierten Listen durchsehen, ohne deine Seite zu verlassen – perfekt für Buchempfehlungen, Ressourcenlisten, Geschenklisten, Rezeptsammlungen und mehr.

Live-Beispiel

Hier ist eine echte eingebettete gespeicherte Suche (Oscar-Nominierungen für den besten Film) – 4 Spalten, Karten mit Titel, Link, Bild und automatisch extrahierten Metadaten, wobei Kopfzeile, Suchleiste und Sortier- steuerung ausgeblendet sind:

Erste Schritte

Zum Einbetten ist eine öffentliche Sammlung oder gespeicherte Suche erforderlich. Wenn du noch keine geteilt hast, sieh dir zuerst Teilen & Zusammenarbeiten an.

1. Öffne die Sammlung oder gespeicherte Suche, die du einbetten möchtest.
2. Klicke auf die Schaltfläche Teilen in der Kopfzeile.
3. Schalte Öffentlicher Zugriff auf EIN (falls noch nicht geschehen).
4. Klappe den Abschnitt Auf deiner Website einbetten unterhalb der Teilen-URL auf.
5. Passe das Erscheinungsbild an (Design, Ansicht, Felder – siehe unten).
6. Kopiere den generierten Code und füge ihn in das HTML deiner Website ein.

Einbettungsmethoden

Linkflare bietet drei Möglichkeiten, Inhalte einzubetten. Alle erzeugen einen automatisch größenanpassenden, responsiven iframe, der standardmäßig die Hell- oder Dunkel-Präferenz deines Besuchers übernimmt.

Widget (empfohlen)

Das Widget ist die einfachste Option. Setze ein <div> und ein kleines <script> auf deine Seite – fertig.

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

Für gespeicherte Suchen ersetze data-linkflare-collection durch data-linkflare-search.

Das Widget rendert einen „Powered by Linkflare“-Link unterhalb des iframes, der anderen hilft, das Tool zu entdecken. Pro-Nutzer können diesen mit data-branding="false" entfernen.

iframe

Verwende einen einfachen iframe, wenn du volle Kontrolle bevorzugst oder dein CMS keine eigenen Skripte erlaubt.

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

Dasselbe embed.js-Skript registriert außerdem ein benutzerdefiniertes Element <linkflare-embed>. Verwende es, wenn du ein sauberes, selbsterklärendes Tag möchtest:

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

Anpassungsoptionen

Alle Optionen lassen sich visuell im Einbettungsgenerator im Teilen-Dialog einstellen – der generierte Code aktualisiert sich in Echtzeit. Du kannst sie auch manuell über Daten-Attribute (Widget), Element-Attribute (Web-Komponente) oder URL-Query- Parameter (iframe) festlegen.

Design

Wähle Automatisch (passt sich der Systempräferenz des Besuchers an), Hell oder Dunkel.

Ansichtsmodus

Drei Layouts sind verfügbar: Raster (Standard), Moodboard (Masonry) und Liste.

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

Spalten

Im Raster- oder Moodboard-Modus kannst du die Anzahl der Spalten festlegen (1–6, Standard 3). Im Listenmodus wird dies ignoriert.

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

Sichtbare Felder

Lege fest, welche Lesezeichen-Felder auf jeder Karte erscheinen. Standardmäßig werden alle Felder angezeigt. Übergib eine durch Kommas getrennte Liste der Felder, die sichtbar sein sollen:

Beispiel – nur Bild und Titel anzeigen:

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

Der Einbettungsgenerator hat außerdem schnelle Voreinstellungen: Alle, Minimal (nur Titel + URL) und Nur Bild.

Sichtbare Elemente

Du kannst bestimmte UI-Elemente der Einbettung ausblenden. Übergib eine durch Kommas getrennte Liste der auszublendenden Elemente:

• header – der Sammlungsname und die Beschreibung oben
• search – die Suchleiste
• sorting – das Sortier-Dropdown

Beispiel – Kopfzeile und Sortierung ausblenden:

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

Link-Ziel

Lege fest, wo angeklickte Links geöffnet werden: Neuer Tab (_blank, Standard) oder Gleicher Tab (_top).

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

Höhe

Lege die anfängliche iframe-Höhe in Pixeln fest (Standard 600). Das Widget und die Web- Komponente passen ihre Größe automatisch an den Inhalt an, sodass dies hauptsächlich für einfache iframes relevant ist.

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

Branding

Standardmäßig zeigt das Widget einen kleinen „Powered by Linkflare“-Link unterhalb des eingebetteten Inhalts an. Dieser Link wird außerhalb des iframes gerendert und verschafft deiner Seite einen echten SEO-Backlink.

Pro-Nutzer können dieses Branding über den Schalter im Einbettungs- generator oder manuell mit data-branding="false" / ?branding=0 ausblenden.

Passwortgeschützte Einbettungen

Wenn eine geteilte Sammlung oder gespeicherte Suche passwortgeschützt ist, zeigt die Einbettung ein Inline-Passwortformular an. Besucher geben das Passwort einmal pro Sitzung ein, um den Inhalt freizuschalten – keine Weiterleitung erforderlich.

Einbettungs-Analytics

Jede Einbettung erfasst automatisch anonyme Aufrufzahlen. Öffne den Einbettungsabschnitt im Teilen-Dialog, um deine Statistiken zu sehen:

• Alle Nutzer – Gesamtzahl der Einbettungsaufrufe.
• Pro-Nutzer – zusätzlich eine Referrer-Aufschlüsselung, die zeigt, welche Seiten deine Einbettung anzeigen.

oEmbed

Linkflare stellt einen oEmbed-Endpunkt bereit, was bedeutet, dass Plattformen wie WordPress, Medium und Notion deine Sammlungen automatisch einbetten können, wenn du eine Teilen-URL einfügst.

Die oEmbed-Discovery-URL folgt diesem Muster:

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

Kurzreferenz