WordPresse eklentisiz sosyal paylaşım butonları ekleyelim



Sosyal paylaşım butonları sayfa trafiğini arttırmada önemi bir rol üstlenir hale geldi , Sizde WordPress kullanıyor ve yazılarınızın sonunda facebook , twitter ... gibi ağlarda paylaş butonları


eklemek istiyorsanız bunu manuel ve hiçbir plugin kullanmadan kolaylıkla gerçekleştirebilirsiniz , Neden pluginsiz derseniz şöyle cevap vereyim ; Pluginlerin sayfa yüklenmesi sırasında negatif etkileri var veritanabına ekstra yük getiriyorlar ve en önemlisi sizden habersiz istetiksel bilgiler topluyorlar , evet yanlış duymadınız mesela benim bu iş için kullandığım pluginin ismi : Share Buttons by Lockerz / AddToAny , birkaçgündür wordpress optimizasyonu üzerinde çalışırken kullandığım online Load analiz sitelerinde sayfa yüklenmesi sırasında gecikmeye neden olan bir cookie dikkatimi çekti , dedim bu neyin nesi acaba ismi belli ; kullandığım sosyal paylaşım butonu plugini iyide bunun cookie ile ne alakası olabilir diye düşünmeye kalmadan olayı anladım kısa bir araştırmadan sonra
settings > Addtoany > Additional Options kısmına gidip eğer oraya aşağıdaki kodu yazmazssak

a2a_config.no_3p=1;

Sayfamıza her gelen kullanıcı hakkında detaylı bilgi toplandığı sonrada bunların reklam şirketlerine satıldığını öğrendim , işe bak hadi bu pluginin coderi insaflı ve bunu wordpress blog larında bir soru üzerine açıklamıs ya diğerleri ? denediğim bedava sosyal paylaşım butonu pluginlerinin hepsinde aynı duruma rastladım işn kötüsü kimisi bu kırılmasın diye şifrelemiş , herneyse konumuza dönersek gelin kendimiz yapalım ve kafamız rahat olsun ve sayfa yüklenmesi hafiflesin , bu uygulama javascript içermemektedir.

1. öncelikle WordPressimizin stylesheetine ki yeri wp-content\themes\tema ismi\style.css dedir , gidip style.css yi notepad ile açıp aşağıdaki Css kodunu ekleyeceğiz

.social_icon {
    background:url("img/sprite.png");
    display:block;
    width:33px;
    float:left;
    margin:0 3px 0 0;
    height:32px;
    opacity:0.8;
    filter:alpha(opacity=80);
  }
  .social_icon:hover {
    opacity:1;
    filter:alpha(opacity=100)
  }
  .social_icon.twitter {
    background-position:-33px 0;
  }
  .social_icon.googleplus {
    background-position:-99px 0;
  }
  .social_icon.print {
    background-position:-66px 0;
  }

üstteki kodda dikkat edilmesi gereken yer img/ kısmıdır sizde bu kısım images vs. olabilir

2. Aşağıdaki resmi temanızın /img/ (sizde images vs olabilir) klasörüne atın wp-content\themes\temanızın ismi\img

Share icon resmini indir

2. single.php klasörünü açıp sizin için uygun bir yerine (Her temada farklı olabilir deneyerek bulun) aşağıdaki kodu yerleştirin

<div class='social'>
  <a href='https://www.facebook.com/sharer.php?u=<?php the_permalink() ?>' class='social_icon facebook'  rel="nofollow"></a>
  <a href='https://twitter.com/share?url=<?php the_permalink() ?>' class='social_icon twitter'  rel="nofollow"></a>
  <a class='social_icon googleplus' href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php the_permalink() ?>"  rel="nofollow" ></a>
  <a href='javascript:window.print()' class='social_icon print'></a>
  <div style='clear:both'></div>
</div>

Güle güle kullanın


2 Yorum Var
  1. Avatar for Velociraptor
  2. Avatar for UsTa

Yorum Ekle

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

Captcha