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.
Để 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:
<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ó
<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:
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
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:
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:
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
<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ả.
0 comments for Hướng dẫn tạo trang chờ get link tích hợp reCAPTCHA v2 trong Blogger