Een post van social.codefor.nl embedden

Stappen

1. 1

   Open de post in de browser

   Ga naar de post op social.codefor.nl, niet in een Mastodon-app — de embed-optie zit alleen in de webversie.

2. 2

   Klik op "···" → Embed

   Onder de post staat een menu met drie puntjes. Kies daar Embed (of "Insluiten").

3. 3

   Kopieer de getoonde code

   Mastodon genereert een <blockquote> met een link-fallback, plus een <script>-tag dat 'm omtovert tot een volledige kaart. Kopieer beide.

4. 4

   Plak het in je pagina

   Zet de code op de plek waar de post moet verschijnen. Het script tekent de kaart en past de hoogte automatisch aan.

Resultaat — echt voorbeeld

Dit is de daadwerkelijke code die social.codefor.nl aflevert voor deze post:

<blockquote class="mastodon-embed"
    data-embed-url="https://social.codefor.nl/@johan/116376325793048091/embed"
    style="background: #FCF8FF; border-radius: 8px; …">
  <a href="https://social.codefor.nl/@johan/116376325793048091"
     target="_blank" style="…">
    <svg …><path d="M63 45.3…" fill="currentColor"/></svg>
    <div style="color: #787588; …">Post by @johan@codefor.nl</div>
    <div style="font-weight: 500;">View on Mastodon</div>
  </a>
</blockquote>
<script data-allowed-prefixes="https://social.codefor.nl/"
        async src="https://social.codefor.nl/embed.js"></script>

De style- en SVG-attributen zijn hier ingekort voor de leesbaarheid — kopieer altijd de volledige, automatisch gegenereerde code van de post zelf. De <blockquote> is de fallback die zichtbaar blijft zolang JavaScript nog niet geladen is; het script vervangt 'm door de volledige, interactieve kaart.

Live preview

Dit is de <blockquote>-fallback zoals hierboven. Op je eigen website laadt embed.js gewoon en verschijnt de volledige, interactieve kaart met tekst, media en interactieknoppen — deze artifact-pagina blokkeert scripts van externe domeinen, dus hier blijft het bij de fallback-link.

Automatisch via oEmbed

Bouw je een CMS of tool waarin redacteuren zelf een link plakken? Vraag dan de embed-HTML programmatisch op bij het oEmbed-endpoint van de instantie:

GET https://social.codefor.nl/api/oembed?url={post-url}