Merhaba arkadaşlar;

Sosyal paylaşım butonu sitemizdeki kullanıcıların içerikleri sosyal medya platformlarında paylaşmasına olanak tanıyan kod dizinleridir.

WordPress Eklentisiz Sosyal Paylaşım Butonu Yapımı!
WordPress Eklentisiz Sosyal Paylaşım Butonu Yapımı!

Bu butonlara tıkladığımız zaman bizi ilgili sosyal medya platformuna götürür ve içeriği paylaşmamız için bize paylaşım sayfası sunulur; bizde paylaşımımızı bu doğrultuda gerçekleştiririz.

Sosyal paylaşım butonları sitenizin trafiğini de bir bakıma arttıran unsurlardan birisidir.

Sitenizdeki sosyal paylaşım butonları vasıtasıyla paylaşılan içerikleriniz ilgili platformlarda dikkat çekerse kullanıcılar sizin sitenize yönlenir ve buda sitenizin trafiğinin artmasına neden olur.

İçeriklerinizin sosyal medya platformlarında paylaşılması SEO açısından da önemlidir. Çünkü diğer sitelerden size gelen linkler SEO açısından size artı bir puan kazandırır.

Sizinle paylaştığımız paylaşım butonut kodları WordPress sitenizle tamamen entegredir. Size Paylaşım butonlarının kodlarını ilgili yerlere yapıştırmak kalıyor.

WordPress kullanıcıları bilir, eklentiler bölümünde onlarca “paylaşım butonu eklentileri”  mevcut.

Fakat eklentiler websitemizde gereksiz yük teşkil edeceğinden çoğumuz kaçınırız bu tür eklentileri kurmaktan.

İşte bu yazıda eklentisiz paylaşım butonu nasıl yapılır onu göstereceğiz.

1.Adım Sosyal Paylaşım Butonu

Html dokümantasyonu;

Bu kod dizini paylaşım butonlarının html bölümüdür. Bu kod dizininde paylaşım butonlarını nerede görmek isterseniz oraya kopyalayıp yapıştırabilirsiniz.

<div class="sosyal">
  
  <a class="butnTwitter" href="https://twitter.com/intent/tweet?text=<?php the_title();?>+<?php the_permalink() ?>">Twitter'da Paylaş</a>
  <a class="butnFacebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>">Facebook'ta Paylaş</a>
  <a class="butnWp" href="https://api.whatsapp.com/send?text=<?php the_title();?> <?php the_permalink();?>&url=<?php the_permalink() ;?>">WhatsApp'ta Paylaş</a>
  
</div>

Bu kodları eğer index.php, archive.php,category.php,tag.php’de kullanacaksanız <?php while ?> ile <?php endwhile ?> arasına yerleştiriniz. Eğer single.php veya page.php’de kullanacaksanız görünmesini istediğiniz yere ekleyin.

2. Adım Sosyal Paylaşım Butonu

Css dokümantasyonu

Css kodları; sosyal paylaşım buton için şekil ve tasarım oluşturmanızı sağlar. Bu kod bloğuyla buton larınıza hoş bir görüntü verebilirsiniz.

.sosyal {
  position:relative;
  margin: auto;
  margin-top:15px;
  padding:0;
  width: auto;
	height: auto;
}
.butnTwitter {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.butnTwitter:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.butnFacebook {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #1d4c6b;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.butnFacebook:hover {
  background: #1a577a;
  text-decoration: none;
}

.butnWp {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #44f5a0;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.butnWp:hover {
  background: #07db27;
  text-decoration: none;
}

Bu kodları da style.css dosyasının içine ekleyin ve hepsi bu kadar.

Sosyal paylaşım butonu sitenizin için SEO ve trafik açısından önem arzetmekle beraber sitenizde hoş bir görüntü oluşturur ve kullanıcılar tarafından sevilir.

Sosyal paylaşım butonlarının css dosyasındaki kodları ve html dökümantasyonundaki kod dizinini isteğiniz ve bilginiz doğrultuda düzenleyebilirsiniz. Bu sayede sitenize renk ve kod düzeni açısından entegre etmiş olursunuz.

Burada sadece Twitter, Facebook ve WhatsApp uygulamaları ve platformları için sosyal paylaşım butonu yaptık. İsterseniz Pinterest ve Linkedin gibi sosyal medya platformları içinde yapabilirsiniz.

Herşeyi tamamladıktan sonra sosyal paylaşım butonları böyle görülecektir.

WordPress Eklentisiz Sosyal Paylaşım Butonu Yapımı!
WordPress Eklentisiz Sosyal Paylaşım Butonlarının Son Görüntüsü!

Umarız başarıyla yapmışsınızdır. Eğer yapamadığınız bir yer olursa yorumlarda belirtirsiniz. Biz de seve seve yardımcı oluruz.

İsterseniz okuyabilirsiniz:

WordPress’in ilk .htaccess dosyası!

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter  ve İnstagram‘da da bulabilirsiniz …

WordPress

“WordPress Eklentisiz Sosyal Paylaşım Butonu Yapımı!” için bir cevap

  1. Burak Şahin dedi ki:

    Çok ihtiyacım vardı yararlı oldu teşekkür ederim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir