Rehber

Sanal turu web sitesine gömme: iframe kodu ve adım adım kurulum

Hazırlayan: 360SanalTurum·Güncelleme: 26 Ekim 2026·Okuma: 7 dk

Bu rehber, çektiğimiz turları müşteri sitelerine yerleştirirken edindiğimiz deneyime dayanıyor. Hazır kod örneklerini, farklı site altyapılarındaki adımları, telefonda düzgün görünüm için gereken ayarları ve en sık karşılaştığımız hataları tek yerde topladık. Turunuz henüz yoksa önce 360 sanal turun ne olduğuna göz atabilirsiniz.

Sanal tur gömme kodu nedir, nasıl çalışır?

Gömme kodu, turun adresini sayfanızın içinde açan tek satırlık bir iframe etiketidir. Tur sizin sunucunuza kopyalanmaz; yalnızca sayfanızda görüntülenir.

Sanal tur, panoramaları, geçiş oklarını, bilgi noktalarını ve sesleri bir arada çalıştıran küçük bir web uygulamasıdır. Bu uygulama turun barındırıldığı platformda yaşar. Bizim çektiğimiz turlar kurucusu olduğumuz Tourision platformunda yayınlanır; isterseniz süresiz barındırma seçeneği eklenebilir. Sitenize koyduğunuz iframe, tarayıcıya "bu alana şu adresteki turu aç" der.

Bu yapının iki pratik sonucu var. Birincisi, turun ağır panorama dosyaları sizin barındırma paketinizden trafik harcamaz. İkincisi, turda bir güncelleme yapıldığında (yeni sahne, düzeltilmiş bilgi noktası) sitenize dokunmadan her yerde yenilenir.

Sanal tur iframe kodu nasıl yazılır?

En sade hâliyle bir iframe etiketi, tur adresi, genişlik, yükseklik ve tam ekran ile hareket sensörü izinlerinden oluşur. Teslimde bu kod hazır verilir.

Aşağıdaki örnekte mekan-adi yerine kendi turunuzun adresi gelir:

<iframe
  src="https://app.tourision.com/tour/mekan-adi"
  title="Mekân adı 360° sanal tur"
  width="100%" height="560"
  allow="fullscreen; gyroscope; accelerometer; xr-spatial-tracking"
  allowfullscreen
  loading="lazy"
  style="border:0">
</iframe>

Koddaki her parçanın görevi:

• src: Turun adresi. Bu adres değişmediği sürece kod yıllarca çalışır.
• title: Ekran okuyucu kullanan ziyaretçiye bu alanın ne olduğunu söyler. Boş bırakmayın.
• allow ve allowfullscreen: Tam ekran düğmesinin ve telefonda cihazı çevirerek bakmanın (jiroskop) çalışması için gereken izinler. Bunlar eksikse tur açılır ama tam ekran ve hareketle gezinme devre dışı kalır.
• loading="lazy": Ziyaretçi o bölüme kaydırana kadar turun yüklenmesini erteler.
• style="border:0": Bazı temalarda iframe'in etrafında çıkan çerçeveyi kaldırır.

Gömülü tur telefonda nasıl düzgün görünür?

Sabit piksel yüksekliği yerine en-boy oranı kullanın. Genişlik yüzde 100, oran masaüstünde 16:9, telefonda 4:5 ya da 1:1 olduğunda tur taşmadan görünür.

Sabit 560 piksellik bir yükseklik masaüstünde iyi durur, ama dar bir telefon ekranında tur uzun ve dar bir şeride dönüşür. Oranı CSS ile tanımlamak bu sorunu çözer:

<div class="tur-kutu">
  <iframe src="https://app.tourision.com/tour/mekan-adi"
    title="Mekân adı 360° sanal tur"
    allow="fullscreen; gyroscope; accelerometer; xr-spatial-tracking"
    allowfullscreen loading="lazy"></iframe>
</div>

<style>
  .tur-kutu { aspect-ratio: 16 / 9; width: 100%; }
  .tur-kutu iframe { width: 100%; height: 100%; border: 0; }
  @media (max-width: 640px) {
    .tur-kutu { aspect-ratio: 4 / 5; }
  }
</style>

Telefonda dikeye yakın bir oran tercih etmemizin nedeni şu: ziyaretçi telefonu dik tutar ve turda daha çok yukarı-aşağı bakar. Yatay 16:9 bir kutu telefonda ekranın yalnızca üçte birini kaplar, tur küçük kalır.

Bir uyarı daha: sayfa kaydırma ile tur içinde gezinme aynı parmak hareketini kullanır. Tur ekranın tamamını kaplıyorsa ziyaretçi sayfayı aşağı kaydıramaz hâle gelebilir. Telefonda turun üstünde ve altında kaydırma için boşluk bırakın ya da bir sonraki bölümde anlattığımız tıklayınca açılan yöntemi kullanın.

Sanal tur sayfa hızını düşürür mü?

Doğrudan yerleştirilen iframe, sayfa açılırken turu da yüklemeye başladığı için hızı düşürebilir. Turun yerine kapak görseli koyup iframe'i tıklamayla oluşturmak bu etkiyi ortadan kaldırır.

Bir sanal turun ilk sahnesi bile yüksek çözünürlüklü bir panoramadır. Ana sayfanın en üstüne konan bir tur, sayfanın ilk görünümünü geciktirebilir. Bunu ölçmenin yolu, turu eklemeden önce ve sonra sayfayı PageSpeed Insights gibi bir araçla test etmektir.

Kendi sitemizin örnek turlar sayfasında kullandığımız yöntem "tıkla, yükle" yöntemidir: sayfada turun kapak görseli ve bir "Turu başlat" düğmesi durur; iframe ancak düğmeye basıldığında oluşturulur. Basit bir uygulaması:

<div class="tur-kutu" data-tur="https://app.tourision.com/tour/mekan-adi">
  <img src="/gorseller/tur-kapak.webp" alt="Mekân adı sanal tur kapak görseli"
       width="1600" height="900" loading="lazy">
  <button type="button" class="tur-baslat">Sanal turu başlat</button>
</div>

<script>
document.querySelectorAll(".tur-baslat").forEach(function (dugme) {
  dugme.addEventListener("click", function () {
    var kutu = dugme.parentElement;
    var cerceve = document.createElement("iframe");
    cerceve.src = kutu.dataset.tur;
    cerceve.title = "360° sanal tur";
    cerceve.allow = "fullscreen; gyroscope; accelerometer; xr-spatial-tracking";
    cerceve.allowFullscreen = true;
    kutu.innerHTML = "";
    kutu.appendChild(cerceve);
  });
});
</script>

Bu yöntemin ek bir faydası var: düğmeye kaç kişinin bastığını ölçebilirsiniz. Ziyaretçinin turu gerçekten açıp açmadığı, sayfayı görüp görmediğinden daha anlamlı bir veridir. Ölçüm kurulumunu sanal tur performansını ölçme rehberinde anlattık.

WordPress, Wix ve Shopify'da sanal tur nasıl eklenir?

Hemen her site altyapısında HTML kodu kabul eden bir blok ya da bileşen bulunur. Kod buraya yapıştırılır; görsel metin editörüne yapıştırılan kod çalışmaz.

Menü adları altyapıların sürümüne göre değişebiliyor; aradığınız şey her zaman "HTML", "kod" ya da "gömme" sözcüğünü taşıyan bir bileşendir. WordPress'te adım adım ekleme şöyle yapılır:

1. Turun gösterileceği sayfayı düzenleme modunda açın.
2. Turun duracağı yere yeni bir blok ekleyin ve "Özel HTML" bloğunu seçin.
3. Teslim edilen gömme kodunu bloğun içine yapıştırın.
4. Bloğun "Önizleme" sekmesine geçip turun açıldığını görün.
5. Sayfayı güncelleyin, ardından telefonda ve bilgisayarda canlı sayfayı açarak kontrol edin.

Sanal tur sitenin neresine konmalı?

Tur, ziyaretçinin mekânla ilgili karar verdiği sayfada durmalıdır: otelde oda sayfasında, emlakta ilan sayfasında, okulda kampüs sayfasında. Yalnızca ayrı bir "sanal tur" sayfasında saklı kalan tur az açılır.

Çektiğimiz turlarda en çok işe yarayan yerleşimler sektöre göre değişiyor:

• Otel: Her oda tipinin sayfasında o odanın sahnesinden açılan tur; ana sayfada lobiden açılan genel tur. Ayrıntılar için otel sanal turu sayfasına bakabilirsiniz.
• Emlak ve konut projeleri: İlan ya da daire tipi sayfasında fotoğraf galerisinin hemen yanında.
• Okul: Kampüs ve olanaklar sayfasında, kayıt formunun üstünde.
• Showroom ve mağaza: Ana sayfada koleksiyon bölümünün altında; ürün sayfalarında ürünün sergilendiği sahneden.
• Fabrika: "Tesisimiz" ya da "Üretim" sayfasında, kapasite bilgilerinin yanında.
• Her sektörde: İletişim sayfasında adres ve harita ile birlikte; ziyaretçi gelmeden önce girişi tanır.

Turun hemen üstüne ya da altına iki üç cümlelik bir açıklama yazın: turda neler var, kaç bölüm gezilebiliyor, nereden başlamak mantıklı. Bu metin hem ziyaretçiyi yönlendirir hem de arama motorlarına sayfanın ne anlattığını söyler. Konunun arama tarafını sanal turun SEO etkisi rehberinde ele aldık.

Sanal tur gömülürken en sık hangi hatalar yapılır?

En sık hata, kodun görsel editöre yapıştırılıp yazı olarak görünmesidir. Onu sabit yükseklik, eksik izinler ve turun sayfanın en üstüne konması izler.

Gömdükten sonra neler kontrol edilmeli?

Tur yayına alındıktan sonra telefon ve bilgisayarda açılış, tam ekran, hız ve yönlendirme metni ayrı ayrı denenmelidir. Kontrolü yönetici paneliyle değil, canlı sayfada yapın.

• Tur telefonda, tablette ve bilgisayarda açılıyor mu, ilk sahne doğru mu?
• Tam ekran düğmesi ve telefonda cihazı çevirerek bakma çalışıyor mu?
• Sayfa açılış hızı turu eklemeden önceki ölçümle karşılaştırıldığında kabul edilebilir mi?
• Turun altında ayrı sekmede açılan bir bağlantı var mı? Bazı ziyaretçiler turu tam sayfa gezmek ister.
• Turun yanında mekânı anlatan kısa bir metin ve bir iletişim düğmesi bulunuyor mu?
• Önbellek eklentisi kullanıyorsanız önbellek temizlendikten sonra da tur görünüyor mu?

Tur web sitesinin dışında da yaşar: aynı bağlantı Google Haritalar'da, sosyal medyada ve basılı malzemede kullanılabilir. Bu kanallar için Google Haritalar'a sanal tur ekleme ve sanal tur QR kodu rehberlerine bakabilirsiniz. Gömme işini kendiniz yapmak istemiyorsanız teslim sırasında sitenize biz yerleştiriyor, mobil kontrolleri de tamamlıyoruz; süreç ve fiyat için sanal tur fiyatları sayfasına bakabilirsiniz.

Sık sorulan sorular