Web Sitesine Gömme ve Güvenlik
Etkileşimli haritaları Webflow, WordPress, Shopify, Next.js veya özel sitelere yerleştirin. İzin Verilen Kaynaklar beyaz listesiyle görsel varlıklarınızı koruyun.
Kurulum Yöntemleri: Komut Dosyası ve iframe karşılaştırması
Layerpin, etkileşimli haritanızı herhangi bir web sitesinde, CMS'de veya web uygulamasında yayınlamanız için size iki kurulum yöntemi sunar. Her iki yöntem de akıcı yanıt vermeyi, çoklu dokunuşla yakınlaştırmayı ve dinamik kapsayıcı yeniden boyutlandırmayı destekler:
Kendi kendini başlatan tek bir komut dosyası etiketi. Konteyner genişliğini otomatik olarak ölçer, dinamik görüntü alanı yüksekliğini yönetir ve özel CSS gerektirmeden kümülatif düzen değişikliklerini önler.
<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>Standart korumalı alan iframe snippet'i. Katı CMS ortamları, üçüncü taraf sanal alanlar ve harici JavaScript etiketlerini kısıtlayan platformlar için idealdir.
<iframe
src="https://layerpin.com/embed/emb_YOUR_MAP_ID"
title={t("Interactive map")}
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
allow="fullscreen"
allowfullscreen
style="display:block;width:100%;height:640px;min-height:320px;border:0;"
></iframe>Doğrudan URL Koruması
Yerleştirilen URL'yi doğrudan tarayıcı adres çubuğunda ziyaret etmek tasarım gereği engellenmiştir. Layerpin, haritayı yetkili bir yerleştirme kapsayıcısı içinde güvenli bir şekilde oluşturmak için doğrulanmış bir ana kaynak gerektirir.
Yükseklik Ön Ayarları ve Duyarlı Düzen
Gömme genişliği her zaman içerdiği bloğun %100'ünü dolduracak şekilde genişler. Önceden tanımlanmış dört yükseklik ön ayarı arasından seçim yapabilir veya özel boyutlar belirleyebilirsiniz:
Kenar çubuğu sütunları, ürün ayrıntısı widget'ları ve kompakt blog ekleri için uygundur.
Tam genişlikte açılış sayfaları, kılavuzlar ve dizin listeleri için dengeli varsayılan.
Çok katlı mimari planlar, kampüs turları ve yüksek yoğunluklu şemalar için tasarlanmıştır.
Mobil ve masaüstü bilgisayarlarda tarayıcı görünüm portunun tamamını doldurur; özel harita gezgini uygulamaları için idealdir.
Yükleme Modları ve Görüntüleyici Kontrolleri
Gömülü haritanın nasıl yükleneceğini ve ziyaretçilere hangi kontrollerin sunulacağını yapılandırın:
Tembel (Varsayılan): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. İstekli: Kahraman bölümleri için ilk HTML ayrıştırmasında hemen yüklenir.
Görüntüleyicinin içinde tam ekran genişletme düğmesini etkinleştirir. Ziyaretçiler, web sitenizden ayrılmadan ayrıntılı inceleme için haritayı monitörlerinin tamamına genişletebilir.
Yerleşik görüntüleyicinin içindeki platform ilişkilendirme rozetini açın/kapatın. Ücretli planlar kusursuz, tamamen beyaz etiketli bir görsel sunum için markalamayı gizleyebilir.
Bir dil sorgu parametresi iletin (ör. ?lang=ja) iframe'de kaynak to pre-select the locale on regional pages. Learn more in the Çoklu Dil Kılavuzu.
İzin Verilen Kaynaklar ve Alan Adı Beyaz Listesine Ekleme
Etki alanı beyaz listesi, etkileşimli haritalarınızın yalnızca onayladığınız web sitelerine yerleştirilebilmesini sağlar. Haritanızı iframe etmeye çalışan yetkisiz alan adları, erişim reddedildi bildirimi alacaktır.
Menşe Güvenlik Kuralları
- HTTPS Protokolü Gerekli: Embed origins require secure connections. Enter domains with or without protocol (e.g.,
https://mycompany.comorşirketim.com). - Yol, Sorgu veya Karma Yok: Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - Joker Karakter Alt Alan Adı Eşleştirmesi (Premium): Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - Sıkı Yönlendirme Politikası: Iframes must include
referrerpolicy = "strict-origin-when-cross-origin"so the browser sends the parent origin header to our authorization validator.
Katıştırmayı Etkinleştirmenin Önkoşulları
Harita olmalı yayınlandı ve web sitesi yerleştirmenin açılabilmesi için en az bir geçerli kaynağın listelenmiş olması gerekir.
Deneme haritaları özel taslaklardır ve etkin bir harita planı seçilene kadar herkese açık olarak yerleştirilemezler.
Yerleştirme Kimliğinin İptali ve Rotasyonu
Bir yerleştirme kodu kazara genel kod deposuna sızdırılırsa veya harici bir kurum aktarımı tamamlanırsa jetonu anında döndürebilirsiniz:
Yerleştirme Yapılandırması sayfasının sağ tarafındaki canlı durum çubuğunda, Kimliği yeniden oluştur. Layerpin instantly creates a brand new unique embed token (e.g., em_...).
Çoklu Cihaz Canlı Önizleme
Kodu üretim web sitenizde yayınlamadan önce canlı yerleşik deneyimi doğrudan Layerpin kontrol panelinizde test edin:
Standart masaüstü monitörleri ve geniş ekran görünüm pencerelerini simüle eder.
Duyarlı kullanıcı arayüzü çekmeceleriyle iPad ve tablet düzenlerini test eder.
Telefonlarda dokunmatik gezinmeyi, açılan sayfaları ve parmakları kıstırarak yakınlaştırmayı doğrular.
Ücretsiz Kontrol Paneli Önizlemeleri
Kontrol panelinin Önizleme sekmesinde oluşturulan harita gösterimleri, aylık harita görüntüleme kotanıza dahil edilmez. Düzen değişikliklerini inceleyebilir ve kategori filtrelerini özgürce test edebilirsiniz.
Web Sitesi Oluşturucuları ve CMS Kılavuzları
Layerpin etkileşimli haritaları, tüm büyük web sitesi oluşturucularıyla yerel olarak çalışır. Özel kurulum önerileri için aşağıdan platformunuzu seçin:
Embed responsive interactive maps into WordPress using Gutenberg Custom HTML blocks, Classic Editor, Elementor, or Divi HTML widgets.
Embed interactive maps in Webflow Designer using the Custom Code Embed element with full support for fluid responsive containers.
Embed full-width or fixed-dimension interactive maps in Wix Studio and Wix Editor using the HTML Embed element.
Install responsive interactive maps into Squarespace 7.1 and Fluid Engine sections using Code blocks.
Add interactive maps directly into Framer canvases using the native Embed component with fluid responsiveness.
Insert responsive interactive maps into Ghost CMS publications, member pages, and posts using HTML cards.
Ayrıntılı Eğitim
Webflow, WordPress, Wix, Squarespace veya Framer için adım adım ekran görüntülerine mi ihtiyacınız var?
Menşe Sınırları ve Plan Kapasitesi
İzin verilen kaynak kapasitesi ve joker karakter desteği, etkin abonelik planınıza göre belirlenir:
| Planı | İzin Verilen Kaynaklar | Joker Karakterli Alan Adları (*.) | Dahil Edilen Aylık Görünümler | Yayınlanan Haritalar |
|---|---|---|---|---|
| Trial | Private only | Desteklenmiyor | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | Desteklenmiyor | 5,000 views | 3 maps |
| Pro | 25 origins | Desteklenmiyor | 25,000 views | 15 maps |
| Premium | 50 origins | Destekleniyor | 100,000 views | 50 maps |