Intégration (embed)

Intègre tes collections et recherches enregistrées Linkflare directement sur n'importe quel site. Les visiteurs peuvent parcourir tes listes soignées sans quitter ta page – parfait pour des recommandations de livres, des listes de ressources, des listes de cadeaux, des collections de recettes et plus encore.

Exemple en direct

Voici une véritable recherche enregistrée intégrée (les nominations à l'Oscar du meilleur film) – 4 colonnes, des cartes avec titre, lien, image et métadonnées extraites automatiquement, l'en-tête, la barre de recherche et les commandes de tri étant masqués :

Premiers pas

L'intégration nécessite une collection ou une recherche enregistrée publique. Si tu n'en as pas encore partagé, consulte d'abord Partage et collaboration.

1. Ouvre la collection ou la recherche enregistrée que tu veux intégrer.
2. Clique sur le bouton Partager dans l'en-tête.
3. Active l'accès public (si ce n'est pas déjà fait).
4. Déplie la section Intégrer sur ton site sous l'URL de partage.
5. Personnalise l'apparence (thème, vue, champs – voir ci-dessous).
6. Copie le code généré et colle-le dans le HTML de ton site.

Méthodes d'intégration

Linkflare propose trois façons d'intégrer du contenu. Toutes produisent un iframe responsive qui redimensionne automatiquement et adopte par défaut la préférence claire ou sombre de ton visiteur.

Widget (recommandé)

Le widget est l'option la plus simple. Place un <div> et un petit <script> sur ta page – et c'est tout.

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

Pour les recherches enregistrées, remplace data-linkflare-collection par data-linkflare-search.

Le widget affiche un lien « Powered by Linkflare » sous l'iframe, qui aide les autres à découvrir l'outil. Les utilisateurs Pro peuvent le retirer avec data-branding="false".

iframe

Utilise un simple iframe si tu préfères un contrôle total ou si ton CMS n'autorise pas les scripts personnalisés.

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

Composant web

Le même script embed.js enregistre aussi un élément personnalisé <linkflare-embed>. Utilise-le si tu préfères une balise propre et explicite :

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

Options de personnalisation

Toutes les options se règlent visuellement dans le générateur d'intégration de la boîte de dialogue de partage – le code généré se met à jour en temps réel. Tu peux aussi les définir manuellement via des attributs de données (widget), des attributs d'élément (composant web) ou des paramètres de requête d'URL (iframe).

Thème

Choisis Automatique (s'adapte à la préférence système du visiteur), Clair ou Sombre.

Mode d'affichage

Trois mises en page sont disponibles : Grille (par défaut), Moodboard (masonry) et Liste.

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

Colonnes

En mode grille ou moodboard, tu peux définir le nombre de colonnes (1–6, 3 par défaut). En mode liste, ce réglage est ignoré.

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

Champs visibles

Définis quels champs du favori apparaissent sur chaque carte. Par défaut, tous les champs sont affichés. Passe une liste de champs séparés par des virgules à rendre visibles :

Exemple – afficher uniquement l'image et le titre :

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

Le générateur d'intégration propose aussi des préréglages rapides : Tous, Minimal (titre + URL uniquement) et Image seule.

Éléments visibles

Tu peux masquer certains éléments d'interface de l'intégration. Passe une liste séparée par des virgules des éléments à masquer :

• header – le nom de la collection et la description en haut
• search – la barre de recherche
• sorting – le menu déroulant de tri

Exemple – masquer l'en-tête et le tri :

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

Cible des liens

Définis où s'ouvrent les liens cliqués : Nouvel onglet (_blank, par défaut) ou Même onglet (_top).

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

Hauteur

Définis la hauteur initiale de l'iframe en pixels (600 par défaut). Le widget et le composant web redimensionnent automatiquement leur taille selon le contenu, donc ce réglage concerne surtout les iframes simples.

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

Marque

Par défaut, le widget affiche un petit lien « Powered by Linkflare » sous le contenu intégré. Ce lien est rendu en dehors de l'iframe et offre à ta page un véritable backlink SEO.

Les utilisateurs Pro peuvent masquer cette marque via l'option du générateur d'intégration ou manuellement avec data-branding="false" / ?branding=0.

Intégrations protégées par mot de passe

Si une collection ou une recherche enregistrée partagée est protégée par mot de passe, l'intégration affiche un formulaire de mot de passe en ligne. Les visiteurs saisissent le mot de passe une fois par session pour déverrouiller le contenu – aucune redirection nécessaire.

Statistiques d'intégration

Chaque intégration enregistre automatiquement des nombres de vues anonymes. Ouvre la section d'intégration dans la boîte de dialogue de partage pour voir tes statistiques :

• Tous les utilisateurs – nombre total de vues de l'intégration.
• Utilisateurs Pro – en plus, une répartition des référents qui montre quelles pages affichent ton intégration.

oEmbed

Linkflare fournit un point de terminaison oEmbed, ce qui signifie que des plateformes comme WordPress, Medium et Notion peuvent intégrer automatiquement tes collections lorsque tu colles une URL de partage.

L'URL de découverte oEmbed suit ce modèle :

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

Référence rapide