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