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.
Mình cũng đã giới thiệu cách tạo nút chia sẻ giống phù hợp với dưới tiêu đề bài viết hoặc cuối nội dung bài viết các bạn xem lại Tại đây.
Ở bài này nút chia sẻ chỉ nhỏ hơn phù hợp với nơi đặt ở dưới tiêu đề bài viết, cho những nút giới thiệu...
Bước 1: Kiểm tra trong template đã có thư viện font-awesome, đường link nó thường nằm sau thẻ <head>
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 nơi bạn muốn nút chia sẻ hiện
<div class='ssc'>
</div>
<div class='authorsocial'>
<a class='img-circle1' expr:href="data:post.sharePostUrl + "&target=facebook"" expr:onclick=""window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"" rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' expr:href="data:post.sharePostUrl + "&target=twitter"" expr:onclick=""window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"" rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' expr:href="data:post.sharePostUrl + "&target=googleplus"" expr:onclick=""window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"" rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
loading...
Loading...
0 nhận xét: