Hướng dẫn thêm button yêu cầu chia sẻ trước khi download blogspot

on

Chắc hẳn trong quá trình tìm hiểu về blogspot bạn không ít lần cần down template và phải thực hiện thao tác share để lấy link download. Thật ra điều đó cũng không có gì đúng không nào? đó chỉ là một cách để chúng ta động viên tác giả mà thôi.


Và đến một lúc nào đó, chúng ta cũng cần được mọi người động viên như vậy :))
Vâng, hôm nay mình sẽ chia sẻ với các bạn cách add em đó vào nội dung bài viết của chúng ta.

Bước 1: Cài đặt code cho mục share to see link

1. Vào phần chỉnh sửa HTML của blog
2. Hãy đảm bảo rằng thư viện  jquery.min.js của bạn ở phiên bản 1.10.2 hoặc cao hơn nhé.
3, Nếu blog của bạn chưa có thư viện đó thì hãy add vào bằng đoạn code sau:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
add vào ngay dưới thẻ <head> nhé
4. Bây giờ, tìm thẻ <body> và paste dòng lệnh sau vào bên trên thẻ đó nhé:

<script type='text/javascript'>

//<![CDATA[
/* Facebook */


     var js, fjs = d.getElementsByTagName(s)[0];

(function(d, s, id){


     js = d.createElement(s); js.id = id;

     if (d.getElementById(id)) {return;}


     fjs.parentNode.insertBefore(js, fjs);

     js.src = "//connect.facebook.net/en_US/all.js";


    // init the FB JS SDK

 }(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
    FB.init({


      xfbml      : true                               

      status     : true,                             
    });
    FB.Event.subscribe('edge.create', function(href, widget) {


  window.twttr = (function (d,s,id) {

        $.event.trigger({
            type: "pageShared",
            url: href
        }); 
    });
};
/* Twitter */


  js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);

  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;


    twttr.events.bind('tweet', function (event) {

  return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
        $.event.trigger({


    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

            type: "pageShared",
            url: event.target.baseURI
        });
    });
});
/* Google Plus */
(function() {
    po.src = 'https://apis.google.com/js/plusone.js';


        url: obj.href

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
function plusOned(obj){
    console.log(obj);
    $.event.trigger({
        type: "pageShared",
    });
}

/* Listen for the pageShared event */


    text-align: center;

$(document).on('pageShared',function(e){
    if(e.url == window.location.href){
        $(".secret").show();
        $(".secret-share").hide();
    }
});
//]]>
</script>

<style>
.secret {
 text-align:center;
 display:none
}
 
.secret-share {
    padding: 20px;


.secret-share .fb-like {

    border: 3px solid #ddd;
    background: #f8f8f8;
}

a.download-btn {
    text-transform: uppercase;
    font-size: 22px;
    background: #7b7b7b;
    padding: 10px 20px;
    display: inline-block;
    border: 1px solid #000000;
    text-decoration: none;
    color: #fff;
}



</style>

 margin-top: 0;
 top: -7px;
 position: relative;}

.secret-share .twitter-share-button {
    margin-right: 25px;
}
5.Done! bây giờ bạn save tem lại và sang bước tiếp theo nhé.

Bước 2: Thêm code share to see link vào bài viết

Thao tác chỉ đơn giản là: bạn copy đoạn code dưới vào bài viết thôi


<div class="secret">



<a class="download-btn" href="#">Download</a></div>




<div class="secret-share">



<p>Share via Facebook / Twitter / Google Plus to see Link Download</p>



<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="mybloggerlab" 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>
Bạn thay # bằng link download của bạn và xem thành quả :)

Comments

Post a Comment