Bạn muốn xem:
Thói quen của người dùng thường đọc một bài viết dù hay hoặc không hay thì họ đều thường không có thói quen like hay chia sẻ bài viết đó. Vì vậy nên mình sẽ hướng dẫn tạo nút like, share để người đọc like nếu có nhu cầu đọc tiếp nội dung bài viết. ( Bài viết này tổng hợp từ mocgin )
Nếu bạn có đoạn script này rồi thì không cần chèn thêm nhé!
Bước 2 : Tiếp theo, hãy thêm đoạn code dưới đây vào phía trên thẻ đóng </body>
Bước 1 : Đầu tiên, bạn cần thêm thư viện jQuery vào blog bằng cách thêm đoạn sau vào phía dưới thẻ <head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
Bước 2 : Tiếp theo, hãy thêm đoạn code dưới đây vào phía trên thẻ đóng </body>
<script type='text/javascript'>
//<![CDATA[
/* Facebook */
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
status : true,
xfbml : true
});
FB.Event.subscribe('edge.create', function(href, widget) {
$.event.trigger({
type: "pageShared",
url: href
});
});
};
/* Twitter */
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
twttr.events.bind('tweet', function (event) {
$.event.trigger({
type: "pageShared",
url: event.target.baseURI
});
});
});
/* Google Plus */
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function plusOned(obj){
console.log(obj);
$.event.trigger({
type: "pageShared",
url: obj.href
});
}
/* Listen for the pageShared event */
$(document).on('pageShared',function(e){
if(e.url == window.location.href){
$(".hide").show();
$(".show").hide();
}
});
//]]>
</script>
Bước 3 : Thêm đoạn code dưới đây vào phía trên thẻ ]]></b:skin>.hide {
display: none;
background: #f9f9f9;
color: #111;
border-radius: 5px;
border-bottom: 4px solid #f1f1f1;
padding: 20px;
}
.show {
padding: 20px;
background: #f9f9f9;
color: #111;
border-radius: 5px;
border-bottom: 4px solid #f1f1f1;
text-align: center;
}
.show .fb-like {
margin-top: 0;
top: -7px;
position: relative;
}
.show .twitter-share-button {
margin-right: 25px;
}
Ok, đến đây là bạn đã chỉnh xong, để có thể sử dụng thì khi đăng bài, bạn cần chú ý chuyển sang chế độ soạn thảo html. Sau đó, bạn sẽ chèn một đoạn ngắn quan trọng vào trong đoạn code sau.<div class="hide"> NỘI DUNG </div> <div class="show"> To unlock the content, use one of the social buttons below. Thank you for your support and love. <span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="doiguocmoc" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span></div>Như vậy là đã xong rồi nhé, người dùng muốn xem đoạn NỘI DUNG sẽ phải like hoặc share để xem đoạn nội dung này
loading...
Loading...
0 nhận xét: