WordPress Eklentisiz Sosyal Medya Paylaş Butonu Ekleme

Yazan: Korialstrasz Son Güncelleme: Ara 16, 2017

WordPress site sahipleri için hazırladığımız rehberlere devam ediyoruz. Bu yazımızda ile WordPress sitenize sosyal medya siteleri için paylaş butonları eklemeyi anlatacağız. Bir önceki yazımızda WordPress Eklentisiz Sosyal Medya Butonları eklemeyi göstermiştik.

Yapacağımız işlem bir önceki yazımızda anlattığımız gibi oldukça kolay. Hiçbir eklenti kullanmadan sadece basit birkaç HTML/CSS kodu ile ve temanızın functuion.php dosyasına birkaç küçük kod ekleyeceğiz. Kodları size zaten hazır olarak aşağıda vereceğim.

Sitenize paylaş butonlarını birçok farklı eklenti ile ekleyebilirsiniz. Fakat böylesine kolay bir işlem için eklenti yüklemektense tema dosyanıza bir kaç küçük kod eklemek;

Sitenizin daha hızlı açılmasına (çağırılan dosya sayısı azalacağı için)
Veritabanından daha az sorgu yapılmasına
Eklentilerden kaynaklanabilecek bazı güvenlik açıklarını engellemenize

imkan sağlayacaktır.

Güvenlik ve hız demişken eğer henüz okumadıysanız WordPress Güvenlik Önlemleri ve WordPress Site Hızlandırma Yöntemleri yazılarımızı mutlaka okumanızı okumanızı tavsiye ederiz.

WordPress Site Hızlandırma ile ilgili Diğer Yazılarımız (Yeni Sekmede Açılır)

WordPress Site Hızlandırma Yöntemleri
WordPress AMP Kurulumu
WordPress Eklentisiz Sosyal Medya Butonları Eklemek
WordPress Eklentisiz Sosyal Medya Paylaş Butonları Eklemek
WordPress Yazıları Sayfalara Bölmek
WordPress Tema Seçimi

Mutlaka Okumalısınız (Yeni Sekmede Açılır)

Hazırladığımız butonlar için herhangi bir görsel kullanmayacağız ve butonları CSS ile oluşturacağız. Hazırladığımız butonlar mobil cihazlarla uyumlu olacak. Ayrıca sayfamızı ziyaret eden mobil ziyaretçiler Whatsapp paylaşım butonu da görünecek.

Eklediğimiz butonlar yukarıdaki gibi gözükecek. Mobil cihaz kullanıcıları ek olarak Whatsapp paylaş butonunu da görecekler. CSS üzerinden kendi istediğiniz gibi değişiklikler yaparak farklı butonlar üretebilirsiniz. Sitemizde de şu anda kullandığımız butonları yazının en alt kısmında görebilirsiniz.

Anlatıma başlamadan önce önemli bir hatırlatma yapmakta fayda var. Temanızda değişiklik yapmadan önce temanızın ve sitenizin yedeklerini almanızı tavsiye ederiz.

Not: Eğer sizde sitenizde yazı içine kodlar eklemek istiyorsanız WordPress Yazı İçine Kod Ekleme yazımızı okuyabilirsiniz.

Öncelikle CSS kodlarımızı sizlerle paylaşalım. Ben tüm etiketlerin başında “ogrenio” kelimesini kullandım fakat bu kısmı istediğiniz gibi değiştirebilirsiniz. Değiştirirken dikkat etmeniz gereken nokta ise hem Function.php hem de CSS kodlarının hepsinde bu kısmı değiştirmenizdir.

@media screen and (min-width: 1024px) {
 .ogrenio-whatsapp {
 display: none !important;
 }
}
 
.ogrenio-link {
 padding: 2px 8px 4px 8px !important;
 color: white;
 font-size: 12px;
 border-radius: 2px;
 margin-right: 2px;
 cursor: pointer;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
 -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
 -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
 margin-top: 2px;
 display: inline-block;
 text-decoration: none;
}
 
.ogrenio-link:hover,.ogrenio-link:active {
 color: white;
}
 
.ogrenio-twitter {
 background: #00aced;
}
 
.ogrenio-twitter:hover,.ogrenio-twitter:active {
 background: #0084b4;
}
 
.ogrenio-facebook {
 background: #3B5997;
}
 
.ogrenio-facebook:hover,.ogrenio-facebook:active {
 background: #2d4372;
}
 
.ogrenio-googleplus {
 background: #D64937;
}
 
.ogrenio-googleplus:hover,.ogrenio-googleplus:active {
 background: #b53525;
}
 
.ogrenio-whatsapp {
 background: #43d854;
}
 
.ogrenio-whatsapp:hover,.ogrenio-whatsapp:active {
 background: #009688;
}
 
.ogrenio-social {
 margin: 20px 0px 25px 0px;
 -webkit-font-smoothing: antialiased;
 font-size: 12px;
}

@media screen and (min-width: 1024px) {

.ogrenio-whatsapp {

display: none !important;

}

.ogrenio-link {

padding: 2px 8px 4px 8px !important;

color: white;

font-size: 12px;

border-radius: 2px;

margin-right: 2px;

cursor: pointer;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);

-moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);

-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);

margin-top: 2px;

display: inline-block;

text-decoration: none;

}

.ogrenio-link:hover,.ogrenio-link:active {

color: white;

}

.ogrenio-twitter {

background: #00aced;

}

.ogrenio-twitter:hover,.ogrenio-twitter:active {

background: #0084b4;

}

.ogrenio-facebook {

background: #3B5997;

}

.ogrenio-facebook:hover,.ogrenio-facebook:active {

background: #2d4372;

}

.ogrenio-googleplus {

background: #D64937;

}

.ogrenio-googleplus:hover,.ogrenio-googleplus:active {

background: #b53525;

}

.ogrenio-whatsapp {

background: #43d854;

}

.ogrenio-whatsapp:hover,.ogrenio-whatsapp:active {

background: #009688;

}

.ogrenio-social {

margin: 20px 0px 25px 0px;

-webkit-font-smoothing: antialiased;

font-size: 12px;

}

Bu CSS dosyasını temanıza ait style.css dosyasına eklemelisiniz.

Temanıza ait function.php dosyasına ise aşağıdaki kodları eklemelisiniz. Bu kodlar sayesinde paylaş butonları yazıların ve sayfaların altında çıkacaktır.

function ogrenio_social_sharing_buttons($content) {
 global $post;
 if(is_singular() || is_home()){
 
 // Get current page URL 
 $ogrenioURL = urlencode(get_permalink());
 
 // Get current page title
 $ogrenioTitle = str_replace( ' ', '%20', get_the_title());

// Construct sharing URL without using any script
 $twitterURL = 'https://twitter.com/intent/tweet?text='.$ogrenioTitle.'&amp;url='.$ogrenioURL.'&amp;via=ogrenio';
 $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$ogrenioURL;
 $googleURL = 'https://plus.google.com/share?url='.$ogrenioURL;
 $whatsappURL = 'whatsapp://send?text='.$ogrenioTitle . ' ' . $ogrenioURL;
 
 
 // Add sharing button at the end of page/page content
$content .= '<div class="ogrenio-social">';
$content .= '<h5>Paylas</h5> <a class="ogrenio-link cogrenio-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
$content .= '<a class="ogrenio-link ogrenio-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
$content .= '<a class="ogrenio-link ogrenio-whatsapp" href="'.$whatsappURL.'" target="_blank">WhatsApp</a>';
$content .= '<a class="ogrenio-link ogrenio-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>';
$content .= '</div>';

return $content;
 }else{
 // if not a post/page then don't include sharing button
 return $content;
 }
};
add_filter( 'the_content', 'ogrenio_social_sharing_buttons');

function ogrenio_social_sharing_buttons($content) {

global $post;

if(is_singular() || is_home()){

// Get current page URL

$ogrenioURL = urlencode(get_permalink());

// Get current page title

$ogrenioTitle = str_replace( ' ', '%20', get_the_title());

// Construct sharing URL without using any script

$twitterURL = 'https://twitter.com/intent/tweet?text='.$ogrenioTitle.'&url='.$ogrenioURL.'&via=ogrenio';

$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$ogrenioURL;

$googleURL = 'https://plus.google.com/share?url='.$ogrenioURL;

$whatsappURL = 'whatsapp://send?text='.$ogrenioTitle . ' ' . $ogrenioURL;

// Add sharing button at the end of page/page content

$content .= '<div class="ogrenio-social">';

$content .= '<h5>Paylas</h5> <a class="ogrenio-link cogrenio-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';

$content .= '<a class="ogrenio-link ogrenio-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';

$content .= '<a class="ogrenio-link ogrenio-whatsapp" href="'.$whatsappURL.'" target="_blank">WhatsApp</a>';

$content .= '<a class="ogrenio-link ogrenio-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>';

$content .= '</div>';

return $content;

}else{

// if not a post/page then don't include sharing button

return $content;

}

};

add_filter( 'the_content', 'ogrenio_social_sharing_buttons');

Dosyalarınızı düzenledikten sonra Paylaş butonunun yazılarınızın ve sayfalarınızın sonlarına eklendiğini göreceksiniz.

Takıldığınız veya danışmak istediğiniz kısımlar için yorum yapabilirsiniz. WordPress için hazırladığımız diğer rehberleri okumak için WordPress sayfamızı ziyaret edebilirsiniz.

Yapacağınız değişiklerden kaynaklanacak problemlerden ogrenio.com sorumlu değildir.

Kaynak: http://crunchify.com/how-to-create-social-sharing-button-without-any-plugin-and-script-loading-wordpress-speed-optimization-goal/

4 Yorumlar

muzaffer diyor 2 sene önce
kodlarda bizim eklememiz gereken link vs var mı direk eklesek olur mu?
Cevapla
1. Korialstrasz diyor 2 sene önce
  Merhaba,
  Kodları direk eklemeniz yeterlidir. İyi çalışmalar.
  Cevapla
fatih diyor 2 sene önce
kardeşim benim istediğim şu açılan pencere küçük bir pencere olmalı yeni sayfa vaya aynı sayfada açılmasını istemiyorum bununla alakalı bir çalışma varsa yardımı olursan sevinirim teşekkürler
Cevapla
Murat diyor 4 ay önce
Selam ,
Üstad öncelikle emeğinize sağlık,teşekkürler..
Kodları aynen ekledim lakin bende yazı şeklinde çıktı butonlar görünmüyor,yardımcı olursanız sevinirim..
İyi çalışmalar..
Site adresi:
Cevapla

Cevap bırakın