GET https://iframe.ly/api/iframely?url={URL}&api_key={API_KEY}

GET https://iframe.ly/api/oembed?url={URL}&api_key={API_KEY}

GET https://iframely.net/api/iframely?url={URL}&key={MD5_OF_API_KEY}

{
  "meta": {
    "title": "Page Title",
    "description": "Page description",
    "author": "Author Name",
    "author_url": "https://...",
    "site": "Site Name",
    "canonical": "https://...",
    "duration": 120,
    "date": "2024-01-01",
    "medium": "video"
  },
  "links": {
    "player": [{ "href": "...", "type": "text/html", "rel": ["player"], "media": {"aspect-ratio": 1.778}, "html": "<div>...</div>" }],
    "thumbnail": [{ "href": "...", "type": "image/jpeg", "rel": ["thumbnail"] }],
    "icon": [{ "href": "...", "type": "image/png", "rel": ["icon"] }]
  },
  "html": "<div>recommended embed HTML</div>",
  "rel": ["player", "ssl"],
  "id": "content-id"
}

GET https://iframe.ly/{ID1}-{ID2}-...-{IDn}.json

{
  "ID1": { "meta": {...}, "links": {...} },
  "ID2": { "meta": {...}, "links": {...} }
}

<script src="//cdn.iframe.ly/embed.js" async></script>

"use client";

import { useEffect, useState } from "react";

const IFRAMELY_KEY = process.env.NEXT_PUBLIC_IFRAMELY_KEY!; // MD5 hash of API key

interface IframelyEmbedProps {
  url: string;
}

export function IframelyEmbed({ url }: IframelyEmbedProps) {
  const [html, setHtml] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch(
      `https://iframely.net/api/iframely?url=${encodeURIComponent(url)}&key=${IFRAMELY_KEY}&iframe=1&omit_script=1`
    )
      .then((res) => res.json())
      .then((data) => {
        if (data.html) {
          setHtml(data.html);
        } else if (data.error) {
          setError(`${data.error}: ${data.message}`);
        }
      })
      .catch((err) => setError(err.message));
  }, [url]);

  useEffect(() => {
    if (html) {
      window.iframely?.load();
    }
  }, [html]);

  if (error) return <div>Error: {error}</div>;
  if (!html) return null;

  // dangerouslySetInnerHTML is safe here because omit_script=1
  // ensures no third-party scripts are included
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

// Server action or API route
export async function getUrlMetadata(url: string) {
  const apiKey = process.env.IFRAMELY_API_KEY!;
  const res = await fetch(
    `https://iframe.ly/api/iframely?url=${encodeURIComponent(url)}&api_key=${apiKey}&omit_script=1`,
    { next: { revalidate: 3600 } } // Cache 1 hour
  );
  return res.json();
}

// Get just title, description, thumbnail
const data = await getUrlMetadata(url);

const meta = {
  title: data.meta?.title,
  description: data.meta?.description,
  thumbnail: data.links?.thumbnail?.[0]?.href,
  icon: data.links?.icon?.[0]?.href,
  site: data.meta?.site,
};

interface IframelyResponse {
  meta: {
    title?: string;
    description?: string;
    author?: string;
    author_url?: string;
    site?: string;
    canonical?: string;
    duration?: number;
    date?: string;
    medium?: string;
  };
  links: Record<string, IframelyLink[]>;
  html?: string;
  rel?: string[];
  id?: string;
}

interface IframelyLink {
  href: string;
  type: string;
  rel: string[];
  media?: {
    "aspect-ratio"?: number;
    width?: number;
    height?: number;
    "max-width"?: number;
    "max-height"?: number;
  };
  html?: string;
}

const thumbnail = data.links?.thumbnail?.[0]?.href
  ?? data.links?.image?.[0]?.href;

const hasEmbed = !!data.html || data.links?.player?.length > 0 || data.links?.app?.length > 0;