Facebook Thumbnail (Öne Çıkarılmış Görsel) Sorunu

22 02 2013 11:41 tarihinde, WordPress kategorisinde yazıldı. 10 yorum yapıldı, 9500 kez okundu

logo-wordprss-thumbnailBir yazar için okuyucu kitlesinin büyüklüğü önemlidir. Yazıların okunma sayısını da en çok sosyal medya paylaşımları ve e-posta bültenleri etkiler.

Yazdığınız içerikleri paylaşmak ve doğru hedef kitleye ulaşmak için azami özen göstermek zorundasınız. Bir yazınızı paylaşırken özet kısmı ve başlığın yanı sıra Facebook ve Twitter (Twitter Kart ile) gibi sitelerde bir de yazıyı destekleyen fotoğraf yer alır. Thumbnail yani öne çıkarılmış görsel olarak ifade edilen bu fotoğrafın yazı ile alakalı olup olmaması bağlantınızın tıklama oranını etkiler.

Cep telefonları ile ilgili yazdığınız bir yazıyı paylaştığınızda öne çıkarılmış görselin bir manzara fotoğrafı olması itici bir unsurdur. Bu durumda, kullanmış olduğunuz site şablonunuzun bir şeyleri eksik demektir. Thumbnail olarak seçilen bir fotoğrafı paylaşım sırasında seçme lüksümüzün olmayışı doğru tema seçimi ya da doğru tema ayarlarını mecbur kılar.

Facebook gibi sitelerde paylaşım yaparken doğru fotoğrafın çıkması için temanızda kullanmanız gereken birkaç kod vardır. Şimdi sizlere bu kodlardan bahsedeyim.

Öne çıkarılmış görseller sadece yazı ve sayfalarda yer alır. Anasayfa için öne çıkarılmış bir görsel olmayacağı için bir şart belirtmemiz gerekir. Yani eğer yazılarda ve sayfalarda isek bize öne çıkarılmış görseli göster dememiz gerekir.

Eğer anasayfa gibi diğer kategori ve arşivlerin bağlantısı paylaşıldığında Facebook’ta ya da diğer sitelerde bir fotoğraf gözükmesini istiyorsak onun için de şartı sağlamadığı taktirde bir fotoğraf gösterilmesini sağlayacağız.

Yani yazı ve sayfadaysak bize o sayfa ya da yazının öne çıkarılmış görselini göster, değilsek bir fotoğraf seçelim onu göster. ya da kafana göre takıl diyebiliriz.

Kullanacağımız kod kalıbı şöyledir:

<?php
if ( is_singular() )
{ ?>
Sayfadayız ya da yazıdayız bize öne çıkarılmış görseli ver
<?php }
 else
{ ?>
sayfada ya da yazıda değiliz bize şu fotoğrafı göster
<?php }
?>

Kalıbımızın başında belirttiğimiz is_singular ifadesi sayfada ve yazıda olup olmadığımızı bildirir.

Her iki koşulda da fotoğrafı çağırmak için “link rel” ifadesini kullanacağız. Yani bağlantı olduğunu belirten ancak tarayıcımızda somut olarak gözükmeyen bağlantı tanımlayacağız.

Bu kodun kalıbı da şöyle olacaktır:

<link rel="image_src" href="çağırılacak fotoğrafımızın adresi" />

Kalıbımızda çağırılacak fotoğraf adrsi olarak thumbnail kullanacağız.
Eğer “timthumb.php” dosyası ile fotoğraflarınızı kırparak gösteriyorsanız çağrılacak görsel adresine onu girmelisiniz.

Varsayılan thumbnail kodu şu şekildedir.

<?php the_post_thumbnail(''); ?>

Kalıpları yerlerine yazacak olursak kodun son hali şöyle olacaktır:

<?php
if ( is_singular() )
{ ?>
<link rel="image_src" href="<?php the_post_thumbnail(''); ?>" />
<?php }
 else
{ ?>
<link rel="image_src" href="http://www.nebigarci.net/wp-content/themes/nega/images/logonega.png" />
<?php }
?>

Sayfada ve yazıdaysak öne çıkarılmış görselimiz gelecek. Değilsek yukarıda ben kendi logomu tanımladım o gelecek. Kodları temada header.php dosyasındaki <head></head> etiketleri arasına eklemelisiniz.

Tema değişikliklerinde yaşanan en büyük sorunlardan birini çözmüş olduk. Sabırla okuduğunuz için teşekkür ederim 🙂

Bu konudaki düşüncelerinizi siz de yorum olarak paylaşabilir, aşağıdaki butonlar aracılığıyla daha çok kişiye ulaştırabilirsiniz.

Bunlar da İlginizi Çekebilir
Bu Makale 10 Yorum Aldı. Siz Ne Düşünüyorsunuz?
  1. 10 numara yazı olmuş.Anlatım için teşekkürler çok işime yaradı.

  2. Hocam dediklerinizi uyguladım ancak gene de istediğim sonucu alamıyorum. Kodları doğru yere ekledim ancak hala yazıdaki öne çıkarılmış görseli paylaşmıyor. G+ ta paylaşırken sorun olmuyor da facebookta sorun.

    • Bazen temadan kaynaklı olarak sorun olabiliyor. Benzer bir yöntem daha var ancak o konuda tam bilgim yok. open graphe yazarsan Gooogle’da daha fazla kaynak bulabilirsin.
      Kodun kalıbı şöyle:

      <meta property="og:image" content="görsel url/>
  3. WordPress olmayan sitede ne işlem yapacağım bune herkes wordpressci olmuş webciyim diye geçiniyorlar ya

    • Tamam sen daha iyisin, sen de wordpress olmayan site için yazarsın.

      • Tabiki kendi panelim var php tabanlı müşteri odaklı özel tasarım yapıyorum template kullanmıyorum. bu arada kendimi beğenme gibi bir durumum yok lafım sana değil wordpress kullanıp ben webmasterım vs diyenlere

  4. ya sen varya sen adamın hammaddesisin son noktasısın seviyorum seni 🙂

  5. Kolay gelsin wordpress makalesini facebookta paylaşınca resim alanı komple beyaz çıkıyor. Facebook og:image etiketini resim urlsli değilde direk site url si olarak çekiyor. Kaç gündür uğraşıyorum hala bulamadım. Bir bilginiz var mı?

    • Kullandığınız seo eklentilerinde bu özellikle bir sıkıntı olabilir. Bunun haricinde header.php dosyasındaki og:image etiketine görsel edersi olarak yanlış fonksiyon girilmiş olabilir. header.php’de yoksa function.php’de ya da single.php’dir büyük ihtimal. O kodlara ulaşmanız gerek. Görsel adresini alamıyordur.

  6. Header ve functions ve tüm tema dosyalarını araştırdım böyle bir sonuç yok. og:image etiketi yok yani. Kullandığım seo da All İn Seo ne gibi bi sıkıntı olabilir.

Sponsorlu Bağlantılar

Son Yorumlar

  • Samet Nebi Garcı

    https://www.instagram.com/accounts/access_tool/accounts_you_blocked adresine bilgisayardan girdiğinizde görünmesi gerek. O da sizi engellediyse görünmeyebilir
  • Samet Misafir

    Merhaba. Bu şekilde bilgisayardan beni engelleyen kullanıcıyı engelledim fakat telefondaki instagram uygulanmasındaki hesabımda engellenenler listesinde görünmüyor. ne yapmak lazım?
  • Samet Mehmet

    Gayet güzel bir anlatımda bulunmuşsunuz. Sayenizde öğrettiğiniz şekilde yaparak bir kişiyi engelledim bende.
  • Samet Misafir

    Merhaba, ınstagram nega araç eklentisini almak istiyorum. Hesap bilgilerinizi atar mısınız?
  • Samet Misafir

    yorum özelliği müthiş oldu hocam umarım zamanlı gönderi planlama özelliği de getirirsiniz de piyasadaki herkes sizin ekletiyi kullanır.