15%

Tüm Hosting Hizmetlerinde %15 indirim

Becerilerini test et ve herhangi bir hosting planında İndirim kazan

Kodu kullanın:

Skills
Başlayın
23.10.2024
3 +1

WordPress Yazıları ve Sayfalarına Facebook Videoları Nasıl Gömülür

Bir Facebook videosunu WordPress yazısına veya sayfasına gömmek, URL tabanlı oEmbed el sıkışması veya iframe snippet’i kullanarak içeriğinize doğrudan canlı, oynatılabilir bir video oynatıcı eklemek anlamına gelir — dosya yüklemeye gerek yoktur. WordPress bunu, Facebook’u da içeren yerleşik oEmbed sağlayıcı listesi aracılığıyla yerel olarak yönetir; bu da editöre yapıştırılan ham bir video URL’sinin ön uçta tam işlevli bir oynatıcı oluşturması için yeterli olduğu anlamına gelir.

Bu kılavuz, mevcut her yöntemi teknik derinlikte ele almaktadır: Gutenberg blok editörü, Classic Editor, Facebook’un yerel gömme kodu ve üçüncü taraf eklentiler. Ayrıca Facebook’un 2018 ve 2023’te tanıttığı ve birçok kullanıcı için saf URL yapıştırmayı bozan kimlik doğrulama değişikliklerini de ele almaktadır — çoğu öğreticinin tamamen atladığı kritik bir ayrıntı.

Facebook Video Gömmesinin Göründüğünden Neden Daha Karmaşık Olduğu

Facebook, anonim oEmbed uç noktasını Ekim 2020’de kullanımdan kaldırdı. O tarihten itibaren graph.facebook.com/oembed_video adresine yapılan herhangi bir oEmbed isteği, geçerli bir Facebook App ID ve kayıtlı bir alan adı gerektirmektedir. WordPress çekirdeği Facebook’u hâlâ desteklenen bir oEmbed sağlayıcısı olarak listelemektedir; ancak yapılandırılmış bir App ID olmadan gömme sessizce başarısız olur ve yalnızca bir yer tutucu veya ham URL oluşturur.

Bu, WordPress geliştiricilerinin bazı yerel veya önbelleğe alınmış ortamlarda çalışıyor gibi görünmesine rağmen, üretim sitelerinde bir Facebook video URL’si yapıştırmanın “işe yaramadığını” fark etmesinin tek en yaygın nedenidir.

Bu kısıtlamayı anlamak, hangi yöntemi kullanmanız gerektiğini belirler.

Yöntem 1: Facebook Embed Bloğu ile Gutenberg Blok Editörü

Gutenberg blok editörü, Facebook varyantına sahip özel bir Embed bloğu sağlar. Bu, 5.0 veya sonraki sürümü çalıştıran çoğu WordPress kurulumu için önerilen yoldur.

Adım 1: Doğru Facebook Video URL’sini Kopyalayın

Tüm Facebook video URL’leri eşdeğer değildir. Tam ekran modunda video izlerken tarayıcınızın adres çubuğundaki URL’yi değil, kurallı paylaşım URL’sini kullanın.

  1. Tarayıcınızda Facebook videosuna gidin.
  2. Gönderinin sağ üst köşesindeki üç nokta menüsüne (...) tıklayın.
  3. Bağlantıyı kopyala‘yı seçin.

Elde edilen URL şu biçimlerden birini izlemelidir:

  • https://www.facebook.com/username/videos/1234567890/
  • https://www.facebook.com/watch/?v=1234567890
  • https://fb.watch/xxxxxxxxxx/

Standart bir video gömmek istiyorsanız /reel/ içeren URL’leri kullanmaktan kaçının — Reels farklı bir uç nokta kullanır ve standart oEmbed yolu üzerinden doğru şekilde çözümlenmeyebilir.

Adım 2: Yazınızı veya Sayfanızı Blok Editöründe Açın

WordPress kontrol panelinizde Yazılar veya Sayfalar‘a gidin ve düzenlemek istediğiniz içerik öğesini açın. İstediğiniz konuma yeni bir blok eklemek için + simgesine tıklayın.

Adım 3: Facebook Embed Bloğunu Ekleyin

Blok arama alanına Facebook yazın veya blok panelinde Gömmeler‘e gidin. Facebook bloğunu seçin. Bir URL giriş alanı görünür.

Adım 4: Video URL’sini Yapıştırın ve Gömin

Kopyalanan URL’yi giriş alanına yapıştırın ve Enter‘a basın veya Göm‘e tıklayın. WordPress, Facebook’un API’sine bir oEmbed isteği gönderir. Geçerli bir App ID yapılandırılmışsa (aşağıdaki App ID bölümüne bakın), video oynatıcı editör önizlemesinde hemen oluşturulur.

*”Üzgünüz, bu içerik gömleme yapılamadı”* mesajını görürseniz, sorun neredeyse kesinlikle eksik App ID’dir — URL biçimi değil.

Adım 5: Yayınlayın veya Güncelleyin

Yayınla veya Güncelle‘ye tıklayın. Gömülü oynatıcı artık ön uçta yayındadır.

Yöntem 2: Classic Editor (URL’yi Kendi Satırına Yapıştırma)

Classic Editor eklentisini veya 5.0 öncesi WordPress sürümlerini çalıştıran siteler için oEmbed mekanizması farklı bir kod yolu üzerinden çalışır, ancak aynı temel API’ye dayanır.

Adımlar

  1. Yukarıda açıklanan aynı işlemi kullanarak Facebook video URL’sini kopyalayın.
  2. Yazınızı veya sayfanızı Classic Editor’da açın.
  3. Görsel sekmesine geçin (Metin/HTML değil).
  4. URL’yi çevresinde metin olmadan, köprü işaretlemesi olmadan ve sondaki karakterler olmadan kendi satırına yapıştırın.
  5. Yayınla veya Önizle‘ye tıklayın.

WordPress’in WP_oEmbed sınıfı, the_content filtre işlemi sırasında URL’yi yakalar ve Facebook’un oEmbed uç noktası tarafından döndürülen iframe işaretlemesiyle değiştirir.

Kritik tuzak: URL’yi başka metinlerle birlikte bir paragrafın içine yapıştırırsanız, WordPress oEmbed çözümlemesini tetiklemez. URL, yazı içeriğinde bağımsız bir paragraf düğümü işgal etmelidir.

Yöntem 3: Facebook’un Yerel Gömme Kodu (iframe)

Bu yöntem, WordPress’in oEmbed sistemini tamamen atlar ve App ID yapılandırmasından bağımsız olarak çalışır. Herkese açık videolar için en güvenilir seçenektir.

Gömme Kodu Nasıl Alınır

  1. Facebook videosuna gidin.
  2. Üç nokta menüsüne (...) tıklayın ve Göm‘ü seçin.
  3. Facebook bir <iframe> snippet’i oluşturur. Tam snippet’i kopyalayın.

Tipik bir Facebook video gömme snippet’i şöyle görünür:

<iframe
  src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fusername%2Fvideos%2F1234567890%2F&show_text=false&width=560&t=0"
  width="560"
  height="314"
 
  scrolling="no"
  frameborder="0"
  allowfullscreen="true"
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>

iframe’i WordPress’e Ekleme

Gutenberg’de: Bir Özel HTML bloğu ekleyin ve iframe kodunu doğrudan yapıştırın.

Classic Editor’da: Metin sekmesine (HTML görünümü) geçin ve iframe’i istediğiniz konuma yapıştırın. Görsel sekmesine yapıştırmayın — WordPress HTML’yi kaldırır veya kaçış karakterine dönüştürür.

iframe’i Duyarlı Hale Getirme

Facebook’un varsayılan iframe’i sabit piksel boyutları kullanır ve bu durum mobil görünüm alanlarında bozulmalara yol açar. Duyarlı bir kapsayıcıya sarın:

<div>
  <iframe
    src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fusername%2Fvideos%2F1234567890%2F&show_text=false&width=560"
   
    scrolling="no"
    frameborder="0"
    allowfullscreen="true"
    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
  </iframe>
</div>

padding-bottom: 56.25% değeri 16:9 en boy oranını korur. 4:3 içerik için 75% olarak ayarlayın.

Facebook App ID Gereksinimini Düzeltme

WordPress’in yerel oEmbed yönteminin (Yöntem 1 ve 2) güvenilir şekilde çalışmasını istiyorsanız, bir Facebook Uygulaması kaydetmeniz ve kimliğini WordPress’e sağlamanız gerekir.

Adım 1: Bir Facebook Uygulaması Oluşturun

  1. developers.facebook.com adresine gidin ve oturum açın.
  2. Uygulamalarım > Uygulama Oluştur‘a tıklayın.
  3. Tüketici uygulama türünü seçin.
  4. Kurulum sihirbazını tamamlayın. Temel oEmbed kullanımı için uygulamayı incelemeye göndermeniz gerekmez.
  5. Uygulama kontrol panelinden App ID‘nizi kopyalayın.

Adım 2: App ID’yi WordPress’e Ekleyin

En temiz yaklaşım, App ID’yi temanızın functions.php dosyası veya siteye özgü bir eklenti aracılığıyla eklemektir:

add_filter( 'oembed_fetch_url', function( $provider, $url, $args ) {
    if ( strpos( $provider, 'facebook.com' ) !== false ) {
        $provider = add_query_arg( 'access_token', 'YOUR_APP_ID|YOUR_CLIENT_TOKEN', $provider );
    }
    return $provider;
}, 10, 3 );

YOUR_APP_ID ve YOUR_CLIENT_TOKEN değerlerini Facebook Uygulama kontrol panelinizde Ayarlar > Gelişmiş > İstemci Jetonu altındaki değerlerle değiştirin.

Alternatif olarak, birkaç eklenti bunu otomatik olarak yönetir — özellikle Embed Plus for Facebook ve WP Facebook oEmbed Fix.

Yöntem 4: Gelişmiş Kontrol için Üçüncü Taraf Eklentiler

Eklentiler, temel oynatmanın ötesinde özelliklere ihtiyaç duyduğunuzda doğru seçimdir: özel oynatıcı boyutları, geç yükleme, GDPR onay kapıları veya akış tabanlı gömme.

Smash Balloon Social Post Feed, en yaygın kullanılan seçenektir. Kurulum ve Facebook hesabı yetkilendirmesinin ardından, oynatıcı genişliği, otomatik oynatma davranışı ve altyazı görüntüleme üzerinde ayrıntılı kontroller sunan bir kısa kod ve Gutenberg bloğu sağlar.

Embed Plus for Facebook, özellikle oEmbed kimlik doğrulamasına odaklanır ve tek hedefiniz tam bir sosyal akış eklentisi eklemeden App ID sorununu çözmekse hafif bir çözümdür.

WP YouTube Lyte / Embed Optimizer (WordPress Performans ekibinden), iframe’in sayfa oluşturmayı engellemesini önlemek için Facebook gömmelerini geç yükleyebilir — içerik ağırlıklı sayfalarda anlamlı bir Core Web Vitals iyileştirmesi.

Yöntem Karşılaştırması

YöntemApp ID GerektirirVarsayılan Olarak DuyarlıÖzel Videolarda ÇalışırÖzelleştirme DüzeyiEn İyi Kullanım
Gutenberg Embed BloğuEvet (2020 sonrası)EvetHayırDüşükStandart herkese açık videolar, basit kurulum
Classic Editor URL yapıştırmaEvet (2020 sonrası)EvetHayırDüşükEski WordPress kurulumları
Facebook yerel iframeHayırHayır (manuel düzeltme gerekli)HayırOrtaAPI kurulumu olmadan güvenilir gömme
Üçüncü taraf eklentiDeğişirEvetKısmenYüksekGelişmiş düzenler, GDPR uyumluluğu, akışlar

Performans ve Core Web Vitals Değerlendirmeleri

Facebook’un gömme iframe’i connect.facebook.net adresinden birden fazla üçüncü taraf komut dosyası yükler; bu durum 200–600ms render-blocking gecikme ekleyebilir ve Largest Contentful Paint (LCP) ile Total Blocking Time (TBT) puanlarını olumsuz etkileyebilir.

Pratik azaltma yöntemleri:

  • Facade deseni: iframe’i statik bir küçük resimle değiştirin ve gerçek oynatıcıyı yalnızca kullanıcı tıklamasında yükleyin. Lite YouTube Embed yaklaşımı, özel bir facade kullanılarak Facebook için uyarlanabilir.
  • loading="lazy" özelliği: Öğe görünüm alanına girene kadar yüklemeyi ertelemek için iframe etiketine loading="lazy" ekleyin.
  • Kendi kendine barındırılan video alternatifi: Video kendi içeriğinizse, doğrudan WordPress medyasına yüklemeyi veya video akışı yapılandırmasıyla bir VPS üzerinde barındırmayı düşünün. Bu, üçüncü taraf komut dosyası bağımlılığını tamamen ortadan kaldırır.

Sayfa hızının dönüşümü doğrudan etkilediği yüksek trafikli WordPress sitelerinde, kendi sunucu altyapınızı bir Dedicated Server üzerinde çalıştırmak, önbellek başlıkları, CDN entegrasyonu ve komut dosyası yükleme sırası üzerinde tam kontrol sağlar — bunların hiçbiri paylaşımlı ortamlarda mevcut değildir.

Gizlilik, GDPR ve Çerez Onayı

Bir ziyaretçi Facebook gömmesi içeren bir sayfa yüklediğinde, Facebook’un komut dosyaları üçüncü taraf çerezler ayarlar ve ziyaretçinin Facebook hesabı olmasa bile davranışsal veriler toplayabilir. GDPR (AB), LGPD (Brezilya) ve CCPA (Kaliforniya) kapsamında bu, iframe yüklenmeden önce açık kullanıcı onayı gerektiren üçüncü taraf veri işleme anlamına gelir.

Complianz veya Cookiebot gibi bir eklenti kullanarak bir onay kapısı uygulayın; bu eklentiler, kullanıcı ilgili çerez kategorisini kabul edene kadar iframe’i bir yer tutucuyla değiştirir. Bu, AB trafiği olan siteler için isteğe bağlı değildir — yasal bir gerekliliktir.

Yaygın Gömme Hatalarını Giderme

Video editörde yer tutucu veya bozuk gömme gösteriyor ancak ön uçta çalışıyor: Bu, bilinen bir Gutenberg oluşturma sorunudur. Editör önizlemesi, doğru oEmbed önbelleğine sahip olmayabilecek yönetici kullanıcının oturumunu kullanır. Etkilenen yazı için _oembed_* yazı meta girişlerini silerek oEmbed önbelleğini temizleyin veya WP-CLI komutunu kullanın:

wp post meta delete <post_id> --match-prefix=_oembed_

Ön uçta “Üzgünüz, bu içerik gömleme yapılamadı”: Neredeyse her zaman eksik App ID’den kaynaklanır. Yukarıdaki App ID yapılandırma adımlarını izleyin.

Video doğru şekilde gömülüyor ancak WordPress güncellemesinden sonra kayboluyor: WordPress, oEmbed sağlayıcı listesini periyodik olarak günceller. Bir Facebook API uç noktası değişikliği mevcut gömmeleri bozabilir. wp-includes/class-oembed.php sağlayıcı listesini kontrol edin ve Facebook’un mevcut belgelenmiş uç noktasıyla karşılaştırın.

Gömme hazırlama ortamında çalışıyor ancak üretimde çalışmıyor: Facebook’un oEmbed API’si, istekte bulunan alan adını Uygulamanın izin verilen alan adları listesiyle doğrular. Üretim alan adınızı Facebook Uygulamasının Ayarlar > Temel altındaki Uygulama Alan Adları alanına ekleyin.

Özel veya grup videoları gömleme yapılamıyor: Facebook’un oEmbed API’si yalnızca herkese açık videolara hizmet eder. Özel içerik için desteklenen bir geçici çözüm yoktur — tek seçenek videoyu indirip bağımsız olarak barındırmaktır; örneğin doğrudan akış için yapılandırılmış bir medya dizinine sahip cPanel’li VPS üzerinde.

Zengin Medya Gömen WordPress Siteleri için Barındırma Değerlendirmeleri

Gömülü video iframe’leri içeren sayfalar, standart içerik sayfalarından önemli ölçüde daha ağırdır. Her Facebook gömmesi, önbelleğe alınmamış her sayfa yüklemesinde Facebook’un CDN’inden DNS aramaları, TCP el sıkışmaları ve komut dosyası indirmeleri tetikler.

WordPress siteniz Paylaşımlı Web Barındırma üzerinde çalışıyorsa, sunucu tarafı işlem süresi darboğaz değildir — istemci tarafı üçüncü taraf istekleri darboğazdır. Ancak video dosyalarını kendi başınıza barındırıyor veya medya ağırlıklı bir site çalıştırıyorsanız, paylaşımlı barındırmanın bant genişliği ve G/Ç sınırları ilgili kısıtlamalar haline gelir.

Gömülü sosyal videoyu orijinal medya içeriğiyle birleştiren siteler için, nesne önbelleğe alma (Redis veya Memcached), tam sayfa önbelleği (Nginx FastCGI önbelleği veya Varnish) ve düzgün yapılandırılmış CDN içeren bir VPS Barındırma ortamı, herhangi bir paylaşımlı ortamdan ölçülebilir biçimde daha iyi Core Web Vitals puanları sunar.

WordPress yöneticinizi ve gömme uç noktalarınızı geçerli bir SSL sertifikasıyla güvence altına almak da tartışmasız zorunludur — Facebook’un API’si, HTTPS olmayan kaynaklara oEmbed yanıtları sunmayı reddeder. Siteniz henüz HTTPS’de değilse, herhangi bir gömme sorununu gidermeden önce bir SSL Sertifikası ile başlayın.

Temel Teknik Çıkarımlar

  • Facebook’un oEmbed uç noktası, Ekim 2020’den bu yana bir App ID gerektirmektedir. Bunu belirtmeyen her öğretici güncelliğini yitirmiştir.
  • Gutenberg Embed bloğu ve Classic Editor URL yöntemi, aynı WP_oEmbed sınıfına ve aynı App ID gereksinimine bağlıdır.
  • Facebook yerel iframe yöntemi, herkese açık videolar için en güvenilir geri dönüş seçeneğidir ve API kimlik bilgisi gerektirmez.
  • Sabit boyutlu iframe’ler, doğru mobil oluşturma için duyarlı bir CSS kapsayıcısına sarılmalıdır.
  • Facebook gömmeleri, Core Web Vitals’ı etkileyen üçüncü taraf komut dosyaları yükler. Performansa duyarlı sayfalarda geç yükleme veya facade deseni uygulayın.
  • GDPR uyumluluğu, iframe yüklenmeden önce bir onay kapısı gerektirir — yalnızca bir çerez banner’ı değil.
  • Özel Facebook videoları, desteklenen herhangi bir yöntemle harici sitelere gömleme yapılamaz.
  • Hazırlama ortamından üretime geçişte bozulmayı önlemek için üretim alan adınızın Facebook Uygulamasının izin verilen alan adlarında listelendiğini her zaman doğrulayın.

Sıkça Sorulan Sorular

Facebook video gömmem neden video yerine bozuk bir yer tutucu gösteriyor?

En olası neden, eksik veya yanlış yapılandırılmış bir Facebook App ID’sidir. Ekim 2020’den bu yana Facebook’un oEmbed API’si, alan adınızın izin verilen alan adları altında listelendiği kayıtlı bir App ID gerektirmektedir. App ID’yi WordPress’te oembed_fetch_url filtresi kullanarak yapılandırın veya bunu otomatik olarak yöneten bir eklenti yükleyin.

WordPress’te özel bir Facebook videosunu gölebilir miyim?

Hayır. Facebook’un oEmbed API’si yalnızca herkese açık video URL’lerini çözümler. Arkadaşlarla, gruplarla veya belirli kitlelere kısıtlanmış videolar, desteklenen herhangi bir yöntemle harici web sitelerine gömleme yapılamaz. Tek alternatif, videoyu indirip kendi sunucunuzda barındırmaktır.

Facebook videolarını gömmek WordPress sitemin hızını yavaşlatır mı?

Evet, ölçülebilir biçimde. Her Facebook gömmesi, render-blocking gecikme ekleyen connect.facebook.net adresinden komut dosyaları yükler. iframe’e loading="lazy" ekleyerek, tıkla-yükle facade uygulayarak veya komut dosyası yürütmesini ertelemek için Embed Optimizer gibi bir eklenti kullanarak bunu azaltın.

WordPress’e Facebook videoları gömmek için bir eklentiye ihtiyacım var mı?

Zorunlu değil. WordPress, Facebook oEmbed’i yerel olarak destekler; ancak 2020 sonrasında çalışması için geçerli bir App ID yapılandırılmış olması gerekir. Facebook’tan doğrudan yerel iframe gömme kodunu kullanırsanız, hiçbir eklentiye gerek yoktur.

Facebook videolarını web siteme gömmek yasal mı?

Facebook’un resmi gömme mekanizmasını kullanarak herkese açık paylaşılan Facebook videolarını gömmek, orijinal video telif hakkını ihlal etmediği sürece genel olarak Facebook’un Hizmet Şartları kapsamında izin verilmektedir. Ancak gömme, Facebook’un izleme komut dosyalarını tetikler; bu durum AB ziyaretçileri olan siteler için GDPR yükümlülükleri oluşturur. iframe yüklenmeden önce her zaman bir çerez onay kapısı uygulayın.

15%

Tüm Hosting Hizmetlerinde %15 indirim

Becerilerini test et ve herhangi bir hosting planında İndirim kazan

Kodu kullanın:

Skills
Başlayın