Dijital Yayınınızı Kendi Web Sitenize Gömme

Dijital bir yayını yayımlamak iki karardır, tek değil: nasıl okunduğu ve nerede barındığı. Araçların çoğu ilk kararı zarifçe verir, ikincisini sizin yerinize sessizce alır — kataloğunuz sizin olmayan bir sayfada, sizin olmayan bir markanın altında, fatura kesemeyeceğiniz bir kitlenin içinde durur.

Bu rehber ikinci kararı anlatıyor: okuyucuyu kendi sitenizin içine koymayı ve temiz bir gömme ile mobilde kırılan, CMS'iniz tarafından engellenen ya da salı günü biri alan adını değiştirdiği için 404 dönen bir gömmeyi ayıran o birkaç detayı.

Neden bağlantı paylaşmak yerine gömmeli

Barındırma platformunun bağlantısını paylaşmak gerçekten daha kolay. Hiçbir maliyeti yok, on saniye sürüyor. Gömme ise yaklaşık on dakika sürer ve karşılığında şunları geri kazandırır:

• Ziyareti. Trafik sizin URL'inizde kalır; gezinti menünüzün, talep formunuzun ve satın alma butonlarınızın olduğu yerde. Bir bağlantı okuyucuyu sizin olmadığınız bir yere gönderir.
• Bağlamı. Bir gömme, ait olduğu ürün açıklamasının tam altına, iki yazının arasına ya da bir müşterinin proje sayfasına oturabilir.
• Sunumu. Genişlik, yükseklik, etrafındaki düzen, ilk ekranda mı yoksa ilk ekranın altında mı olduğu.

Arama tarafı için dürüst bir not: iframe içindeki içerik, sayfanızın içeriği olarak güvenilir biçimde kabul edilmez. Arama motorlarının sayfada gerçek içerik görmesini istiyorsanız, sayfanın kendisine gerçek bir paragraf ve yayın içindekiler listesi yazın; deneyimi gömülü okuyucuya bırakın. Boş bir sayfaya yayın gömüp sıralama beklemeyin.

Adım 1: O yayın için gömmeyi açın

Gömme genellikle hesap genelinde bir ayar değil, yayın bazında bir ayardır ve varsayılan olarak kapalı olmalıdır — sitenizde neyin görünebileceğine toptan değil, yayın yayın siz karar vermelisiniz.

Flipable'da bu, kataloğun detay sayfasındaki Embed enabled (Gömme açık) anahtarıdır. Kapalıyken o katalogun gömme URL'i her yerde 404 döner; tam da bir yayın henüz duyurulmamışken ya da yayından çekildiğinde isteyeceğiniz davranış budur.

Yayının dönüşümünü de tamamlamış olması gerekir. Hâlâ işlenen ya da başarısız olan bir katalog görüntülenmez — okuyucu yerine bir yer tutucu mesajı görürsünüz.

Adım 2: Barındıracağı alan adını listeye ekleyin

Kod çalışmadan önce alan adının kayıtlı olması gerekir. Flipable, Ayarlar → Domains & Embed → İzinli Alan Adları altında çalışma alanı bazında bir beyaz liste tutar; liste dışı bir alan adından gelen iframe reddedilir.

Bu eşleşmenin iki kuralını bilmek işe yarar:

• Bir alan adı kendi tüm alt alanlarını kapsar. example.com eklemek www.example.com, shop.example.com ve staging.example.com adreslerine de izin verir. Çoğu site için bu, tek bir kaydın yeterli olduğu anlamına gelir.
• Eşleşme tam URL'e değil, kök alan adına göre yapılır. blog.example.com ile example.com aynı kayıttır; example.net ayrı bir kayıttır. Dolayısıyla başka bir kök alan adındaki kampanya mikrositesi ayrı bir kayıt gerektirir.

Alan adı kotası plana göre sınırlıdır: Free, Starter ve Pro'da bir, Growth'ta iki, Business'ta üç. Üç veya daha fazla ilintisiz kök alan adında yayımlayacaksanız, bunu müşteri sözleşmesi imzalamadan önce planlayın — sonra değil.

Adım 3: Gömme kodunu kopyalayıp HTML olarak yapıştırın

Her kataloğun detay sayfası, gömme açıldığında ve bir token üretildiğinde hazır bir kod parçacığı verir:

<iframe src="https://flipable.co/embed/{TOKEN}/{KATALOG_ID}"
        width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Bunu zengin metin alanına değil, ham HTML kabul eden bir yere yapıştırın:

• WordPress: Özel HTML bloğu
• Webflow: Embed öğesi
• Shopify: Custom Liquid bölümü
• Squarespace: Code bloğu
• Elle yazılmış site: gövdede herhangi bir yer

CMS'inizde hem "görsel" hem "HTML" düzenleme modu varsa, HTML modunu kullanın. Zengin metin editörleri, gömmelerin sessizce ölmesinin bir numaralı sebebidir: düz tırnakları tipografik tırnaklara çevirmekte sakınca görmezler, tarayıcı da ardından bozuk kod okur.

Adım 4: Bunu telefonda biri açmadan önce yüksekliği düzeltin

Atlanan adım bu, ve okuyucunun fark ettiği adım da bu.

Gömülen sayfa, ona verdiğiniz yüksekliği doldurur. height="600" olan bir iframe, okuyucunun 600 piksellik bir pencereye sıkışması demek — masaüstünde rahat, ama telefonda bu, zaten kaydırılan sayfanızın içinde ikinci bir kaydırma kutusu demek. Dokunmatik ekranda birbiriyle yarışan iki kaydırma alanı gerçekten kötü bir deneyimdir; insanlar suçu kapsayıcıya değil yayına atar.

Daha sağlam bir varsayılan:

<iframe src="https://flipable.co/embed/{TOKEN}/{KATALOG_ID}"
        title="Sonbahar/Kış kataloğu"
        style="width:100%;height:clamp(500px,75vh,900px);border:0"
        allowfullscreen></iframe>

• clamp() telefonda kullanılabilir bir pencere verir, masaüstünde büyümeye izin verir, tabletleri ince bir şeride sıkıştırmaz.
• frameborder artık geçersiz; bu işi bugün border:0 yapıyor.
• Açık bir title verin. Bu, çerçevenin erişilebilir adıdır ve hiçbir maliyeti yok.
• Tam genişlikte bir açılış sayfası için height:100vh çalışır — ama sabit bir başlığa pay bırakın ya da mobil tarayıcı arayüzü okuyucunun altını yutmasın diye 100dvh kullanın.

Sonra bunu gerçek bir telefonda, hem dikey hem yatay konumda görün — önemli birine göndermeden önce.

Adım 5: Sayfada nerede yükleneceğine karar verin

Yayın sayfanın amacıysa, ilk ekrana koyun ve tembel (lazy) yüklemeyin. Sayfayı destekliyorsa — uzun bir ürün açıklamasının içindeki teknik özellik tablosu gibi — loading="lazy" ekleyin ki o noktaya kadar kaydırmayan ziyaretçi gereksiz bayt indirmesin.

Bilinmesi gereken bir sonuç: görüntülenmeler okuyucu gerçekten yüklendiğinde sayılır. İlk ekranın altındaki tembel bir gömme, sayfanın kendisinden daha düşük görüntülenme sayısı gösterir; çünkü ziyaretçilerin bir kısmı oraya hiç ulaşmaz. Bu, sayımdaki bir hata değil, davranışın tarifidir. Bir gömmenin performansını, içinde yaşadığı sayfanın kaydırma derinliğine göre yargılayın.

Bir yayını gerçekten koruyan şey

Üç mekanizma var ve her birinin nereye kadar koruduğunu bilmek gerekir:

• Tahmin edilemez bir URL. Gömme yolu, çalışma alanı düzeyinde bir token taşır. Kimse bir katalogun gömme adresini tahmin edemez, yani URL fiilen bir sırdır — öyle davranın ve açık forumlara yapıştırmayın.
• Alan adı beyaz listesi ve frame-ancestors. Yayını yalnızca listelenen alan adları çerçeveleyebilir; bu, izinli alan adı listenizden üretilen bir Content-Security-Policy ile tarayıcıya bildirilir; dolayısıyla yetkisiz gömme "garip görünmek"le kalmaz, başarısız olur.
• Katalog bazlı bir kapatma anahtarı. Gömmeyi kapattığınızda, o yayın, nerede olursa olsun her yerdeki tüm gömmeleri anında geçersiz kılar. Acil durdurma düğmeniz budur.

Şimdi sınırı açıkça söyleyelim: bir beyaz liste, ödeme duvarı değildir. Bir gömme URL'ini iframe içinde değil de tarayıcı sekmesinde doğrudan açmak serbesttir — alan adı kontrolü içeriğinizin kimlerin çerçeveleyebileceği ile ilgilidir, kimlerin okuyabileceği ile ilgili değildir. Bir yayın gerçekten bir aboneliğin arkasındaysa, gömmeyi barındıran sayfayı kendi kimlik doğrulamanızla koruyun. Aracın işi "burayı kim çerçeveleyebilir"de biter; "burayı kim okuyabilir" sizin sitenizin işidir.

Çalışmıyorsa, bu sırayla bakın

1. O katalog için gömme kapalı. Belirtisi çerçevede 404. Açık ara en sık sebep.
2. Barındıran alan adı listede değil. Gömmeyi yapan sayfanın adres çubuğundaki kök alan adını harfiyen kontrol edin.
3. Yanlış katalog ID'si ya da başka bir çalışma alanından kopyalanmış token. İkisi de uzun ve anlaşılmaz dizilerdir; birinin ortasından kopyalamak kolaydır.
4. Dönüşüm hâlâ sürüyor ya da başarısız. Belirtisi yer tutucu mesajı ya da katalog sayfasındaki hata bandıdır.
5. Kendi siteniz çerçevelemeyi engelliyor. Content-Security-Policy'nizdeki kısıtlayıcı bir frame-src ya da sizin yerinize aynısını yapan bir güvenlik eklentisi, üçüncü taraf iframe'leri — sizinki dahil — bloklar.
6. HTTPS uyumsuzluğu. HTTPS bir okuyucuyu HTTP bir sayfaya gömmek serbesttir; tersinde tarayıcılar şikâyete başlar. Sertifikayı düzeltin.
7. CMS işaretmeyi bozmuş. Yayındaki sayfada kaynağı görüntüleyin ve niteliklerin hâlâ doğru tırnaklandığından emin olun.

Yayın öncesi kontrol listesi

• O yayın için gömme açık
• Kök alan adı beyaz listeye alınmış (alt alanlar bedavaya gelir)
• Kod zengin metin alanına değil, HTML bloğuna yapıştırılmış
• Çerçeveye title niteliği verilmiş
• Yükseklik telefonda dikey ve yatay test edilmiş
• İlk ekranın altındaki gömmeler loading="lazy" yapılmış
• İndekslenmesi gerekiyorsa sayfada gerçek metin var
• Analizler çeyrek değil ertesi gün kontrol edilmiş

Tek bir yayında deneyin

Bir gömmenin sitenize uygun olup olmadığını anlamanın en hızlı yolu, mevcut bir PDF'i süreçten geçirmektir — tek katalog, tek alan adı, tek gömme sayfası, telefonda kontrol edilmiş. Free plan bilinçli olarak cömert kurgulanmıştır: bir yayın, katalog başına 100 sayfa, bir gömme alan adı ve okuyucunun üzerinde küçük bir "Powered by Flipable" rozeti. Rozet, sitenizde yayını gören herkes için bizim reklamımızdır; planın cömertliğinin sebebi de budur. Müşteri işlerinizde o rozet sorun olacaksa, ücretli planların kaldırdığı şey tam olarak o.