Bạn muốn xem:
Nút chia sẻ bài viết lên mạng xã hội Facebook, Twitter và Google Plus là một trong những yếu tố quan trọng và không thể thiếu của mỗi blog, hiện nay có rất nhiều dịch vụ hỗ trợ chèn nút chia sẻ bài viết vào blog phải kể đến như sharethis, addthis,...hay sử dụng nút chính chủ của Facebook, Twitter và Google Plus và cách thêm vào cũng rất đơn giản. Nhưng đa phần các bạn có thể thấy khi chúng ta thêm các nút của các dịch vụ này đều bị chặn bởi plugin quảng cáo khiến cho bài viết của chúng ta mất đi cơ hội chia sẻ qua đó cũng mất đi sự tương tác.
Như vậy chúng ta có thể thêm thủ công và phương pháp sẽ khó hơn so với sử dụng dịch vụ có sẵn nhưng ngược lại các nút này sẽ không bị plugin quảng cáo chặn và một ưu điểm nữa là chúng ta có thể tùy biến css theo sở thích của mỗi người. Phần khó nhất là lấy được số lượt chia sẻ của mỗi nút, do tôi đã viết sẵn các bạn chỉ cần làm theo các bước dưới đây
Bước 1: Kiểm tra trong template đã có thư viện font-awesome, đường link nó thường nằm dưới thẻ <head> có dạng
Nếu chưa có bạn thêm vô hoặc có thể sử dụng đoạn trên thay thế
Bước 2: Thêm css trước thẻ </b:skin>
Bước 3: Thêm javascript vào trước thẻ đóng </body>
Bước 4: Thêm đoạn code chia sẻ vào trong bài viết thường là dưới post-footer-line-1 hoặc post-footer-line-2
Hoặc vào bố cục tạo một widget HTML/Javascript mới và thêm đoạn code trên vào, ưu điểm khi bạn thêm widget nếu trong bài viết nút sẽ chia sẻ url bài viết, nếu ngoài trang chủ nút sẽ chia sẻ url trang chủ và số lượt chia sẻ cũng thay đổi tùy theo vị trí mà widget hiển thị
Bước 5: Đăng ký dịch vụ opensharecount để lấy lượt chia sẻ twitter
Dịch vụ Twitter đã chặn số lượt chia sẻ cách đây mấy năm trước do vậy nếu bạn muốn hiển thị lại số lượt chia sẻ bạn phải đăng kí qua dịch vụ thứ 3 và có vài dịch vụ làm được điều này mình thấy opensharecount là dịch vụ ok nhất. Cách đăng ký bạn chỉ cần truy cập website điền email, mật khẩu và địa chỉ blog của bạn và tất nhiên là bạn phải có tài khoản twitter rồi. Nói nôm na là chúng ta cho phép opensharecount sử dụng dịch vụ twitter.
Khi đăng ký xong bạn không phải làm gì cả vì đoạn javascript trên đã tự thêm rồi, lưu ý dịch vụ chỉ bắt đầu tính lượt chia sẻ ở những bài viết sau khi bạn thêm đoạn javascript ở trên vào, và một lưu ý nữa về cách tính số lượt của Facebook sẽ cộng cả lượt like và chia sẻ bài viết.
Trên đây là 5 bước thêm nút chia sẻ bài viết với số đếm lượt đã chia sẻ bài viết, nếu bạn thấy cần thiết thì nên thêm vào và cuối cùng mình xin nhắc lại khi bạn thêm nút này sẽ không bị quảng cáo chặn và cũng không ảnh hưởng tới tốc độ tải trang.
Như vậy chúng ta có thể thêm thủ công và phương pháp sẽ khó hơn so với sử dụng dịch vụ có sẵn nhưng ngược lại các nút này sẽ không bị plugin quảng cáo chặn và một ưu điểm nữa là chúng ta có thể tùy biến css theo sở thích của mỗi người. Phần khó nhất là lấy được số lượt chia sẻ của mỗi nút, do tôi đã viết sẵn các bạn chỉ cần làm theo các bước dưới đây
Bước 1: Kiểm tra trong template đã có thư viện font-awesome, đường link nó thường nằm dưới thẻ <head> có dạng
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Nếu chưa có bạn thêm vô hoặc có thể sử dụng đoạn trên thay thế
Bước 2: Thêm css trước thẻ </b:skin>
.ssc{
display: inline-block;
position: relative;
margin-top: 15px;
margin-bottom: 15px;
}
.facebook, .twitter, .google-plus {
float: left;
width: 190px;
padding: 7px 10px;
border-radius: 2px;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px -1px rgba(45,60,72,0.5);
display: inline-block !important;
position: relative;
text-shadow: 0 1px 1px rgba(255,255,255,.35);
color: #fff;
cursor: pointer;
margin-right: 5px;
margin-bottom: 5px;
}
.facebook {
background-color: #4267b2;
border: 1px solid #4267b2;
}
.twitter {
background-color: #00aced;
border: 1px solid #00aced;
}
.google-plus {
border: 1px solid #dd4b39;
}
.facebook:hover, .twitter:hover, .google-plus:hover {
color: #fff;
}
Bước 3: Thêm javascript vào trước thẻ đóng </body>
<script>
var uri = location.href;
var getFacebookCount = function () {
$.getJSON('https://graph.facebook.com/'+uri, function(data){
var facebookShares = data.share.share_count;
console.log(data);
if (facebookShares) {
$('.fb-counter').append(facebookShares);
} else {
$('.fb-counter').append(0);
}
});
};
getFacebookCount();
var getTwitterCount = function () {
$.getJSON('http://opensharecount.com/count.json?url='+uri, function(data){
var twitterShares = data.count;
if (data.count) {
$('.tw-counter').append(twitterShares);
} else {
$('.tw-counter').append(0);
}
});
};
getTwitterCount();
$.ajax({
type: 'POST',
url: 'https://clients6.google.com/rpc',
processData: true,
contentType: 'application/json',
data: JSON.stringify({
'method': 'pos.plusones.get',
'id': uri,
'params': {
'nolog': true,
'id': uri,
'source': 'widget',
'userId': '@viewer',
'groupId': '@self'
},
'jsonrpc': '2.0',
'key': 'p',
'apiVersion': 'v1'
}),
success: function(googleShares) {
$('.gl-counter').append(googleShares.result.metadata.globalCounts.count);
}
});
</script>
Bước 4: Thêm đoạn code chia sẻ vào trong bài viết thường là dưới post-footer-line-1 hoặc post-footer-line-2
<div class='ssc'> <a class="facebook" expr:href="data:post.sharePostUrl + "&target=facebook"" expr:onclick=""window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"" title="Share on Facebook" target="_blank"><i class="fa fa-facebook" style="font-size: 21px; vertical-align: middle;"></i>&nbsp;Share on Facebook (<span class="fb-counter"></span>)</a> <a class="twitter" expr:href="data:post.sharePostUrl + "&target=twitter"" expr:onclick=""window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"" title="Share on Twitter" target="_blank"><i class="fa fa-twitter" style="font-size: 21px; vertical-align: middle;"></i>&nbsp;Share on Twitter (<span class="tw-counter"></span>)</a> <a class="google-plus" expr:href="data:post.sharePostUrl + "&target=googleplus"" expr:onclick=""window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"" title="Share on Google+" target="_blank"><i class="fa fa-google-plus" style="font-size: 21px; vertical-align: middle;"></i>&nbsp;Share on Google+ (<span class="gl-counter"></span>)</a> </div>
Hoặc vào bố cục tạo một widget HTML/Javascript mới và thêm đoạn code trên vào, ưu điểm khi bạn thêm widget nếu trong bài viết nút sẽ chia sẻ url bài viết, nếu ngoài trang chủ nút sẽ chia sẻ url trang chủ và số lượt chia sẻ cũng thay đổi tùy theo vị trí mà widget hiển thị
Bước 5: Đăng ký dịch vụ opensharecount để lấy lượt chia sẻ twitter
Dịch vụ Twitter đã chặn số lượt chia sẻ cách đây mấy năm trước do vậy nếu bạn muốn hiển thị lại số lượt chia sẻ bạn phải đăng kí qua dịch vụ thứ 3 và có vài dịch vụ làm được điều này mình thấy opensharecount là dịch vụ ok nhất. Cách đăng ký bạn chỉ cần truy cập website điền email, mật khẩu và địa chỉ blog của bạn và tất nhiên là bạn phải có tài khoản twitter rồi. Nói nôm na là chúng ta cho phép opensharecount sử dụng dịch vụ twitter.
Khi đăng ký xong bạn không phải làm gì cả vì đoạn javascript trên đã tự thêm rồi, lưu ý dịch vụ chỉ bắt đầu tính lượt chia sẻ ở những bài viết sau khi bạn thêm đoạn javascript ở trên vào, và một lưu ý nữa về cách tính số lượt của Facebook sẽ cộng cả lượt like và chia sẻ bài viết.
Trên đây là 5 bước thêm nút chia sẻ bài viết với số đếm lượt đã chia sẻ bài viết, nếu bạn thấy cần thiết thì nên thêm vào và cuối cùng mình xin nhắc lại khi bạn thêm nút này sẽ không bị quảng cáo chặn và cũng không ảnh hưởng tới tốc độ tải trang.
loading...
Loading...
0 nhận xét: