Trước giờ cũng có nhiều bạn hỏi mình mình và muốn có một bài viết hướng dẫn để thực hiện điều này. Làm sao để bắt người dùng Like ở +1 hay Tweet gì đó rồi mới hiện lên nội dung mà họ muốn xem. Hiện tại thì có 2 jQuery plugins khá là hay để giải quyết vấn đề này đó là
Like 2 Unlock và
Social Locker của nhà phát triển OnePress. Nhưng có một điều là chúng có tính phí và giá cũng khá là chua với tiền Việt Nam mình.
Nếu bạn nào có nhu cầu có thể mua và mình sẽ hỗ trợ bạn về cách sử dụng nó trên Blogger thế nào. Còn đối với những bạn không muốn mua thì mình xin chia sẻ với các bạn đoạn mã sau đây, cũng được viết bằng jQuery nhưng không chuyên nghiệp bằng cái trên.
Cụ thể là đoạn mã này nó hiểu vấn đề là like, +1, tweet để hiển thị nội dung, nhưng khi người dùng trở lại trên trang đó thì nó vẫn bắt buộc người dùng làm lại. Tiếp tục nếu người dùng unlike hoặc bỏ +1 thì nó cũng vẫn hiện lên nội dung ẩn như bình thường. Điều thứ 2 là không thể set cho người dùng like, +1 qua trang khác được, nó chỉ sử dụng được cho trang hiện tại
Demo ở đây:
http://jsfiddle.net/an1zvz32/3/show
Cài đặt Like +1 Tweet để hiện nội dung ẩn bằng jQuery
Đây là đoạn mã được viết bằng jQuery do đó để sử dụng được nó thì bạn phải chắc chắn rằng trong template của bạn đã có mã nhúng để nó có thể hoạt động, nếu bạn không chắc thì hãy chèn đoạn mã sau đây lên trên thẻ </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Sau khi chèn xong thì tới lượt bạn chèn đoạn mã này lên trên thẻ ]]></b:skin>
.noi-dung-an{text-align:centerdisplay:none}
.share-de-hien {padding:20px;text-align:center;border:3px solid #ddd}
Tiếp tục đây chính là đoạn mã jQuery được viết ra để thực hiện công việc, bạn hãy chèn nó lên trên thẻ </body> trong template hiện tại
<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){
$(".noi-dung-an").show();
$(".share-de-hien").hide();
}
});
//]]>
</script>
Hướng dẫn sử dụng
Để sử dụng khi đăng bài viết mới bạn chuyển sang soạn thảo bẳng HTML và dán đoạn mã sau vào khu vực bạn muốn đặt nội dung ẩn và các nút chia sẻ (+1, Like, Tweet)
<div class="noi-dung-an">
Nội dụng bị ẩn
</div>
<div class="share-de-hien">
Hãy chia sẻ qua Facebook / Twitter / Google Plus để hiện nội dung bị ẩn<br/>
<span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" data-href="" style="margin-right: 25px;"></span>
<a class="twitter-share-button" data-count="horizontal" data-related="" data-via="" expr:data-text="data:post.title" data-url="" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" data-href=""></span></div>
xong thì lưu lại.
Lời kết
Đoạn mã này nếu nhìn qua thì bạn chắc cũng biết dựa trên những hàm nhỏ viết cho từng đoạn js dùng để chèn các nút chia sẻ qua mạng xã hội, thì nếu người dùng chọn và chia sẻ thành công một nút bất kì nó sẽ tạo ra một trigger có tên là "pageShared", khi "pageShared" xuất hiện thì sẽ có một hàm thường trực quyết định sự xuất hiện của nội dung bị ẩn.
Thủ thuật này thì chủ yếu để những bạn nào muốn tìm hiểu về coding thôi, và hiện tại cũng rất nhiều người đã chia sẻ về cái vụ này rồi, và đẹp hấp dẫn hơn nhiều. Có thể mình sẽ vẫn tiếp tục chia sẻ lại nó ở bài viết sau cho những bạn muốn được mình hướng dẫn. Cám ơn những độc giả đã luôn đọc bài viết và ủng hộ blog của mình trong xuốt thời gian qua :)
Demo cái của bài viết sau:
http://jsfiddle.net/mdccd96d/show/
Belum ada tanggapan untuk "Like +1 Tweet để hiện nội dung ẩn bằng jQuery cho Blogger"
Post a Comment