sosyal medya, teknoloji, rehber.

Kişiye Özel Facebook Open Graph Kullanımı

SHARE
, / 10120 4
Kişiye Özel Facebook Open Graph Kullanımı

Selam arkadaşlar, How to serisine ”Open Graph” ile devam ediyoruz!!

Bu defa sevgili bloggerlarımızdan Begüm Aras‘ın önerisi üzerine Kişiye Özel Facebook Open Graph uygulamasını yazdım.

Yani; http://www.gokhanmms.com gibi blog adresinizi Facebook‘da paylaştığınızda aşağıdaki gibi size özel bir görüntüyü nasıl oluşturabileceğiniz detaylı bir şekilde anlattım.

gokhanmms-faceboook-open-graph-kisiye-ozel-blog-entegrasyon1

Öncelikle bunu zaten Plugin’ler yapıyor neden uğraşıyoruz demeyin. Gereksiz her Plugin blogunuzun performansını olumsuz etkiler, bu şekilde uygulama yaparsanız daha sağlıklı sonuç alırsınız.

1- Öncelikle Facebook Developers adresine giderek Apps sekmesine tıklıyoruz ve Create New App diyoruz.

Benim yaptığım gibi bilgileri doldurup kategorinizi seçin ve Create App butonuna tıklayın. Name Space alanına blogunuz ile ilgili herhangi bir şey yazabilirsiniz.

gokhanmms-faceboook-open-graph-kisiye-ozel-blog-entegrasyon2

2- Karşınıza çıkan sayfanın sol tarafa bulunan Settings sekmesine tıklayın ve aşağıdaki sayfaya gelin. Bu sayfada App Domains alanına ”benim yazdığım gibi” blog adresinizi yazın ve enter yapın.

En üstte bulunan App ID‘nizi bir yere not almayı unutmayın.

gokhanmms-faceboook-open-graph-kisiye-ozel-blog-entegrasyon4

3- + Add Platform butonuna tıklayın ve aşağıdaki gibi açılan sekme içerisinde Site URL kısmına ”benim yazdığım gibi” blog adresinizi yazın ve kaydedin.

gokhanmms-faceboook-open-graph-kisiye-ozel-blog-entegrasyon3

Facebook tarafı ile işimiz bitti, şimdi blog panelinize girin ve aşağıdaki adımları takip ederek entegrasyonu tamamlayın.

4- Aşağıda bulunan kodlar gözünüzü korkutmasın, hepsini bir word içerisine almanızı tavsiye ederim çünkü üzerinde ufak birkaç düzenleme yapmamız gerekecek.

– Facebook App oluştururken size verilen APP ID’yi ilk satırda ve en altta script tagleri arasında bulunan ID ile değiştirin.

Fınd My Facebook ID sayfasına giderek kullanıcı adınızı yazın ve verilen ID’yi 2. satırda bulunan ID ile değiştirin.

14. satırda bulunan Description alanına sitenizi tanıtan kısa yazıyı ekleyin.

16. satırda bulunan Image alanına paylaşımda görünmesini istediğiniz görselin adresini ekleyin.

















 



5- Kodlar üzerinde gerekli düzenlemeleri yaptıktan sonra tek yapmamız gereken kodları blogumuzda Header içerisine eklemek kalıyor.

WordPress panelinize Görünüm menüsü altında bulunan Düzenleyici linkine tıklayın.

– Sağ tarafta yüklü olan temanızın sayfalarını göreceksiniz. Bu sayfalardan header.php yazanına tıklayın. Bulamazsanız CTRL+F ile header.php araması yapın.

– Aşağıdaki ekrana ulaştığınızda düzenleme yaptığınız kodların hepsini HEAD tagleri arasında uygun bir yere yapıştırın ve kaydedin.

gokhanmms-faceboook-open-graph-kisiye-ozel-blog-entegrasyon5

Yaptığınız değişiklikleri test etmek için burayı kullanabilirsiniz: Facebook Debug

Değişikliklerin aktif olması 24 Saat sürebilir ama aktif olduğunda aşağıdaki gibi bir görünüme kavuşacaksınız.

gokhanmms-faceboook-open-graph-kisiye-ozel-blog-entegrasyon6

Sorunuz olursa Yorum bölümünden sorabilirsiniz, elimden geldiğinde yardımcı olmaya çalışırım.

Kolay gelsin;)

Gönderim Listesine Kayıt Olup Yazılardan Haberdar Olabilirsiniz – No Spam;)

  • Yalnız her gönderide aynı resmin çıkması çok kullanışlı olmuyor, dinamik bir resim url si eklense daha cazip olur..

    • gokhanmms

      @yilmazbaris:disqus aslında bu düzenleme sadece ana url’nin paylaşıldığı durumlar için geçerli, post url’si paylaşıldığında farklı görsel seçmeye izin veriyor.

  • Mestan İnam

    Teşekkürler bu yazı sayesinde sorunsuz uyguladım.

    • gokhanmms

      rica ederim:)