Cách thêm button “Like to Unlock” vào bài viết Blogspot

Bạn có biết rằng, hầu hết mọi người chỉ đọc bài viết rồi rời đi mà không bao giờ like hoặc chia sẻ nội dung đó ?

Bạn có muốn khuyến khích mọi người like hoặc chia sẻ bài viết của bạn ?

Đây là giải pháp dành cho bạn. Trong bài viết này, tôi sẽ chia sẻ cách thêm button “Like to Unlock” vào bài viết Blogspot nhanh chóng và dễ dàng.

Button "Like to Unlock"

Cách thức hoạt động của button “Like to Unlock” này khá đơn giản. Cụ thể, bạn sẽ yêu cầu người đọc like bài viết của bạn để được xem nội dung đã bị ẩn. Button này sẽ sử dụng 3 mạng xã hội phổ biến nhất hiện nay là Facebook, Twitter và Google Plus.

Cách thêm button “Like to Unlock” vào bài viết Blogspot

Trước khi bắt đầu, tôi khuyên các bạn nên backup lại giao diện hiện tại của blog để tránh những sai sót không đáng có. Còn nếu các bạn chưa rõ về cách sử dụng Blogger thì có thể xem seri blogger cơ bản trên blog của mình

Let Start !!

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'/>

Nếu bạn nào đã từng thêm thư viện jQuery vào blog rồi thì có thể bỏ qua bước này

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;
}

Làm sao để sử dụng ?

Để thêm button “Like to Unlock” vào bài viết, đầu tiên hãy chuyển sang chế độ soạn thảo HTML

1

Tiếp đó, điền đoạn code dưới đây vào vị trí muốn sử dụng

<div class="hide">
..........
</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>

trong đó : …….. là phần nội dung sẽ bị ẩn đi

Cuối cùng, hãy xuất bản bài viết. Bây giờ, để xem phần nội dung bị ẩn đi, người dùng sẽ buộc phải like, twitter, +1 bài viết của bạn.

Chúc các bạn thành công

Đọc nhiều tuần qua:

29 thoughts on “Cách thêm button “Like to Unlock” vào bài viết Blogspot

  1. Hậu says:

    Môc ơi cho mình hỏi: Khi mình up template của nước ngoài cho blog của mình thì có nhiều từ tiếng anh trong đó. ví dụ: “Load More Post” hoặc “View More About ánh sáng”
    Mình tìm các cụm từ này trong chỉnh sửa mẫu mà không thấy để sửa. Nhờ Ad chỉ cách sửa với ạ. Cám ơn nhiều.

  2. QThangdotnet says:

    Like một đầu, load lại trang thì hiện đã like nhưng nội dung vẫn bị ẩn. Bấm Twiter và G+ chỉ cần bấm nhưng không cần chia sẻ thì nội dung đã hiện lên. Nếu có thể nhớ được thì ok nhưng cả 3 đều ko nhớ, load lại trang thì nội dung đã like, +1, twiter lần đầu vẫn bị ẩn? Mong mộc fix lại nhé!

  3. IT-SharePro says:

    Cho mình hỏi “Nếu bạn nào đã từng thêm thư viện jQuery vào blog rồi thì có thể bỏ qua bước này”
    Có nghĩa là mình cài jQuery phiên bản khác vẫn được đúng không ạ. Chẳng hạn mình tìm thấy dòng này trong template “jquery/1.7.1”

  4. IT-SharePro says:

    Mình test trên blog của mình thì mình thấy nó vẫn hiện nội dung muốn ẩn, và phía dưới nội dung ẩn đó chính là biểu tượng 2 button chứ k phải 3 button ( thiếu button facebook ). Có thể coi lại còn sử dụng được k ạ?

    • Mộc says:

      Bạn thử xóa hai đoạn code bên dưới đây đi xem có được không nhé.

      /* 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
            });
        }

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *