WordPress functions.php ile Facebook Paylaşım Butonu Ekleme

Tarafındankomut
0 Comments

WordPress sitenize özel bir Facebook paylaşım butonu eklemek istediğinizde, eklenti yüklemek her zaman en iyi çözüm değildir. Özellikle performans odaklı çalışan bir site yönetiyorsanız, her küçük işlev için ayrı bir eklenti kurmak hem sunucu kaynaklarını tüketir hem de güvenlik açığı riskini artırır. İşte tam bu noktada functions.php devreye giriyor. Bu yazıda, WordPress functions.php dosyasını kullanarak sitenize özelleştirilebilir bir Facebook paylaşım butonu eklemeyi, bunu farklı senaryolara göre nasıl uyarlayabileceğinizi ve WooCommerce ürün sayfalarında nasıl kullanabileceğinizi detaylıca ele alacağız.

functions.php Nedir ve Neden Kullanmalıyız?

WordPress tema dosyaları içinde yer alan functions.php, temanızın çekirdek işlevselliğini genişletmenizi sağlayan bir PHP dosyasıdır. Eklentilere benzer şekilde çalışır ama doğrudan temanıza bağlıdır. Hook’lar, filter’lar ve özel fonksiyonlar aracılığıyla WordPress’in hemen her davranışını buradan yönetebilirsiniz.

Peki neden bir Facebook eklentisi yerine functions.php‘yi tercih edelim?

  • Performans: Eklentiler ek HTTP istekleri ve veritabanı sorguları oluşturur. Özelleştirilmiş kod çok daha hafiftir.
  • Kontrol: Butonun tam olarak nerede göründüğünü, nasıl stillendiğini ve hangi koşullarda çalıştığını siz belirlersiniz.
  • Bağımlılıktan kurtulma: Eklenti geliştiricisinin güncelleme yapmasını beklemek zorunda kalmazsınız.
  • WooCommerce uyumu: Özel hook’larla ürün sayfalarına kolayca entegre edebilirsiniz.

Şimdi adım adım ilerleyelim.

Temel Facebook Paylaşım Butonu Fonksiyonu

En basit haliyle bir Facebook paylaşım butonu, kullanıcıyı Facebook’un sharer.php URL’sine yönlendirir. Bu URL, u parametresi olarak paylaşılacak sayfanın adresini alır.

<?php
function custom_facebook_share_button() {
    $current_url = urlencode( get_permalink() );
    $button_html  = '<div class="fb-share-wrapper">';
    $button_html .= '<a href="https://www.facebook.com/sharer/sharer.php?u=' . $current_url . '" ';
    $button_html .= 'target="_blank" rel="noopener noreferrer" class="fb-share-btn">';
    $button_html .= '<span>Facebook'ta Paylaş</span>';
    $button_html .= '</a>';
    $button_html .= '</div>';

    return $button_html;
}
?>

Bu fonksiyon, get_permalink() ile mevcut sayfanın URL’sini alır ve urlencode() ile güvenli bir şekilde encode eder. Fonksiyonu bir kısayol kodu (shortcode) olarak da kullanabilirsiniz; bunu birazdan göreceğiz.

Shortcode Olarak Kaydetme

Fonksiyonu doğrudan tema dosyalarına gömmek yerine shortcode olarak kaydetmek çok daha esnek bir yaklaşımdır. Böylece hem editörden hem de widget alanlarından kullanabilirsiniz.

<?php
function custom_facebook_share_button() {
    if ( ! is_singular() ) {
        return '';
    }

    $current_url   = urlencode( get_permalink() );
    $post_title    = urlencode( get_the_title() );
    $share_url     = 'https://www.facebook.com/sharer/sharer.php?u=' . $current_url . '&quote=' . $post_title;

    $button_html  = '<div class="fb-share-wrapper">';
    $button_html .= '<a href="' . esc_url( rawurldecode( $share_url ) ) . '" ';
    $button_html .= 'target="_blank" rel="noopener noreferrer" class="fb-share-btn">';
    $button_html .= '&#x1F4F1; Facebook'ta Paylaş';
    $button_html .= '</a>';
    $button_html .= '</div>';

    return $button_html;
}
add_shortcode( 'fb_share', 'custom_facebook_share_button' );
?>

Bu kodu functions.php‘ye ekledikten sonra, herhangi bir yazı veya sayfada [fb_share] kısayol kodunu kullanabilirsiniz. Çok yazarlı bir blog yönetiyorsanız, yazarlarınıza “bu kodu yazının sonuna ekleyin” demeniz yeterli olur.

Yazı Içeriğine Otomatik Ekleme

Her yazıya manuel olarak shortcode eklemek yorucu olabilir. the_content filtresi kullanarak butonu tüm tekil yazı sayfalarına otomatik olarak ekleyebilirsiniz.

<?php
function auto_append_facebook_share( $content ) {
    if ( ! is_singular( 'post' ) || ! in_the_loop() || ! is_main_query() ) {
        return $content;
    }

    $current_url = urlencode( get_permalink() );
    $post_title  = urlencode( get_the_title() );
    $share_url   = 'https://www.facebook.com/sharer/sharer.php?u=' . $current_url . '&quote=' . $post_title;

    $share_button  = '<div class="fb-share-after-content">';
    $share_button .= '<p class="share-label">Bu yazıyı beğendiyseniz paylaşın:</p>';
    $share_button .= '<a href="' . esc_url( rawurldecode( $share_url ) ) . '" ';
    $share_button .= 'target="_blank" rel="noopener noreferrer" class="fb-share-btn">';
    $share_button .= 'Facebook'ta Paylaş';
    $share_button .= '</a>';
    $share_button .= '</div>';

    return $content . $share_button;
}
add_filter( 'the_content', 'auto_append_facebook_share' );
?>

Burada in_the_loop() ve is_main_query() kontrollerini eklemek çok önemlidir. Aksi takdirde buton, widget’larda veya sayfa içindeki döngülerde de görünebilir ve beklenmedik sonuçlar doğurabilir.

WooCommerce Ürün Sayfalarına Entegrasyon

E-ticaret sitelerinde ürün paylaşımı dönüşümleri ciddi şekilde artırabilir. WooCommerce, woocommerce_single_product_summary gibi özel action hook’ları sunar. Bu hook’ları kullanarak butonu ürün başlığının altına, fiyatın altına veya sepete ekle butonunun hemen altına yerleştirebilirsiniz.

<?php
function woocommerce_product_facebook_share() {
    if ( ! is_product() ) {
        return;
    }

    global $product;

    $product_url   = urlencode( get_permalink( $product->get_id() ) );
    $product_name  = urlencode( $product->get_name() );
    $share_url     = 'https://www.facebook.com/sharer/sharer.php?u=' . $product_url . '&quote=' . $product_name;

    echo '<div class="fb-product-share">';
    echo '<a href="' . esc_url( rawurldecode( $share_url ) ) . '" ';
    echo 'target="_blank" rel="noopener noreferrer" class="fb-share-btn fb-share-product">';
    echo '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">';
    echo '<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>';
    echo '</svg>';
    echo ' Ürünü Paylaş';
    echo '</a>';
    echo '</div>';
}
// 35 = fiyatın altı, 25 = başlığın altı, 45 = sepete ekle butonunun üstü
add_action( 'woocommerce_single_product_summary', 'woocommerce_product_facebook_share', 35 );
?>

Hook’un öncelik numarasını değiştirerek butonun ürün sayfasındaki konumunu ayarlayabilirsiniz. WooCommerce’in varsayılan öncelik değerleri şöyledir:

  • 5: Ürün başlığı
  • 10: Ürün derecelendirmesi
  • 20: Ürün fiyatı
  • 25: Kısa açıklama
  • 30: Meta bilgileri
  • 35: Sepete ekle butonu (tam olarak altına eklemek için 36 kullanın)

CSS ile Görsel Düzenleme

Butonunuzu sadece işlevsel değil, görsel olarak da etkileyici hale getirmek için functions.php üzerinden inline CSS veya bir enqueue işlemi kullanabilirsiniz.

<?php
function enqueue_facebook_share_styles() {
    $custom_css = '
        .fb-share-wrapper,
        .fb-share-after-content,
        .fb-product-share {
            margin: 20px 0;
            padding: 15px 0;
            border-top: 1px solid #e0e0e0;
        }

        .fb-share-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: #1877f2;
            color: #ffffff !important;
            padding: 10px 20px;
            border-radius: 6px;
            text-decoration: none !important;
            font-size: 14px;
            font-weight: 600;
            transition: background-color 0.2s ease;
        }

        .fb-share-btn:hover {
            background-color: #1558b0;
            color: #ffffff !important;
        }

        .share-label {
            font-size: 13px;
            color: #666;
            margin-bottom: 10px;
        }
    ';

    wp_add_inline_style( 'style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'enqueue_facebook_share_styles' );
?>

wp_add_inline_style() fonksiyonu, CSS’i ayrı bir dosya olmadan temanızın ana stil dosyasına bağlı olarak enjekte eder. Bu yöntem hem temiz hem de performanslıdır.

Kategori ve Post Type Bazlı Kontrol

Gerçek dünya senaryolarında butonu her yerde göstermek istemeyebilirsiniz. Örneğin sadece belirli kategorilerdeki yazılarda veya belirli özel yazı tiplerinde göstermek için koşullu kontroller ekleyebilirsiniz.

<?php
function smart_facebook_share_button( $content ) {
    // Sadece tekil yazılarda çalış
    if ( ! is_singular() || ! in_the_loop() || ! is_main_query() ) {
        return $content;
    }

    // Belirli kategorilerde gösterme
    $excluded_categories = array( 'duyuru', 'haber-bulteni' );
    if ( has_category( $excluded_categories ) ) {
        return $content;
    }

    // Sadece belirli post type'larda göster
    $allowed_post_types = array( 'post', 'product', 'portfolio' );
    if ( ! in_array( get_post_type(), $allowed_post_types, true ) ) {
        return $content;
    }

    // Özel alan kontrolü: fb_share_disabled = 1 ise gösterme
    $disabled = get_post_meta( get_the_ID(), 'fb_share_disabled', true );
    if ( '1' === $disabled ) {
        return $content;
    }

    $current_url = urlencode( get_permalink() );
    $post_title  = urlencode( get_the_title() );
    $share_url   = 'https://www.facebook.com/sharer/sharer.php?u=' . $current_url . '&quote=' . $post_title;

    $share_button  = '<div class="fb-share-after-content">';
    $share_button .= '<a href="' . esc_url( rawurldecode( $share_url ) ) . '" ';
    $share_button .= 'target="_blank" rel="noopener noreferrer" class="fb-share-btn">';
    $share_button .= 'Facebook'ta Paylaş';
    $share_button .= '</a>';
    $share_button .= '</div>';

    return $content . $share_button;
}
add_filter( 'the_content', 'smart_facebook_share_button' );
?>

Bu örnekte dikkat edilmesi gereken önemli bir detay var: get_post_meta() ile özel alan kontrolü ekledik. Yani editörleriniz, belirli bir yazı için paylaşım butonunu devre dışı bırakmak isterlerse, o yazının özel alanlarına fb_share_disabled adıyla 1 değeri ekleyebilirler.

JavaScript ile Popup Pencere Açma

Facebook’un sharer.php‘si varsayılan olarak yeni sekmede açılır. Ama kullanıcı deneyimini artırmak için küçük bir popup pencere açmak çok daha profesyonel görünür. Bunun için JavaScript ekleyebilirsiniz.

<?php
function enqueue_facebook_share_script() {
    $inline_script = '
        document.addEventListener("DOMContentLoaded", function() {
            var fbBtns = document.querySelectorAll(".fb-share-btn");

            fbBtns.forEach(function(btn) {
                btn.addEventListener("click", function(e) {
                    e.preventDefault();
                    var shareUrl = this.getAttribute("href");
                    var windowFeatures = "width=580,height=400,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0";
                    window.open(shareUrl, "FacebookShareWindow", windowFeatures);
                });
            });
        });
    ';

    wp_add_inline_script( 'jquery', $inline_script );
}
add_action( 'wp_enqueue_scripts', 'enqueue_facebook_share_script' );
?>

Bu script, sayfadaki tüm .fb-share-btn sınıflı elementleri seçer ve tıklama olaylarını yakalar. Popup boyutunu width ve height parametreleriyle istediğiniz gibi ayarlayabilirsiniz.

Child Theme Kullanımının Önemi

Tüm bu kodları doğrudan temanızın functions.php dosyasına eklerseniz, tema güncellemelerinde değişikliklerinizi kaybedersiniz. Bu yüzden mutlaka bir child theme oluşturmanızı tavsiye ederim.

Child theme oluşturmak için önce wp-content/themes/ dizinine yeni bir klasör açın, örneğin tema-adi-child. İçine iki dosya oluşturun:

style.css içeriği:

/*
 Theme Name:   Ana Tema Adı Child
 Template:     ana-tema-klasor-adi
 Version:      1.0.0
*/

functions.php içeriği:

<?php
function child_theme_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

// Facebook paylaşım fonksiyonlarınızı buraya ekleyin
function custom_facebook_share_button() {
    // ... kodunuz
}
add_shortcode( 'fb_share', 'custom_facebook_share_button' );
?>

Artık ana tema güncellendiğinde child theme’inizdeki değişiklikler korunur.

Güvenlik Kontrolleri ve Best Practice

functions.php‘ye eklediğiniz her kodda güvenlik kontrollerini atlamayın. Facebook paylaşım butonu için dikkat etmeniz gereken noktalar şunlardır:

  • esc_url(): Her URL çıktısını bu fonksiyonla temizleyin. XSS saldırılarına karşı temel savunmanızdır.
  • urlencode(): URL parametrelerini encode etmek hem güvenlik hem de doğru çalışma açısından zorunludur.
  • is_singular() kontrolü: Fonksiyonun yalnızca tek sayfa görünümlerinde çalışmasını sağlar, performansı artırır.
  • in_the_loop() kontrolü: Butonun beklenmedik yerlerde çıkmasını engeller.
  • Nonce kullanımı: Bu senaryoda doğrudan form işlemi olmadığı için zorunlu değil ama AJAX tabanlı bir paylaşım sayacı eklerseniz mutlaka nonce kullanın.

Ayrıca şunu da belirtmek gerekir: Facebook’un sharer.php endpoint’i Open Graph meta etiketlerini okur. Sitenizde Yoast SEO, Rank Math gibi bir eklenti varsa bu etiketler zaten ekleniyor demektir. Yoksa wp_head hook’una basit bir Open Graph meta etiketi ekleyebilirsiniz:

<?php
function add_open_graph_meta() {
    if ( ! is_singular() ) {
        return;
    }

    $og_title       = esc_attr( get_the_title() );
    $og_url         = esc_url( get_permalink() );
    $og_description = esc_attr( get_the_excerpt() );

    $thumbnail_id  = get_post_thumbnail_id();
    $og_image      = $thumbnail_id
        ? esc_url( wp_get_attachment_image_url( $thumbnail_id, 'large' ) )
        : '';

    echo '<meta property="og:title" content="' . $og_title . '" />' . "n";
    echo '<meta property="og:url" content="' . $og_url . '" />' . "n";
    echo '<meta property="og:description" content="' . $og_description . '" />' . "n";
    echo '<meta property="og:type" content="article" />' . "n";

    if ( $og_image ) {
        echo '<meta property="og:image" content="' . $og_image . '" />' . "n";
    }
}
add_action( 'wp_head', 'add_open_graph_meta' );
?>

Bu sayede kullanıcı paylaşım butonuna tıkladığında Facebook, içeriğin başlığını, açıklamasını ve kapak görselini doğru şekilde çekebilir.

Sık Karşılaşılan Sorunlar ve Çözümleri

Buton görünmüyor: is_singular() veya post type kontrollerini gözden geçirin. Belki de gösterim koşullarından biri engelliyordur.

Paylaşımda görsel çıkmıyor: Open Graph og:image meta etiketi eksik ya da yanlış boyuttadır. Facebook en az 200×200 piksel görsel bekler, önerilen boyut 1200×630’dur.

URL encode sorunu: get_permalink() fonksiyonunun döndürdüğü URL’yi her zaman urlencode() ile işleyin. Özellikle Türkçe karakterler içeren slug’larda sorun çıkabilir.

Tema güncellemesinde kodlar silindi: Child theme kullanmıyorsanız bu kaçınılmazdır. Hemen child theme’e geçin.

WooCommerce hook öncelik çakışması: Başka bir eklenti aynı hook’u aynı öncelikle kullanıyorsa görsel çakışma yaşanabilir. Öncelik numarasını 36 veya 37 gibi özgün bir değere çekin.

Sonuç

WordPress functions.php üzerinden Facebook paylaşım butonu eklemek, eklenti bağımlılığını ortadan kaldırmanın en pratik yollarından biridir. Temel yapı son derece basittir: Facebook’un sharer.php URL’sine mevcut sayfanın adresini parametre olarak geçmek yeterlidir. Ancak gerçek dünya kullanımında buna ek olarak güvenlik kontrolleri, koşullu gösterim mantığı, WooCommerce entegrasyonu ve Open Graph meta etiketleri de işin içine giriyor.

Bu yazıda ele aldığımız yaklaşımları özetlemek gerekirse:

  • Shortcode ile esnek kullanım
  • the_content filtresi ile otomatik ekleme
  • WooCommerce woocommerce_single_product_summary hook’u ile ürün sayfası entegrasyonu
  • Popup pencere için JavaScript entegrasyonu
  • Open Graph meta etiketleri ile zengin paylaşım önizlemesi
  • Child theme kullanımı ile güvenli kod yönetimi

Tüm bu bileşenleri bir araya getirdiğinizde, herhangi bir eklentiden çok daha hafif ve kontrol edilebilir bir çözüme sahip olursunuz. Kodları kendi sitenizin yapısına göre uyarlamaktan çekinmeyin; functions.php‘nin güzelliği tam da bu esneklikte yatıyor.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir