Hướng dẫn tạo trang chờ get link tích hợp reCAPTCHA v2 trong Blogger

Nếu các bạn đang có Blog về các chủ đề chia sẻ tài liệu, phần mềm, template, hình ảnh.v.v.., thì đa số các bạn sẽ tìm kiếm cách tạo một trang chờ thông thường là trang tĩnh để lấy link tải sau một khoảng thời gian nhất định.

Hướng dẫn tạo trang chờ get link tích hợp reCAPTCHA v2 trong Blogger

Để tạo được một trang như vậy, yêu cầu bạn cần sử dụng đến script có thể bằng javascript hoặc jquery. Cái này trên mạng cũng chia sẻ khá nhiều code chỉ là nó có phù hợp với mục đích của bạn không thôi. Để góp phần phong phú về code dạng này,  mình cũng viết đoạn code chia sẻ nếu xem demo phù hợp với mục đích của bạn thì các bạn chèn vào trang của mình.

Những đặc điểm của trang chờ get link:

  • Tích hợp Google reCAPTCHA v2 xác thực trước khi chờ get link. Xem cách đăng ký >>
  • Thay link tải bằng id trên địa chỉ trình duyệt.
  • + Ví dụ thông thường link có dạng này

    • https://www.domain-name/p/download.html?url=link+tải

    + Mình sẽ thay bằng link tải bằng id bằng với số cụ thể

    • https://www.domain-name/p/download.html?id=100

    + Nếu bạn không thêm tham số id trên địa chỉ trình duyệt sẽ không thấy reCAPTCHA thay vào đó bằng dòng thông báo “Liên kết tải về không đúng!”
    + Nếu id không bằng mã đã chỉ định sẽ trả về link tải là link trang chủ

  • Thời gian chờ linh động được tính bằng giây có thể tùy chỉnh bằng số thời gian mong muốn
  • + Ví dụ địa chỉ của trang get link có dạng

    • https://www.domain-name/p/download.html?id=100&timer=30
    • 30 là thời gian tính bằng giây được đếm ngược và bạn có thể thay bằng số khác nếu muốn thời gian chờ get link lâu hơn hoặc nhanh hơn
    • Nếu bạn không đặt tham số timer= trên địa chỉ trình duyệt hoặc timer không bằng số sẽ trả về giá trị mặc định là 15 giây

Các bạn xem demo bằng link: https://theme.vietblogdao.com/p/download.html?id=001&timer=20

Cách thực hiện:

Bao gồm 4 bước sau:

1. Chèn code vào trang tĩnh

Các bạn tạo một trang tĩnh mới hoặc chỉnh sửa trang đã có. Trong phần soạn thảo chuyển qua phần HTML chèn hoặc thay thế code cũ bằng đoạn code sau đây:

Copy

<div class="validate-recaptcha">

  <p>Bạn vui lòng tích chọn <b>Tôi không phải là người máy</b></p>

  <div class="g-recaptcha" data-sitekey=" " data-callback="validaterecaptcha"></div>

</div>

<div class='time-wrapper hidden'>

  <p><b>Quá trình tải xuống của bạn sẽ bắt đầu sau giây lát!</b></p>

  <p><span id="timer-countdown">0</span></p>

  <div class="getlink-button"></div>

</div>

<style>

p, .getlink-button, .time-wrapper, .g-recaptcha div {

    text-align:center;

}

.getlink-button a {

    background: #6dab3c;

    border: 1px solid #6dab3c;

    position: relative;

    color: #ffffff;

    font-size: 14px;

    display: inline-block;

    padding: 7px 20px;

    min-width: 70px;

    border-radius: 3px;

}

.g-recaptcha {

    margin-top: 20px

}

.g-recaptcha div {

    width: 100%!important;

}

#timer-countdown {

    margin: 25px 0 30px 0;

    display: inline-block;

    border-radius: 100%;

    width: 120px;

    height: 120px;

    line-height: 120px;

    color: #33b5e5;

    border-radius: 50%;

    border: 2px solid #33b5e5;

    font-size: 60px;

    font-weight: 100;

}

.hidden {

    display: none;

}

</style>

Khi đã chèn code, các bạn lấy pageID trên địa chỉ trình duyệt của trang đang soạn thảo, nó là một dãy số ví dụ 3763531914430739642

Các bạn chọn Xuất bản hoặc Cập nhật trang để tiếp tục làm bước 2

2. Thêm script trong template

Các bạn vào chỉnh sửa HTML của chủ đề kéo xuống cuối cùng tìm đến thẻ đóng </body> các bạn chèn đoạn code sau ngay trước nó

Copy

<b:if cond='data:blog.pageId eq 3763531914430739642'>

  <script async='' defer='' src='https://www.google.com/recaptcha/api.js'/>

  <script>//<![CDATA[

    function GetURLParameter(sParam) {

      var sPageURL = window.location.search.substring(1)

      var sURLVariables = sPageURL.split('&')

      for (var i = 0; i < sURLVariables.length; i++) {

        var sParameterName = sURLVariables[i].split('=')

        if (sParameterName[0] == sParam) {

          return sParameterName[1]

        }

      }

    }

    var id = GetURLParameter('id')

    var get_link;

    if (id == '001') {

     get_link = 'link1';

    } else {

     get_link = '/';

    }

    var timer  =  GetURLParameter('timer')

    if(!timer && typeof timer != 'number') {

      timer = 15;

    }

    if (!id) {

      document.querySelector('.g-recaptcha').classList.add('hidden')

      document.querySelector('.validate-recaptcha p').innerHTML = 'Liên kết tải về không đúng!'

      document.querySelector('.validate-recaptcha p').style.color = 'red'

    } else {

      var validaterecaptcha = function(response) {

        var captcha_response = grecaptcha.getResponse()

        if (captcha_response.length != 0) {

          document.querySelector('.validate-recaptcha').classList.add('hidden')

          document.querySelector('.time-wrapper').classList.remove('hidden')

          var downloadTimer = setInterval(function() {

            document.getElementById('timer-countdown').innerHTML = timer

            timer -= 1

            if(timer <= 0) {

              clearInterval(downloadTimer)

              document.getElementById('timer-countdown').innerHTML = '0'

              document.querySelector('.getlink-button').innerHTML = '<a class="download" href='+ get_link +' target="_blank" rel="noopener nofollow">Get link</a>'

            }

          }, 1000)

        }

      }

    }

  //]]></script>

</b:if>

Cài đặt code:

Mình có đánh dấu các dòng màu đỏ và màu xanh như sau:

Copy

3763531914430739642: pageID của trang chờ get link

001: Mã của link tải do bạn tự đặt

link1: Link tải tương đương với mã bạn đặt

15: Thời gian chờ mặc định nếu trình duyệt không thêm tham số timer bằng số cụ thể hoặc không có

Liên kết tải về không đúng!: Dòng thông báo nếu trình duyệt không thêm tham số id

/: Địa chỉ trang chủ nếu id bị sai

Khi đã cài đặt xong bạn lưu ý về cách thêm link tải

Ví dụ ta có đoạn này cho 1 link

Copy

if (id == '001') {

  get_link = 'link1';

} else {

  get_link = '/';

}

Nếu thêm link2, link3,…,linkn với điệu kiện id bằng 002, 003,…,n ta thêm như sau:

Copy

if (id == '001') {

  get_link = 'link1';

} else if (id == '002') {

  get_link = 'link2';

} else if (id == '003') {

  get_link = 'link3';

} else if (id == 'n') {

  get_link = 'linkn';

} else {

  get_link = '/';

}

3. Lấy link tải

Tại sao bạn phải tách riêng ra thay vì gộp chung trong bước 2? Vì nếu làm như vậy sẽ show ra hết tất cả link tải khi xem nguồn trang hoặc kiểm tra phần tử. Để hạn chế điều đó bạn nên thêm các link tải vào một tệp .js và up lên host free nào đó rồi lấy link chèn vào template.

Giả sử mình sẽ tạo một tệp js và đặt tên nó không liên quan gì đến get link cả nhằm đánh lạc hướng người tò mò. Nội dung bên trong mình sẽ viết như sau:

Copy

var link1 = "Link tải 1",

    link2 = "Link tải 2",

    link3 = "Link tải 3",

    linkn = "Link tải n";

Sau đó mình sẽ up lên host để lấy link js như sau

<script src=’name.js’></script>

Tiếp theo mình sẽ giấu đoạn này vào chỗ người khác ít để ý ví dụ như chèn trong widget chẳng hạn với điều kiện widget này phải được tải ở trang get link

Copy

<b:if cond='data:blog.pageId eq 2302716530615472107'>

  <script src='name.js'/>

</b:if>

Với 2302716530615472107 là pageID của trang get link.

4. Chèn liên kết đến trang get link

Khi bạn đã thêm code rồi cuối cùng chỉ cần thêm link tải vào bài viết với dạng mẫu sau:

urltranggetlink?id=100&timer=30

Ví dụ:

https://www.domain-name/p/download.html?id=001&timer=30

Thay 001 ứng với link1, 002 ứng với link2, 003 ứng với link3, n ứng với linkn

Thay 30 bằng thời gian đếm ngược mà bạn muốn hoặc không bạn bỏ &timer=30 đằng sau id để thời gian mặc định là 15 giây. Lúc đó liên kết đến trang get link chỉ còn dạng:

https://www.domain-name/p/download.html?id=001

KẾT LUẬN

Như vậy mình đã vừa trình bày cách tạo trang chờ get link tích hợp reCAPTCHA v2 trong Blogger. Nếu bạn làm không được hay không hiểu chỗ nào thì comment bên dưới để mình hỗ trợ. Code được mình viết và chia sẻ, nếu bạn nào lấy về đăng lên các trang khác vui lòng ghi nguồn tác giả.

Hãy để lại một câu trả lời bạn muốn

avatar
250
  Subscribe  
Thông báo
Scroll to top
0353.456.495