WordPress’te Sosyal Medya İkonlarını Yazı Başına ve Sonuna Ekleme

Tarafındankomut
0 Comments

WordPress siteni ziyaret eden kullanıcıların içeriğini sosyal medyada paylaşmasını istiyorsan, bunu otomatik hale getirmenin en temiz yolu functions.php üzerinden çalışmak. Plugin yüklemek yerine kendi kodunu yazmak hem daha hafif hem de sitenin üzerinde tam kontrolün olduğu anlamına geliyor. Bu yazıda sosyal medya paylaşım ikonlarını yazı başına ve sonuna nasıl ekleyeceğini, bunu nasıl özelleştireceğini ve gerçek dünyada nasıl kullanacağını adım adım göstereceğim.

Neden functions.php ile Yapalım?

Pek çok WordPress sitesinde “AddThis”, “ShareThis” veya “Social Warfare” gibi eklentiler kullanılıyor. Bu eklentiler işe yarıyor ama beraberinde ekstra JavaScript yükü, harici API çağrıları ve zaman zaman uyumsuzluk sorunları getiriyor. Özellikle performansa dikkat eden siteler için bu durum ciddi bir sorun haline gelebiliyor.

functions.php yolu ise şu avantajları sunuyor:

  • Sıfır eklenti bağımlılığı: Sitenin ağırlığını artırmıyorsun
  • Tam kontrol: Her piksel, her renk, her link senin elinde
  • Tema güncellemelerinden bağımsızlık: Child theme kullanırsan hiçbir güncelleme kodunu ezmez
  • Hız avantajı: Harici script yüklenmiyor, sayfa daha hızlı açılıyor

Şimdi işin teknik kısmına geçelim.

Temel Yapı: the_content Filtresi

WordPress, yazı içeriğini ekrana basmadan önce the_content filtresinden geçirir. Bu filtreye kancalanarak içeriğin başına veya sonuna istediğimiz HTML’i ekleyebiliyoruz.

// functions.php dosyasına eklenecek temel yapı
add_filter('the_content', 'sosyal_medya_ikonlari_ekle');

function sosyal_medya_ikonlari_ekle($content) {
    // Sadece tekil yazılarda göster
    if (is_single() && in_the_loop() && is_main_query()) {
        $ikonlar = sosyal_medya_html_olustur();
        $content = $ikonlar . $content . $ikonlar;
    }
    return $content;
}

Bu yapı çok basit ama işlevsel. is_single() kontrolü sayesinde ikonlar sadece tekil yazı sayfalarında görünüyor, ana sayfada veya kategori arşivlerinde gereksiz yere çıkmıyor. in_the_loop() ve is_main_query() kontrolleri de yanlış yerde tetiklenmesini engelliyor.

Sosyal Medya URL’lerini Oluşturma

Her sosyal medya platformunun paylaşım için kullandığı farklı bir URL yapısı var. Bunları bilmek şart:

  • Facebook: https://www.facebook.com/sharer/sharer.php?u=URL
  • Twitter/X: https://twitter.com/intent/tweet?url=URL&text=BASLIK
  • LinkedIn: https://www.linkedin.com/sharing/share-offsite/?url=URL
  • WhatsApp: https://api.whatsapp.com/send?text=BASLIK URL
  • Telegram: https://t.me/share/url?url=URL&text=BASLIK
  • Pinterest: https://pinterest.com/pin/create/button/?url=URL&media=RESIM&description=BASLIK
  • Reddit: https://reddit.com/submit?url=URL&title=BASLIK
function sosyal_medya_url_olustur() {
    $post_url     = urlencode(get_permalink());
    $post_baslik  = urlencode(get_the_title());
    $post_resim   = urlencode(get_the_post_thumbnail_url(null, 'large'));

    $urls = array(
        'facebook'  => 'https://www.facebook.com/sharer/sharer.php?u=' . $post_url,
        'twitter'   => 'https://twitter.com/intent/tweet?url=' . $post_url . '&text=' . $post_baslik,
        'linkedin'  => 'https://www.linkedin.com/sharing/share-offsite/?url=' . $post_url,
        'whatsapp'  => 'https://api.whatsapp.com/send?text=' . $post_baslik . '%20' . $post_url,
        'telegram'  => 'https://t.me/share/url?url=' . $post_url . '&text=' . $post_baslik,
        'pinterest' => 'https://pinterest.com/pin/create/button/?url=' . $post_url . '&media=' . $post_resim . '&description=' . $post_baslik,
    );

    return $urls;
}

Burada dikkat edilmesi gereken nokta urlencode() fonksiyonu. URL parametresi olarak geçen her değerin encode edilmesi gerekiyor, aksi halde Türkçe karakterler veya özel karakterler içeren başlıklarda link çalışmıyor.

HTML ve CSS ile İkon Yapısını Kurma

Şimdi görsel kısmı oluşturalım. Font Awesome kullanıyorsak ikonları doğrudan class ile çekebiliriz, kullanmıyorsak SVG veya emoji de tercih edebiliriz. Ben burada hem Font Awesome hem de saf CSS yaklaşımını göstereceğim.

function sosyal_medya_html_olustur($pozisyon = 'altta') {
    $urls = sosyal_medya_url_olustur();
    
    $html  = '<div class="sosyal-paylasim-kutusu sosyal-paylasim-' . $pozisyon . '">';
    $html .= '<span class="paylasim-etiketi">Bu yazıyı paylaş:</span>';
    $html .= '<ul class="sosyal-ikon-listesi">';
    
    // Facebook
    $html .= '<li class="sosyal-ikon facebook">';
    $html .= '<a href="' . $urls['facebook'] . '" target="_blank" rel="noopener noreferrer" aria-label="Facebook'ta paylaş">';
    $html .= '<span class="ikon-svg">&#x1F426;</span> Facebook';
    $html .= '</a></li>';
    
    // Twitter/X
    $html .= '<li class="sosyal-ikon twitter">';
    $html .= '<a href="' . $urls['twitter'] . '" target="_blank" rel="noopener noreferrer" aria-label="Twitter'da paylaş">';
    $html .= '<span class="ikon-svg">&#x1D54F;</span> Twitter';
    $html .= '</a></li>';
    
    // WhatsApp
    $html .= '<li class="sosyal-ikon whatsapp">';
    $html .= '<a href="' . $urls['whatsapp'] . '" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp'ta paylaş">';
    $html .= '<span class="ikon-svg">&#x1F4AC;</span> WhatsApp';
    $html .= '</a></li>';
    
    // LinkedIn
    $html .= '<li class="sosyal-ikon linkedin">';
    $html .= '<a href="' . $urls['linkedin'] . '" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn'de paylaş">';
    $html .= '<span class="ikon-svg">&#x1F4BC;</span> LinkedIn';
    $html .= '</a></li>';
    
    $html .= '</ul>';
    $html .= '</div>';
    
    return $html;
}

Emoji yerine gerçek ikonlar kullanmak istiyorsan, temana Font Awesome eklemen gerekiyor. Bunun için functions.php’ye şunu ekliyorsun:

function font_awesome_yukle() {
    wp_enqueue_style(
        'font-awesome',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css',
        array(),
        '6.4.0'
    );
}
add_action('wp_enqueue_scripts', 'font_awesome_yukle');

CSS Stillerini Dinamik Yükleme

Stilleri ayrı bir CSS dosyasına koymak yerine doğrudan PHP’den de inline style olarak ekleyebilirsin. Bu küçük projeler için makul bir yaklaşım:

function sosyal_medya_css_ekle() {
    if (!is_single()) return;
    
    $css = '
    <style type="text/css">
    .sosyal-paylasim-kutusu {
        margin: 20px 0;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #0073aa;
    }
    .paylasim-etiketi {
        display: block;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
        font-size: 14px;
    }
    .sosyal-ikon-listesi {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .sosyal-ikon a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 5px;
        text-decoration: none;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        transition: opacity 0.2s ease;
    }
    .sosyal-ikon a:hover { opacity: 0.85; }
    .sosyal-ikon.facebook a  { background: #1877f2; }
    .sosyal-ikon.twitter a   { background: #1da1f2; }
    .sosyal-ikon.whatsapp a  { background: #25d366; }
    .sosyal-ikon.linkedin a  { background: #0077b5; }
    .sosyal-ikon.telegram a  { background: #2ca5e0; }
    .sosyal-ikon.pinterest a { background: #e60023; }
    @media (max-width: 480px) {
        .sosyal-ikon-listesi { flex-direction: column; }
        .sosyal-ikon a { justify-content: center; }
    }
    </style>
    ';
    
    echo $css;
}
add_action('wp_head', 'sosyal_medya_css_ekle');

Yazı Başına ve Sonuna Ayrı Ayrı Ekleme

Belki başa farklı bir tasarım, sona farklı bir tasarım istiyorsun. Bunu $pozisyon parametresiyle yönetebilirsin:

add_filter('the_content', 'sosyal_medya_ikon_filtresi');

function sosyal_medya_ikon_filtresi($content) {
    if (!is_single() || !in_the_loop() || !is_main_query()) {
        return $content;
    }
    
    // Belirli post type'ları hariç tut
    $excluded_types = array('page', 'product', 'portfolio');
    if (in_array(get_post_type(), $excluded_types)) {
        return $content;
    }
    
    // Belirli kategorileri hariç tut (category ID ile)
    $excluded_cats = array(5, 12); // Hariç tutulacak kategori IDleri
    if (has_category($excluded_cats)) {
        return $content;
    }
    
    $basa_ekle  = sosyal_medya_html_olustur('basa');
    $sona_ekle  = sosyal_medya_html_olustur('sona');
    
    // Başa mini versiyon, sona tam versiyon
    $content = $basa_ekle . $content . $sona_ekle;
    
    return $content;
}

Paylaşım Sayısını Gösterme (Opsiyonel)

Gerçek dünyada insanlar “Bu yazı kaç kez paylaşıldı?” sorusunu sorar. Facebook Graph API artık herkese açık paylaşım sayısı vermiyor ama kendi veritabanında bir sayaç tutabilirsin:

function paylasim_sayaci_guncelle() {
    if (!isset($_POST['post_id']) || !isset($_POST['platform'])) {
        wp_die('Geçersiz istek');
    }
    
    // Nonce kontrolü
    if (!check_ajax_referer('paylasim_nonce', 'nonce', false)) {
        wp_die('Güvenlik kontrolü başarısız');
    }
    
    $post_id  = intval($_POST['post_id']);
    $platform = sanitize_text_field($_POST['platform']);
    
    $izin_verilen = array('facebook', 'twitter', 'whatsapp', 'linkedin');
    if (!in_array($platform, $izin_verilen)) {
        wp_die('Geçersiz platform');
    }
    
    $meta_key = '_paylasim_sayisi_' . $platform;
    $mevcut   = (int) get_post_meta($post_id, $meta_key, true);
    update_post_meta($post_id, $meta_key, $mevcut + 1);
    
    // Toplam paylaşım sayısını da güncelle
    $toplam_key  = '_toplam_paylasim';
    $toplam      = (int) get_post_meta($post_id, $toplam_key, true);
    update_post_meta($post_id, $toplam_key, $toplam + 1);
    
    wp_send_json_success(array('yeni_sayi' => $mevcut + 1));
}
add_action('wp_ajax_paylasim_sayaci', 'paylasim_sayaci_guncelle');
add_action('wp_ajax_nopriv_paylasim_sayaci', 'paylasim_sayaci_guncelle');

Bu AJAX fonksiyonunu çalıştırmak için JavaScript tarafında da bir tetikleyici lazım:

function paylasim_js_ekle() {
    if (!is_single()) return;
    ?>
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var paylasimLinkleri = document.querySelectorAll('.sosyal-ikon a');
        
        paylasimLinkleri.forEach(function(link) {
            link.addEventListener('click', function(e) {
                var platform  = this.closest('.sosyal-ikon').classList[1];
                var postId    = '<?php echo get_the_ID(); ?>';
                var nonce     = '<?php echo wp_create_nonce("paylasim_nonce"); ?>';
                
                // AJAX ile sayacı güncelle
                fetch('<?php echo admin_url("admin-ajax.php"); ?>', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: 'action=paylasim_sayaci&post_id=' + postId + 
                          '&platform=' + platform + '&nonce=' + nonce
                });
            });
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'paylasim_js_ekle');

Shortcode ile Manuel Ekleme

Bazen Gutenberg bloklarının ortasına veya özel bir yere ikon eklemek istersin. Shortcode bunun için ideal:

function sosyal_medya_shortcode($atts) {
    $atts = shortcode_atts(array(
        'pozisyon'  => 'altta',
        'platformlar' => 'facebook,twitter,whatsapp,linkedin',
    ), $atts, 'sosyal_ikonlar');
    
    $platform_listesi = explode(',', $atts['platformlar']);
    $urls             = sosyal_medya_url_olustur();
    
    $html  = '<div class="sosyal-paylasim-kutusu sosyal-shortcode">';
    $html .= '<span class="paylasim-etiketi">Paylaş:</span>';
    $html .= '<ul class="sosyal-ikon-listesi">';
    
    $platform_etiketleri = array(
        'facebook'  => 'Facebook',
        'twitter'   => 'Twitter',
        'whatsapp'  => 'WhatsApp',
        'linkedin'  => 'LinkedIn',
        'telegram'  => 'Telegram',
        'pinterest' => 'Pinterest',
    );
    
    foreach ($platform_listesi as $platform) {
        $platform = trim($platform);
        if (isset($urls[$platform])) {
            $etiket  = isset($platform_etiketleri[$platform]) ? $platform_etiketleri[$platform] : ucfirst($platform);
            $html   .= '<li class="sosyal-ikon ' . esc_attr($platform) . '">';
            $html   .= '<a href="' . esc_url($urls[$platform]) . '" target="_blank" rel="noopener noreferrer">';
            $html   .= $etiket . '</a></li>';
        }
    }
    
    $html .= '</ul></div>';
    
    return $html;
}
add_shortcode('sosyal_ikonlar', 'sosyal_medya_shortcode');

Kullanımı şöyle:

// Yazı editörüne şunu yaz:
[sosyal_ikonlar]

// Sadece belirli platformlarla:
[sosyal_ikonlar platformlar="facebook,whatsapp"]

// Özel pozisyonla:
[sosyal_ikonlar pozisyon="ust" platformlar="twitter,linkedin,telegram"]

Gelişmiş Senaryo: WooCommerce Ürün Sayfaları

Eğer sitenin WooCommerce kullanıyorsa, ürün sayfalarına da paylaşım ikonları eklemek isteyebilirsin. the_content filtresi ürün sayfalarında da çalışır ama daha temiz yaklaşım hook kullanmak:

function woocommerce_urun_paylasim_ikonlari() {
    // Sadece tekil ürün sayfalarında göster
    if (!is_product()) return;
    
    $post_url    = urlencode(get_permalink());
    $post_baslik = urlencode(get_the_title());
    $urun_fiyati = get_post_meta(get_the_ID(), '_price', true);
    
    // Ürüne özel tweet metni
    $tweet_metni = urlencode(get_the_title() . ' - ' . get_woocommerce_currency_symbol() . $urun_fiyati . ' fiyatıyla satışta!');
    
    $twitter_url = 'https://twitter.com/intent/tweet?url=' . $post_url . '&text=' . $tweet_metni;
    $fb_url      = 'https://www.facebook.com/sharer/sharer.php?u=' . $post_url;
    $wa_url      = 'https://api.whatsapp.com/send?text=' . $tweet_metni . '%20' . $post_url;
    
    echo '<div class="urun-paylasim">';
    echo '<strong>Bu ürünü paylaş:</strong>';
    echo '<a href="' . esc_url($fb_url) . '" class="urun-paylasim-btn fb" target="_blank">Facebook</a>';
    echo '<a href="' . esc_url($twitter_url) . '" class="urun-paylasim-btn tw" target="_blank">Twitter</a>';
    echo '<a href="' . esc_url($wa_url) . '" class="urun-paylasim-btn wa" target="_blank">WhatsApp</a>';
    echo '</div>';
}
add_action('woocommerce_single_product_summary', 'woocommerce_urun_paylasim_ikonlari', 55);
// 55 = fiyat (10) ve sepet butonundan (30) sonra gelir

Dikkat Edilmesi Gereken Noktalar

Kod yazarken göz ardı edilmemesi gereken birkaç konu var:

  • rel="noopener noreferrer": target="_blank" kullanan her linke bu attribute eklenmelidir. Güvenlik açığını kapatır.
  • esc_url(): URL’leri her zaman bu fonksiyonla filtrele. XSS saldırılarına karşı temel savunma hattı.
  • sanitize_text_field(): Kullanıcıdan veya POST verilerinden gelen metinleri temizlemek için kullan.
  • urlencode() vs rawurlencode(): Sosyal medya URL’leri için genellikle urlencode() yeterli ama bazı platformlar rawurlencode() ile daha iyi çalışıyor.
  • Child theme kullanımı: functions.php değişikliklerini daima child theme üzerinden yap. Yoksa ana tema güncellendiğinde tüm kodun gidebilir.
  • is_main_query() kontrolü: Bu kontrol olmadan bazı sayfalarda ikonlar beklenmedik yerlerde çıkabiliyor.
  • Mobil uyumluluk: WhatsApp ve Telegram butonları masaüstünde de çalışıyor ama kullanıcı deneyimi mobilde çok daha iyi. CSS ile mobil ve masaüstü görünümlerini ayrı yönetmek mantıklı.

Performans İpuçları

Birkaç küçük optimizasyon ile bu kodu daha verimli çalıştırabilirsin:

  • get_permalink() ve get_the_title() fonksiyonlarını her çağrıda tekrar tekrar çalıştırmak yerine sonuçları değişkenlerde sakla
  • CSS’i inline yazmak yerine wp_enqueue_style() ile ayrı bir dosyadan yükle ve tarayıcı önbelleğinden faydalandır
  • Font Awesome gibi büyük kütüphaneleri sadece ihtiyaç duyulan sayfalarda yükle, tüm sitede değil
  • SVG ikonları kullanıyorsan bunları sprite olarak birleştir

Sonuç

Gördüğün gibi WordPress’te sosyal medya paylaşım ikonları eklemek için plugin yüklemeye gerek yok. the_content filtresi, birkaç yardımcı fonksiyon ve biraz CSS ile hem daha hafif hem de tamamen kontrol edilebilir bir yapı kurabiliyorsun.

Temel akışı hatırlatmak gerekirse: the_content filtresine kancalanıyorsun, is_single() ile sayfayı doğruluyorsun, platform URL’lerini oluşturuyorsun ve HTML çıktısını içeriğin başına ya da sonuna yapıştırıyorsun. Shortcode versiyonu ise sana editör içinde esnek kullanım imkanı veriyor.

WooCommerce entegrasyonu için ise the_content yerine WooCommerce’in kendi hook sistemini kullanmak çok daha doğru bir yaklaşım. woocommerce_single_product_summary hook’u ile hem konum kontrolü hem de tema uyumluluğu konusunda çok daha iyi bir sonuç alıyorsun.

Kodu önce staging ortamında test et, sonra production’a al. Özellikle AJAX sayaç kısmını ekleyeceksen nonce kontrolünü ihmal etme, güvenlik her zaman önce gelir.

Bir yanıt yazın

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