Tạo nút Like để mở khóa nội dung bài viết cho blogger

#Thủ Thuật #Windows #Blogger #Facebook

Tạo nút Like để mở khóa nội dung bài viết cho blogger

Share:
Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách tạo nút Like, Chia sẻ mạng xã hội để mở khóa nội dung bài viết được ẩn đi, điều này giúp tăng lượt tương tác trên mạng xã hội tuy nhiên đôi lúc nó cũng làm cho độc giả cảm thấy khó chịu, vì vậy bạn cần phải cân nhắc trước khi sử dụng nhé.

DEMO

Đây là demo....
Để mở khóa nội dung, bạn vui lòng like hoặc chia sẻ lên mạng xã hội dưới đây.

Hướng dẫn thực hiện

Bước 1 : Đầu tiên, các bạn truy cập vào trang quản trị blogger rồi chọn Chủ đề -> Chỉnh sửa
Bước 2: Sau đó các bạn tìm đến thẻ ]]></b:skin> rồi copy và dán đoạn code sau lên trước nó.
.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;
}
Bước 3: Tiếp theo các bạn tìm đến thẻ đóng </body> rồi dán đoạn code dưới đây lên trước nó.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script><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>
Nếu template bạn đã có thư viện jQuery rồi thì bỏ đoạn màu đỏ đi nhé
Bước 4: Để ẩn nội dung trong bài viết các bạn vào đăng bài mới rồi chuyển sang chế độ soạn thảo bằng HTML, sau đó dán đoạn code sau vào
<div class="hide">
<!--Nội dung bài viết cần ẩn đi-->
...
</div>
<div class="show">
Để mở khóa nội dung, bạn vui lòng like hoặc chia sẻ lên mạng xã hội dưới đây.
<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="bacsiwindows" 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>
Cuối cùng bạn lưu lại và kiểm tra xem đã thành công chưa nhé.

Lời kết

Chỉ với vài bước đơn giản bạn đã có thể buộc độc giả phải like hoặc chia sẻ bài viết của bạn rồi
Chúc các bạn thành công!

CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

4 Nhận xét

Demo đâu? không demo thì ít nhất cũng 1 bức ảnh chứ.

khong lam duoc.
demo: http://demo.linkthuthuat.com/2017/10/like-to-unlick-bsw.html

Bạn xem template đã có đoạn này chưa thì thêm vào nhé <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

không copy được đoạn code :3

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.