360 graden foto op je website zetten, en een hele tour

Zo zet je een 360 graden foto op je website: maak er een tour van één ruimte van, kopieer de code, plak die in een HTML-blok op de woningpagina en test op je telefoon voor je publiceert. Een hele virtuele tour van de woning gaat precies zo, in hetzelfde kader. Hieronder vind je de stappen voor WordPress, Wix en Squarespace, een code om te kopiëren en een checklist voor je telefoon.

Eén 360 graden foto of een hele tour

Een 360 graden foto is een plat bestand van twee keer zo breed als hoog. Zet je hem als gewone afbeelding op je site, dan ziet de bezoeker een uitgerekt panorama met kromme muren. Om rond te kijken heeft de foto een viewer nodig, en de makkelijkste viewer om op een website te zetten is een tour.

• Eén foto: een tour met één ruimte. Handig voor de tuin op het zuiden, het uitzicht vanaf het dakterras of de woonkamer van een tussenwoning in Amersfoort.
• De hele woning: een tour met alle ruimtes, waarin de bezoeker van kamer naar kamer loopt. Op je website zit hij in hetzelfde kader, met dezelfde code.

Wat je verder nodig hebt:

• De embedcode, niet alleen de link. De code is een regel die begint met <iframe. Een link opent de tour op een eigen pagina; de code laat hem midden op jouw woningpagina zien.
• Een openbare tour. Staat hij op privé, dan ziet de bezoeker in het kader alleen een melding.
• Rechten om de pagina te bewerken. Bij WordPress moet je account code mogen toevoegen (WordPress-documentatie). Beheert een bureau je site, stuur ze dan de code per mail.

Heb je de foto nog niet? Lees hoe je een 360 graden foto maakt met je iPhone. Of een bestand echt een 360 is, zie je vooraf in de gratis 360-viewer in je browser. Meer over tours in het algemeen staat in de gids over de virtuele tour van een woning.

Stap 1: kopieer de code

De meeste tourprogramma's zetten de code onder Delen, Insluiten of Publiceren. Zoek naar het woord "code" of "embed".

In Vistura open je de tour, klik je op Delen en vind je in het venster "Tour delen" het onderdeel "Insluiten op een website" met de knop "Code kopiëren", in elk abonnement, ook in Gratis. De code vult de breedte van de pagina en draagt de naam van de tour als titel. Een tour van één 360 foto plaats je op dezelfde manier. De code wijst naar de tour zelf: vervang je later de foto of voeg je een kamer toe, dan zien bezoekers de nieuwe versie zonder dat iemand de code hoeft te vervangen.

Stap 2: plak de code in je websitebouwer

WordPress (eigen installatie)

1. Open de woningpagina in de editor en typ /html in een nieuwe alinea. Kies het HTML-blok, in het Engels "Custom HTML".
2. Plak de code in het blok.
3. Sla de pagina op.

Waar het misgaat: heeft je account het recht unfiltered_html niet, bijvoorbeeld als Contributor, dan haalt WordPress bij het opslaan tags als <iframe> weg (WordPress-documentatie). Het blok lijkt dan leeg. Vraag een beheerder om de code te plakken.

WordPress.com

Op WordPress.com mogen alleen sites met een abonnement dat plugins toestaat en met geactiveerde hostingfuncties een iframe gebruiken. Daarvoor gelden dezelfde grenzen als voor gratis sites (WordPress.com Support). Kijk dus eerst naar je abonnement voordat je een fout in de code zoekt.

Wix

1. Klik in de editor op Elementen toevoegen > Code embedden > Populaire insluitingen (Wix Helpcentrum) en kies de HTML-optie.
2. Kies de optie voor code, plak de code en pas hem toe.
3. Sleep het element naar de maat die je wilt.

Waar het misgaat: "Alleen HTTPS-codes en URL's worden weergegeven", schrijft Wix. Daarnaast is het HTML-element van Wix zelf een iframe en past het zich niet vanzelf aan. Zet breedte en hoogte in de code op 100% en bepaal de maat met het element in de editor (Wix, Engelse versie). Check ook de mobiele weergave in de Wix-editor.

Squarespace

1. Klik op de pagina op Blok toevoegen en kies Code.
2. Plak de code. Laat de optie om de broncode te tonen uit, anders verschijnt de code als tekst.

Waar het misgaat: "To add JavaScript or an iframe to a code block, your site needs to be on the Core, Plus, or Advanced plan" (Squarespace Help, in het Engels). Zolang je ingelogd bent, laat Squarespace geplakte code soms niet zien; de helppagina raadt dan de voorvertoning in "Safe Mode" aan. Squarespace waarschuwt ook dat eigen code de weergave kan verstoren, "especially on mobile devices".

Een site uit je makelaarssoftware

Veel makelaarskantoren beheren hun website via hun makelaarssoftware. Zoek op de woningpagina naar een blok of veld met de naam HTML, Code, Insluiten of Widget. Vind je niets, vraag je leverancier dan waar een iframe hoort.

Stap 3: laat het kader op elk scherm passen

Een embedcode ziet er ingewikkeld uit, maar heeft maar een paar onderdelen:

Zet er loading="lazy" bij als de 360 foto onder de gewone foto's staat. De browser laadt hem dan pas als de bezoeker in de buurt scrolt (MDN). Dat bespaart data, maakt de rest van de pagina sneller en gebruikt minder geheugen, en alle grote browsers ondersteunen het (web.dev).

Een vorm die op elk scherm klopt. Een vaste hoogte van 500 pixels is op een laptop plat en op een telefoon bijna het hele scherm. Beter is een vaste verhouding:

<iframe src="https://ADRES-VAN-JE-TOUR" title="Tuin op het zuiden, tussenwoning Amersfoort, 360 foto"
  width="100%" loading="lazy" allow="fullscreen"
  style="border:0; aspect-ratio:4/3; max-height:80vh"></iframe>

Neem het adres over uit de src van je eigen code. Staat er een vaste hoogte in zoals height="500px", haal die dan weg: aspect-ratio houdt de verhouding tussen breedte en hoogte alleen vast als een van de twee automatisch is. De eigenschap werkt sinds september 2021 in alle gangbare browsers (MDN). Bekijk het resultaat toch even op je telefoon.

Ons advies: 4/3 of hoger past op een telefoon beter dan een brede 16/9-strook. En max-height:80vh houdt het kader korter dan het scherm, zodat er altijd pagina overblijft om langs te scrollen.

Waar de 360 foto op de woningpagina hoort

1. Bovenaan, na de fotogalerij en voor de lange omschrijving. Wie de foto's mooi vindt, wil daarna naar binnen kijken.
2. Tekst, prijs en kenmerken blijven op de pagina zelf. De tour in het kader staat op een ander adres. Woonoppervlakte, kamers, energielabel en omschrijving horen als gewone tekst op je woningpagina.
3. Onder het kader een gewone link, bijvoorbeeld "Open de 360 foto op volledig scherm", naar het eigen adres van de tour. Op een telefoon zien kopers hem zo over het hele scherm.
4. Eén tour per pagina. Meerdere zware kaders op één pagina laden traag. Wil je meer ruimtes laten zien, maak dan één tour met alle kamers in plaats van losse 360 foto's onder elkaar.

Stap 4: test op je telefoon voor je publiceert

Loop deze lijst na op je eigen telefoon, niet alleen op het scherm op kantoor:

• Met één duim langs de foto scrollen. Draait elke veeg de kamer in plaats van de pagina te bewegen, maak het kader dan lager.
• In het kader slepen. De kamer moet meedraaien.
• Op de link onder het kader tikken. De tour moet op zijn eigen pagina openen.
• Uitgelogd kijken, of in een privévenster. Squarespace verbergt code soms voor ingelogde beheerders (Squarespace Help).
• Laden via mobiele data, niet alleen via de wifi op kantoor.
• Is het kader leeg, check dan op volgorde: HTTPS (Wix), abonnement (WordPress.com, Squarespace), rechten van je account (WordPress) en of de tour openbaar is.

Website, Funda en mail zijn drie verschillende klussen

• Je eigen website: de embedcode, zoals hierboven.
• Funda en andere portalen: elk portaal heeft eigen regels. Hoe Funda 360 foto's en tours aanneemt, check je bij Funda of bij de leverancier van je makelaarssoftware.
• Mail en berichten: stuur een afbeelding met een link naar de tour, niet de code. Voor het te-koopbord en de etalage is er de QR-code op het te-koopbord.

Voor portalen maakt Vistura onder "Link voor portalen" een eigen link per portaal, als je wilt met de optie "Zonder mijn contactgegevens en logo". Zo staan de bezoeken van elk portaal apart, onder Statistieken > Per portaal (die weergave hoort bij Pro).

Zie of bezoekers de 360 foto op je site gebruiken

Een ingesloten tour moet aanvragen opleveren, niet alleen mooi staan. Bij Vistura houdt hij in het kader de makelaarskaart, WhatsApp en het formulier, en elke lead komt in elk abonnement volledig bij jou binnen. Bezoeken vanaf je website tellen als eigen bron, "Je website (ingesloten)", los van portalen, QR-code en WhatsApp. De uitsplitsing naar bronnen, kamers, tijd en apparaten zie je met Pro, bewaard vanaf dag één. Met Pro draagt de tour je logo en kleuren zonder badge "Gemaakt met Vistura", en nadat je automatisch draaien hebt aangezet, draait de kamer vanzelf rond als niemand hem aanraakt, handig voor een pagina die open staat op een scherm in de etalage. De oprichtersprijs voor Pro is 24 Amerikaanse dollar per maand, of 19 Amerikaanse dollar per maand bij jaarlijkse betaling, voor abonnementen die starten tot en met 31 december 2026. Je kunt het proberen met Gratis, met 3 tours tegelijk online en het merk Vistura. Alle abonnementen staan op Prijzen.

Als de foto niet verschijnt

Tot slot

Een 360 graden foto op je website zetten kost een paar minuten: maak er een tour van één ruimte van, kopieer de code, plak hem in het juiste blok, leg de vorm vast met aspect-ratio en test op je telefoon. De meeste problemen komen van de websitebouwer, niet van de code: een abonnement zonder iframes, een account zonder rechten of een voorvertoning terwijl je ingelogd bent. Werkt de ene foto, dan zet je de hele woning op dezelfde manier op je site.

Veelgestelde vragen

Kan ik één 360 graden foto op mijn website zetten zonder tour?

Ja, maar je hebt wel iets nodig dat de foto laat ronddraaien, want een gewone afbeelding toont alleen een uitgerekt plaatje. Een tour met één ruimte doet precies dat, en je plaatst hem met dezelfde code als een hele woning.

Wordt mijn woningpagina er trager van?

Nauwelijks, als je loading="lazy" in de code zet. De browser laadt de 360 foto dan pas als de bezoeker in de buurt scrolt, zodat de foto's en tekst bovenaan net zo snel verschijnen als eerst.

Kan ik de code op Funda plaatsen?

Elk portaal heeft eigen regels voor 360 foto's en tours. Hoe Funda 360 foto's en tours aanneemt, check je bij Funda of bij de leverancier van je makelaarssoftware voordat je de woning online zet.

Moet ik de code vervangen als ik de foto verander?

Nee, zolang de code naar de tour wijst en niet naar een kopie. Bij Vistura staan je wijzigingen meteen op je website, met dezelfde code.