Hướng dẫn tạo nút chia sẽ bài viết không cần plugin trong WordPress

WordPress có rất nhiều plugin tạo ra các nút chia sẽ bài viết mà hầu như Website nào hiện nay cũng sử dụng, rất tốt cho SEO. Ưu điểm là thao tác cài đặt đơn giản, dễ sử dụng. Nhược điểm là tốn nhiều tài nguyên, hạn chế tùy biến, đặc biệt là các bản Free giới hạn nhiều chức năng mà chỉ có trong bản trã tiền.

Mình sẽ chia sẽ cho các bạn Code mình đang sử dụng, có thể tự chỉnh sửa CSS, hoặc cập nhật các hình thức GET counter (bộ đếm lượt chia sẽ) mà các mạng xã hội cung cấp cho nhà phát triển. Nếu cách diễn đạt và sử dụng từ ngữ của mình không đúng thì các bạn bỏ qua nhé.

Ở đây mình chỉ làm nút chia sẽ trên 3 mạng xã hội phổ biến nhất hiện nay là Facebook, Google + và Twitter. Ai muốn làm thêm những mạng xã hội khác thì có thể tự tùy biến nhé.

DEMO

Các bạn có thể xem bên dưới tiêu đề của bài viết này

CODE

Copy đoạn code bên dưới vào file functions.php trong theme của bạn

<?php
function social_sharing_buttons() {
if(is_singular() || is_home()){
$shortURL =
'http' .
($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://' .
$_SERVER['HTTP_HOST'] .
$_SERVER["REQUEST_URI"]
;
?>
<script type="text/javascript">
$.ajax({
url: "https://api.facebook.com/method/fql.query?query=select%20%20total_count%20from%20link_stat%20where%20url=%22<?php echo $shortURL;?>%22",
dataType: "xml"
}).done(function(data) {
var $xml = $(data),
$title = $xml.find("total_count");
$('span.fb_count').text($title.text());
});
</script>
<script>
jQuery.getJSON("https://cdn.api.twitter.com/1/urls/count.json?url=<?php echo $shortURL;?>&callback=?", function (data) {
jQuery("span.tw_count").text(data.count);
});
</script>
<script type="text/javascript">
// Popup window function
function basicPopup(url) {
popupWindow = window.open(url,'popUpWindow','height=450,width=650,left=0,top=0,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
</script>
<?php
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, "https://plusone.google.com/_/+1/fastbutton?url=".urlencode($shortURL));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
$html = curl_exec ($curl);
curl_close ($curl);
$doc = new DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTML($html);
libxml_use_internal_errors(false);
$counter=$doc->getElementById('aggregateCount');
$share_gg = $counter->nodeValue;
//End Gooogle//
$shortTitle = get_the_title();
$twitterURL = 'https://twitter.com/intent/tweet?text='.$shortTitle.'&amp;url='.$shortURL.'&amp;via=tuanvn88';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$shortURL;
$googleURL = 'https://plus.google.com/share?url='.$shortURL;

$variable = '<div class="clear share-social">';
$variable .= '<a class="share-link share-facebook" href="'.$facebookURL.'" title="Chia sẽ lên Facebook" onclick="basicPopup(this.href);return false"><i class="fa fa-facebook-square"></i><span class="text_share"> Facebook</span></a><span class="fb_count"></span>';
$variable .= '<a class="share-link share-twitter" href="'. $twitterURL .'" title="Chia sẽ lên Twitter" onclick="basicPopup(this.href);return false"><i class="fa fa-twitter"></i><span class="text_share"> Twitter</span></a><span class="tw_count"></span>';
$variable .= '<span class="share_last"><a class="share-link share-googleplus" href="'.$googleURL.'" title="Chia sẽ lên Google" onclick="basicPopup(this.href);return false"><i class="fa fa-google-plus"></i><span class="text_share"> Google+</span></a><span class="gg_count">'.$share_gg.'</span></span>';
$variable .= '</div>';
return $variable;
}else{
return $variable;
}
}
?>

Vào link này download thư viện icon Font Awesome. Giải nén file vừa download và copy thư mục font-awesome-4.4.0 vào theme của bạn

Copy đoạn code này vào thẻ head trong file header.php của theme.

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/font-awesome-4.4.0/css/font-awesome.min.css" />

CSS

.share-buffer{background:#444;}
div.share-buffer:hover,.share-buffer:active{background:#222;}
div.share-social{margin:5px 0 10px 0;-webkit-font-smoothing:antialiased;font-size:12px;}
div.share-social a i {font-size:18px;}
.share-googleplus{background:#D64937;}
.share-googleplus:hover,.share-googleplus:active{background:#b53525;}
a.share-twitter{background:#41B7D8;}
.share-twitter:hover,.share-twitter:active{background:#279ebf;}
a.share-facebook{background:#4769a5;}
.share-facebook:hover,.share-facebook:active{background:#2d4372;}
a.share-link{padding:8px 10px 10px 10px;color:white!important;font-size:12px;margin-right:4px;background-clip:padding-box;border-radius:3px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15);-webkit-border-radius:3px;-webkit-box-shadow:inset 0 -4px 0 rgba(0,0,0,.2);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}
a.share-link:hover,.share-link:active{color:white;}
span.fb_count:before,span.tw_count:before,span.gg_count:before{content:"";position:absolute;left:-5px;top:50%;margin-top:-5px;border-right:6px solid #e6e7e9;border-bottom:6px solid transparent;border-top:6px solid transparent;}
span.fb_count,span.tw_count,span.gg_count{position:relative;background:#e6e7e9;right:0;top:-1px;display:inline-block;padding:6px 8px 6px 8px;border-left-width:0;vertical-align:0;font-size:11px;color:#999;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;text-align:center;margin:5px 10px 5px 5px;}
span.share_last {white-space: nowrap !important;}

Sử dụng

Copy đoạn code bên dưới vào bất cứ nơi đâu bạn muốn hiển thị trong theme của bạn.

<?php echo social_sharing_buttons();?>

Chúc các bạn thành công. Mọi thắc mắc cứ comment bên dưới nhé. Mình sẽ trã lời đầy đủ mọi câu hỏi của các bạn. Nếu thấy bổ ích thì chia sẽ bài viết này giúp mình nhé. Cảm ơn các bạn đã quan tâm theo dõi.