html-social.php

$url = "http://1fincan.com/?p=3366";
// WordPress kullanıyorsanız mevcut yazı url'sini get_permalink() fonksiyonu ile alabilirsiniz.
$url = get_permalink();

// url'leri encode etmeniz gerek: (örn. / karakteri %2F'ye dönüşür)
$encoded_url = urlencode( $url );

$desc = "HTML ile paylaş butonları oluşturma";

// WordPress kullanıyorsanız mevcut yazının açıklamasını kullanabilirsiniz.
$desc = get_the_content();

// encode etmeliyiz.
$encoded_desc = urlencode( $desc );

$img_url = "http://1fincan.com/wp-content/themes/root/resim/logo.png";

// WordPress kullananlar yazının öne çıkan görselini aşağıdaki gibi alabilir.
// Öne çıkan görsel kullanmıyorsanız şu yazıyı okumanızda fayda var: http://1fincan.com/bilgi/wordpress-first-image-url/
$img_url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') );

// Yine encode ediyoruz.
$encoded_img = urlencode( $img_url );

<div class="share-it">
  <h3>Paylaşmak Güzeldir!</h3>
  <a class="fb-share" href="http://www.facebook.com/sharer/sharer.php?u=<?php echo $encoded_url; ?>" 
    alt="Facebook'ta Paylaş" target="_blank">Facebook'ta Paylaş</a>
    
  <a class="twitter-share" href="https://twitter.com/intent/tweet?url=<?php echo $encoded_url; ?>&text=<?php echo $encoded_desc; ?>" 
    alt="Twitter'da Paylaş" target="_blank">Twitter'da Paylaş</a>
    
  <a class="gplus-share" href="https://plus.google.com/share?url=<?php echo $encoded_url; ?>" 
    alt="Google+'da Paylaş" target="_blank">Google+'da Paylaş</a>
    
  <a class="pinterest-share" href="http://pinterest.com/pin/create/button/?url=<?php echo $encoded_url; ?>&media=<?php echo $encoded_img; ?>&description=<?php echo $encoded_desc; ?>" 
    alt="Pinterest'te Pin'le" target="_blank">Pinterest'te Pin'le</a>
</div>

share-social.css

.share-it {
  display: inline-block;
  padding: 15px 10px;
  margin: 10px;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
}

.share-it h3 {
  display: inline-block;
  font-weight: 700;
  padding-right: 5px
}

.share-it a {
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  color: #fff;
  transition: background-color 0.5s;
}

.share-it a:hover {
  background-color: #444;
}

.share-it a:before {
  font-family: FontAwesome;
  padding-right: 5px;
}

.fb-share {
  background-color: #3b5998
}

.fb-share:before {
  content: '\f09a';
}

.twitter-share {
  background-color: #00aced
}

.twitter-share:before {
  content: '\f099'
}

.gplus-share {
  background-color: #dd4b39
}

.gplus-share:before {
  content: '\f0d5'
}

.pinterest-share {
  background-color: #cb2027
}

.pinterest-share:before {
  content: '\f231'
}