Facebook Open Graph – WordPress

Merhaba, bu konu web sitesi olanlar i├žindir, ufak bir detay bilgisi i├žerir.

Sosyal medyada web sitenizin linkini payla┼č─▒rken linke ait ├Ân izleme resminin otomatik olarak linkle birlikte g├Âr├╝nmesi gerekir.

Sitenizde belli ayarlar yap─▒lmam─▒┼čsa; sitenizden ├Âzellikle Facebook ve whatsapp gibi sitelere link payla┼č─▒m─▒nda ├Ân izleme resimleri g├Âr├╝nmez.

Facebook bunu “Open Graph” ile adland─▒r─▒yor.

Payla┼čaca─č─▒m ayarlar, sitenizde yap─▒lan link payla┼č─▒mlar─▒nda konu ba┼čl─▒─č─▒, resim gibi bilgilerin nereden ├žekilmesi gerekti─čini i├žerir.

Bu ayarlar─▒ sitenizin meta bilgilerini girdi─činiz alan─▒na yazmam─▒z gerekiyor…

├ľRNEK: S─░TE L─░NK─░N─░ SOSYAL MEDYADA PAYLA┼×IRKEN RES─░M B├ľYLE OTOMAT─░K ├çIKACAKTIR.

Sadece Facebook de─čil Whatsappta da bir link payla┼čacakken o sitenin sosyal medya i├žin meta verileri d├╝zg├╝n girilmemi┼čse resim g├Âz├╝kmez sadece d├╝z link g├Âz├╝kecektir.

Resimleri inceleyiniz meta girdisi olmayan linkte ├Ânce ├Ân izleme resmi g├Âr├╝nm├╝yor. Girince g├Âr├╝n├╝r duruma geliyor.

Whatsapptan ├Ârnek payla┼č─▒m. ─░lkinde sitemde meta verisi yoktu ekledim sonras─▒nda ayn─▒ linki payla┼čt─▒m aradaki fark─▒ g├Âr├╝yorsunuz.

WordPress i├žin kendi ayarlar─▒ k─▒sm─▒nda bu meta giri┼či bilgileri girme alan─▒ hen├╝z mevcut de─čil ama ileride olacakt─▒r diye d├╝┼č├╝n├╝yorum.

─░nstagram gibi baz─▒ siteler bu bilgiler olmadan da sitenin i├žinden kolayca verileri ├žekip alabiliyorken baz─▒ siteler i├žin meta verisini bizim girmemiz gerek.

Bunu iki ┼čekilde yapabiliriz:

1. Manuel ┼čekilde kod girerek yapabiliriz.
2. Eklenti ile yapabiliriz

├ľnce manuel y├Ântemi anlatay─▒m.

Malumunuz meta bilgileri <head></head> aras─▒na girilir.

Bunu functions a otomatik girdirelim…

Funtions.php i├žine nas─▒l veri girilece─čini bilmiyorsan─▒z dikkatli olun.

Bu konuda acemilik ├žekenler ┼ču yaz─▒mdan faydalanarak en temizi, kodu eklenti yoluyla ekleyebilirsiniz:
https://100numaraliadam.com/wordpress-functions-kodu-nedir-ve-nasil-eklenir/#4-2-eklenti-ile-functions-ekleme

Siteye facebook Open Graph ├ľzellikleri Kazand─▒rma

//Siteye facebook Open Graph ├ľzellikleri Kazand─▒rma
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');
 
//A├ž─▒k Grafik Meta Bilgisi ekleyelim
 
function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //Bir g├Ânderi veya sayfa de─čilse
        return;
        echo '<meta property="fb:app_id" content="Facebook App ID" />';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="S─░TEN─░Z─░N ADI"/>';
    if(!has_post_thumbnail( $post->ID )) { //G├Ânderide ├Âne ├ž─▒kan resim yok, varsay─▒lan bir resim kullan─▒n
        $default_image="http://site.com/image.jpg"; //D─░KKAT! Bunu sunucunuzdaki varsay─▒lan bir resimle veya medya kitapl─▒─č─▒n─▒zdaki bir resimle de─či┼čtirin
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Kodun ├ľzellikleri:

  • Facebook, Whatsapp, Twitter gibi sitelerin sitenizden resim ve ba┼čl─▒k bilgisini kolayca ├žekebilmesini sa─člar.
  • Bu kod ek meta bilgisi ekleyece─či i├žin seo puan─▒n─▒z─▒ da y├╝kseltir.
  • Kodumuz wordpresste yaz─▒lardan ve sayfalardan ba┼čl─▒k ve resim bilgisini ├žeker.
  • G├Ânderi linkinde resim yok ise varsay─▒lan resim kullan ├Âzelli─či sayesinde linki resimsiz b─▒rakmaz. Bunu kod i├žinden “image.jpg” yolunu de─či┼čtirerek yapabilirsiniz.
  • Meta verisi sadece yaz─▒ ve sayfalardan resim ├ž─▒kartmaya odakl─▒ ├žal─▒┼č─▒r. Payla┼čt─▒─č─▒n─▒z link yaz─▒ veya sayfa t├╝r├╝nde de─čilse resim, kod i├žinde ayarlanan “image.jpg” yolundan ├žekilecektir.
  • Gerekli olmamakla birlikte olsa iyi olur; Facebook App id ile b├╝t├╝nle┼čebilir. Mevcut Face id nizi kod i├žinde “Facebook App ID” yazan k─▒sma yazacaks─▒n─▒z.
    (Facebook App ID niz yoksa nas─▒l al─▒naca─č─▒n─▒ ara┼čt─▒r─▒n─▒z.)
100numaraliadam Yeni Konu:  Wordpress Kurduktan Sonra Yap─▒lmas─▒ Gerekenler

Di─čer y├Ântem eklenti y├╝kleyerek yap─▒l─▒r. Bu y├Ântemde meta bilgisi girdileri otomatik ayarlan─▒r.

Sadece eklentiyi y├╝klemeniz ve etkinle┼čtirmeniz yeterlidir.

Eklenti ad─▒ budur: https://wordpress.org/plugins/og/

OG Better Share on Social Media Eklentisi

Sitenizin eklentiler b├Âl├╝m├╝nde yeni ekle dedikten sonra “OG Better Share on Social Media” yazarak arayabilirsiniz

Bunu kurduktan sonra yapaca─č─▒n─▒z ek bir ayar mevcut de─čil.

Madem eklenti var neden kod y├Ântemini payla┼čt─▒n derseniz. Eklentiler zamanla kendini g├╝nceller. Bu ┼ču an i├žin hafif bir eklentidir ama ileride g├╝ncellemeler sonras─▒ olu┼čabilecek ek kod y─▒─č─▒nlar─▒yla siteyi a─č─▒rla┼čt─▒rmayaca─č─▒n─▒ bilemeyiz. O y├╝zden genel anlamda eklenti kullanmaktan ka├ž─▒n─▒r─▒m. Bunun yerine i┼čleri kod ekleme metodu ile ├ž├Âzme taraftar─▒y─▒m.


Anlatt─▒─č─▒m ┼čekillerden birini tercih ederek meta girdisini sitenize eklettiniz…

Facebook hemencecik resimlerinizi sitenizden ├Ân izlemesi g├Âr├╝lebilir hale getiremeyebiliyor.

Bunu sizin kontrol etmeniz gerekiyor bunun i├žin Facebook Developer Arac─▒n─▒ kullanaca─č─▒z.

Sitenizdeki linklerin sosyal medyada nas─▒l g├Âr├╝nd├╝─č├╝n├╝ merak ediyorsan─▒z bu linkten ;

https://developers.facebook.com/tools/debug

Facebook un geli┼čtirici ara├žlar─▒ b├Âl├╝m├╝nden canl─▒ ├Ân izlemesini yapabilirsiniz.

Bu adrese sitenizde bulunan bir yaz─▒n─▒n veya bir sayfan─▒n ya da ana sayfan─▒z─▒n linkini ekleyin.

Meta bilgisi tamamsa resim ve ba┼čl─▒─č─▒n nas─▒l ├žekilece─čini g├Ârebilirsiniz.

Ayarlar─▒n─▒z─▒n tam oldu─čunu d├╝┼č├╝n├╝yorsan─▒z ve burada resim g├Âremiyorsan─▒z tela┼članmay─▒n.

Meta girdilerinden sonra sitenizde kulland─▒─č─▒n─▒z cache eklentileri varsa mutlaka ├Ânbelleklerini temizleyin.

Facebook un da ├Ânbelle─činin temizlenmesi kendi b├╝nyesinde uzun s├╝rebiliyor.

Sonraki haftalarda developer arac─▒n─▒ kullanarak linklerinizi tekrar deneyin.

Facebook gibi siteler bu bilgileri bir kere al─▒r kendi ├Ân belle─činde bir s├╝reli─čine kay─▒t eder. Bu ┼čekilde kendince i┼čleri h─▒zland─▒rm─▒┼č olur.

Yaz─▒daki resim veya ba┼čl─▒k de─či┼čti─činde bu bilgiler hala Facebook veri taban─▒nda tutulaca─č─▒ i├žin acil durumlarda bilgileri manuel olarak yenilemek i├žin developer arac─▒na girip linki yazman─▒z gerekebilir.

100numaraliadam Yeni Konu:  OneSignal Gecikmeli Bildirim

Not: Sitenizde Hotlink Korumas─▒ mevcutsa Facebook resimleri g├Âstermeyebiliyor! Korumay─▒ kald─▒rman─▒z gerekebiliyor.

Kald─▒rmak i├žin: Sitenizin panel k─▒sm─▒na girmelisiniz genelde CPANEL kullan─▒l─▒yor.

Burada resim hotlink korumas─▒n─▒ aray─▒n bulun. Aktifse kapat─▒n.

Ya da hotlink korumas─▒na ek ayar girerek Facebook gibi resim g├Âstermeyen siteleri ekleyebilir, bu sayede bu siteler i├žin hotlink korumas─▒n─▒n ├žal─▒┼čmamas─▒n─▒ sa─člayabilirsiniz.

Sitenizdeki resimlerin, ba┼čka siteler taraf─▒ndan kullan─▒lmas─▒n─▒ engelleyen koruma metodudur.


Sitesi olan arkada┼člar─▒m i├žin i┼če yarayaca─č─▒n─▒ san─▒yorum. Ho┼č├ža kal─▒n.

Yazar: utquick

Merhaba, Bu site 2017 senesinde kurulmu┼čtur: Kemal SUNAL '─▒n 100 Numaral─▒ Adam filminden feyz al─▒narak kurulan sitemiz, filmdeki Halk Kahraman─▒ rol├╝n├╝ de b├╝nyesine katarak d├╝r├╝st payla┼č─▒mlarda bulunmaktad─▒r. Bizi takip ediniz. B├╝y├╝k bir aile oluyoruz. Tek g├╝vencemiz payla┼č─▒mlar─▒m─▒z─▒n samimili─čidir.

Bunlar da ho┼čunuza gidebilir...

Bir cevap yaz─▒n

E-posta hesab─▒n─▒z yay─▒mlanmayacak. Gerekli alanlar * ile i┼čaretlenmi┼člerdir

css.php