Like +1 Tweet để hiện nội dung ẩn bằng jQuery cho Blogger

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 UnlockSocial 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.

Like +1 Tweet để hiện nội dung ẩn bằng jQuery cho Blogger

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/

6 bình luận

  1. avatar says

    lúc 19:48 21 tháng 8, 2014

    Theo như bạn nói vậy thì cái này sẽ rất bất tiện cho mình và cho người dùng. hix

  2. avatar says

    lúc 19:55 21 tháng 8, 2014

    Sự thất là thế vì code này sơ tương đối sơ xài :) Có thể là mai mình sẻ chia sẻ lại cái tố hơn, nó nhiều người cũng có chia sẻ rồi ^^

    P/S: Đối với mình thì bị ép buộc like hay làm gì đỏ để được thứ mình muốn cũng tương đối là gây khó chịu cho người dùng :D

  3. avatar says

    lúc 23:31 21 tháng 8, 2014

    Sau một đêm vật vã test thử, cuối cùng tạm được như sau: http://www.minh-pham.info/2014/07/cd-tieng-anh-6-thi-diem.html , bữa nào rành thì tớ vọc cái css cho nó quốc tế.
    Cám ơn bạn về bài viết này.

  4. avatar says

    lúc 07:54 22 tháng 8, 2014

    Cái đó quá được rồi :D

  5. avatar says

    lúc 07:28 14 tháng 12, 2015

    nếu mỗi lần vào lại là phải làm lại từ đầu vậy bạn có thể chỉnh lại code để share thôi, ko cần like được ko bạn?

  6. avatar says

    lúc 10:36 14 tháng 12, 2015

    Cài này thì mình cũng không rành lắm, như cuối bài mình cũng có chia sẻ, bài này mình chỉ viết để mọi người thích code có thể hiểu và tham khảo khảo cách hoạt động của nó thôi. Nếu bạn muốn chuyên nghiệp hơn bạn có thể xem qua bài này http://www.kslzone.net/2014/08/hien-noi-dung-khi-like-1-va-tweet.html Cái này thì nhiều người share trên mạng rồi, nó nhiều chức năng hơn, nhưng mình không sử dụng cái này nên cũng ko rành nó customize được nhiều không nữa.

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.