WordPress ile Facebook Açık Grafiğini Nasıl Entegre Ederim?

Facebook Açık Grafik protokolü, blog içeriğinizi yalnızca okuyucularınızla değil, onların Facebook arkadaşlarıyla da paylaşmanıza olanak tanır. En iyi kısmı - ne zaman birisi sevilen içerik (ler) iniz, Facebook profillerinde yayınlanacaktır. Ancak hepsi bu kadar değil, Açık Grafik, okuyucularınızla etkileşime girmenin ve etkileşimde bulunmanın daha ilginç yollarını keşfetmenizi sağlar. Sonuçta - eğer bu doğru yapılırsa - markanızı oluşturur ve sitenizin trafiğini artırır.

Bugünün yayınında, içine bakacağız Facebook Open Graph'u kendi kendine barındırılan bir WordPress ile nasıl entegre edersiniz? detaylı bir adım adım kılavuzda. Mevcut WordPress Temalarınızı düzenlemenizi ve bir Facebook uygulaması oluşturmanızı gerektirir (eğer yoksa).

Hazır? Tarayıcıyı ve en sevdiğiniz kod düzenleyiciyi ateşleyelim. Atlamadan sonra tam rehber.

1. Adım. Facebook uygulaması oluşturun.

İhtiyacımız olacak Uygulama Kimliği ve bunu elde etmek için bir Facebook Uygulaması oluşturmanız gerekir. Zaten bir tane varsa, 2. adıma geçin.

Bir uygulama oluşturmak kolaydır, işte yapmanız gerekenler:

1. Facebook'ta oturum açın, Geliştirici sayfasına gidin.
2. Tıklayın "Yeni bir uygulama ayarla"sağ üst köşedeki düğme.
3. Bir isim ver yeni uygulamana, anlaşmak Facebook şartlarına, hit Uygulama oluştur.
4. Git Web sitesi sekme, doldur Site URL'si ve Site Etki Alanı.
5. Değerini not alın Uygulama Kimliği bir yere ve "Değişiklikleri Kaydet" buton.

Bu kadar! Bilginin kalanını doldurmak için her zaman daha sonra tekrar gelebilirsiniz.

2. Adım. Değiştir Etiket

Temanın başlık dosyasını aç (Header.php) en sevdiğin editörde. Bir şeyler ters gittiğinde, her zaman yedek bir kopyasını sakla.

Aşağıdaki kod satırını veya bu kodla başlayan kodu arayın. >

Şununla değiştirin:

Header.php dosyasını açık tutun, 3. adım için ihtiyacımız olacak.

3. Adım. OG yerleştirin etiketler

Aşağıdaki kodu hemen sonra yapıştırın etiketi veya önce etiket.

       "/>          

İşte değiştirmeniz gereken değerlerden bazıları:

• Satır 3: Değiştir your_fb_app_id ile Uygulama Kimliği 1. Adımdan itibaren.
• Satır 4: Alabilirsiniz your_fb_admin_id Facebook Insights sayfanız altında, (Daha fazla bilgi). Tıkla "Web siteniz için öngörü"yeşil düğme, tüm kod dizesini alın ve Satır 4'ü değiştirin.
• Çizgi 12: Bu çizgi, gönderinizi temsil eden resmi belirler. Temanız WordPress Post Küçük Resimlerini destekliyorsa, iyi çalışması gerekir. Ama eğer olmazsa, görüntü olmadan incelikle başarısız olur. Alternatif bir geçici çözüm için Adım 3a'ya bakın..
• Satır 19: Değiştir logo.jpg blogunuzun logosuna bir URL ile. Blogunuzdaki olmayan bir sayfa Facebook'ta paylaşıldığında görüntülenecektir.

Adım 3a - "wp_get_attachment_thumb_url" Başarısız Olduğunda

Ne zaman wp_get_attachment_thumb_url () Çalışılamadı, muhtemelen aşağıda gösterilenler gibi değeri olmayan bir içerik özelliğine gidersiniz:

Basit bir geçici çözüm, Line 12'yi aşağıdaki kodla değiştirmek olacaktır:

Sonra aç functions.php ve aşağıdaki kodu ekleyin:

işlevi catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ eşleşme); $ first_img = $, [1] ile eşleşir [0]; if (empty ($ first_img)) // Varsayılan bir görüntü tanımlar $ first_img = "/images/default.jpg";  $ first_img döndür; 

Bu değiştirme kodu bir işlev çağrısı kullanmaya çalışır. catch_that_image () Karşılaştığı ilk görüntünün URL'sini almak ve yazdırmak için. İşlev ilk resmi bulamazsa satır 10’u URL’yle varsayılan görüntüyle değiştir.

4. Adım. Facebook Javascript SDK'yi yerleştirin.

Aşağıdaki Javascript, Graph API ve Dialog'ların tüm özelliklerine erişmenizi sağlar. Ayrıca, Beğen düğmesi, Facepile, Öneriler vb. Gibi Facebook sosyal eklentilerini kolaylıkla entegre etmenizi sağlar.

İçine yerleştirin header.php, hemen sonra

değiştirmek your_fb_app_id Satır 4’te Uygulama Kimliği 1. adımdan önceki.

Adım 5. Test edelim!

Facebook Open Graph'u WordPress bloguna entegre etmeyi başardık. İşleri doğru yaptığımızdan emin olmak için birkaç test verelim..

Test 1 - Kaynak kodunu görüntüle

Blog postasından birinin kaynak kodlarına bir bakın, şöyle bir şeye sahip olmalısınız:

Özellikleri ve değerlerini kontrol edin, doğru olduklarından emin olun.

Test # 2 - Bir Beğenme Kutusu Kur

Bir Facebook Beğen Düğmesi yüklemediyseniz, muhtemelen bir tane edinme zamanı gelmiştir. Aşağıdaki kodu herhangi bir yere (tercihen içerikten önce veya içerikten sonra) içine yerleştirin single.php:

Ardından bir arkadaşınızı alın Sevmek o. Facebook profilinde benzer bir şey görmelisin:

Ekstra: WordPress Eklentisi

Eğer bir şekilde kodları yükleyemediyseniz ya da hızlı ve kolay bir şekilde yapılmasını istiyorsanız - bunun için bir WordPress eklentisi var..

Facebook WordPress'te Açık Grafik Meta, küçük resim sorunu, yanlış başlık sorunu, yanlış açıklama sorunu vb. Önlemek için Facebook meta verileri ekleyen bir WordPress eklentisidir..