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

Để bài viết của bạn được chia sẻ ở trên các mạng xã hội thì bạn cần phải viết bài viết hay, lôi cuốn người đọc, hơn nữa phải có hữu ích cho người đọc, nhưng khổ nỗi bài viết có ích rồi nhưng ít ai chụi lại và chia sẻ cho bài viết đó. Vậy hôm nay mình xin giới thiệu với các bạn đến cách thêm button “Like to Unlock” vào bài viết Blogspotnút này có cách thức hoạt động như sau. 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. Vậy là bài viết của bạn được chia sẻ  ra mạng xã hội, thao tác này rất hưu ích cho website của bạn nha cũng như bạn nào làm dịch vụ Seo google thì nên tận dụng cách thức làm này.

blog1

Nào chúng ta bắt tay vào thực hiện nào.

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 để chúng ta sử dụng đây ?

Để 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

blog

Tiếp đó, điền đoạn code dưới đây vào vị trí muốn sử dụng – ở phần này cần các bạn biết HTML một chút, nếu bạn nào chưa rõ thì có thể hỏi bạn biết code website chứ không lại hỏng hết nha.

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

Sau đó các bạn ấn lưu lại, rồi  ra ngoài bài viết xem kết quả của mình có hiện lên nút “Like to Unlock” không nha, nếu chưa hiện, chắc các bạn sai tao tác nào nào đó. Hãy commen ở dưới đây để được trợ giúp. Chúc các bạn thành công.  😛

admin 1 Tháng Tư, 2017 ,
Liên hệ