Sosyal Medya Paylaşım Düğmeleri Nasıl Eklenir?

Bu yazıda, sosyal medya paylaşım düğmelerini sitenize nasıl ekleyeceğinizi anlatacağım. İster HTML, ister WordPress teması kullanıyor olun, bu yöntemler her ikisi için de geçerli. Kodlar, sosyal medya platformlarının resmi geliştirici sayfalarından alınmıştır ve güvenilirdir. Ayrıca, platformların kendi sitelerine göz atarak daha fazla bilgi edinebilirsiniz. Kendi projelerimde bu düğmeleri eklerken, kullanıcı etkileşimini artırmanın ne kadar kolay olduğunu fark ettim. Haydi, başlayalım!

Facebook Paylaşım Düğmesi

Facebook paylaşım düğmesini eklemek için aşağıdaki kodu kullanabilirsiniz. Burada değiştirmeniz gereken tek şey data-href=”” parametresinin değeri. Bu, sitenizdeki bir URL olmalı. WordPress kullanıyorsanız, bu kısmı <?php the_permalink(); ?> ile dinamik hale getirebilirsiniz.

<div id="fb-root"></div>
<script>
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v2.4";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-share-button" data-href="http://www.siteniz.com" data-layout="button_count"></div>

Bir blog projesinde bu kodu kullanarak paylaşım düğmesi ekledim ve kullanıcıların içerikleri hızlıca paylaşabilmesi, trafiği artırdı. WordPress’te the_permalink() ile her sayfa için otomatik URL atamak büyük kolaylık sağladı.

Twitter (Tweet) Düğmesi

Twitter paylaşım düğmesi için de data-url=”” parametresini sitenizdeki bir URL ile değiştirmelisiniz. WordPress kullanıyorsanız, bu kısmı <?php the_permalink(); ?> ile doldurabilirsiniz. Ayrıca, data-text=”” parametresine sayfa başlığını, data-via=”” parametresine ise Twitter kullanıcı adınızı ekleyebilirsiniz (örneğin, kendi hesabınız).

<div style="display:inline-block;vertical-align:top">
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.siteniz.com" data-text="Sitenizin Başlığı">Tweet</a>
    <script>
        !function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s); js.id = id;
                js.src = p + '://platform.twitter.com/widgets.js';
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, 'script', 'twitter-wjs');
    </script>
</div>

Bir haber sitesinde Twitter paylaşım düğmesini eklerken data-via ile kendi hesabımı ekledim ve bu, markanın görünürlüğünü artırdı. Başlıkları dinamik hale getirmek için WordPress’te <?php the_title(); ?> kullandım.

Pinterest Pin Düğmesi

Pinterest düğmesi için herhangi bir değişiklik yapmanıza gerek yok. Ancak, JavaScript kodunun sitede yalnızca bir kez eklendiğinden emin olun, aksi takdirde performans sorunları yaşanabilir.

<div style="display:inline-block;vertical-align:top">
    <a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-color="red">
        <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_20.png" />
    </a>
    <script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
</div

Bir portföy sitesinde Pinterest düğmesi eklediğimde, görsel içeriklerin paylaşımı hızla arttı. JavaScript’in tek bir kez yüklendiğinden emin olmak, sayfa yüklenme süresini optimize etti.

LinkedIn Paylaşım Düğmesi

LinkedIn paylaşım düğmesi için de değişiklik yapmanıza gerek yok. Aşağıdaki kod, doğrudan çalışır.

<div style="display:inline-block;vertical-align:top">
    <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
    <script type="IN/Share" data-counter="right"></script>
</div>

Bir profesyonel blogda LinkedIn paylaşım düğmesi eklediğimde, iş odaklı kullanıcıların içeriği paylaşmasıyla ağ büyüdü. Basitliği sayesinde hızlıca entegre oldu.

Ek İpuçları

WordPress için Dinamik Entegrasyon: WordPress kullanıyorsanız, paylaşım düğmelerini temanızın single.php veya page.php gibi şablon dosyalarına ekleyin. the_permalink() ve the_title() gibi WordPress fonksiyonları, URL ve başlıkları otomatik doldurur.
Stil Düzenlemeleri: Düğmelerin görünümünü CSS ile özelleştirerek sitenizin tasarımına uyumlu hale getirebilirsiniz. Örneğin, display:inline-block ile düğmeleri yan yana hizalayabilirsiniz.
Performans İyileştirmesi: JavaScript kodlarını sayfanın footer kısmına eklemek, sayfa yükleme hızını artırabilir.
Test Edin: Düğmeleri ekledikten sonra her platformda test ederek doğru çalıştığından emin olun.

Sonuç

Sosyal medya paylaşım düğmeleri, sitenizin görünürlüğünü ve kullanıcı etkileşimini artırmanın harika bir yolu. HTML veya WordPress fark etmeksizin, bu kodları kullanarak kolayca paylaşım düğmeleri ekleyebilirsiniz. Kendi projelerimde bu düğmeleri entegre ettiğimde, içeriklerin sosyal medyada yayılmasıyla organik trafik gözle görülür şekilde arttı. Siz de bu basit adımları takip ederek sitenizi daha paylaşılabilir hale getirin!

0 0 votes

Makale Puanı