Bài viết này hướng dẫn tạo trang Chia sẻ để tải nội dung, gồm 2 bước Chia sẻ, dễ dàng tùy chỉnh nội dung tải về và khó để dò ra liên kết tải xuống nếu chưa bấm Chia sẻ. Bạn có thể áp dụng bài viết này để tăng tương tác của người dùng với các trang Mạng xã hội của mình.
Để thực hành bài viết này, các bạn cần:
Giới thiệu
Màn hình Share on Facebook.
Sau khi bấm, hiện lên màn hình Share via Gmail.
Cuối cùng là liên kết tải xuống nội dung.
Bắt đầu
Tạo thư mục thank-you trong htdocs như sau:
thank-you/ ├── css/ │ ├── main.css ├── data/ │ ├── url.txt ├── img/ │ ├── bg.png │ ├── favicon.ico │ ├── quote.jpg │ ├── tick.png ├── js/ │ ├── main.js ├── index.html
Trong đó, url.txt chứa đường dẫn nội dung tải xuống, thư mục img tải về tại đây.
HTML
Ở tập tin index.html.
<!doctype html>
<html class="no-js" lang="vi">
<head>
<meta charset="utf-8">
<title>Thank You | Init HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&subset=vietnamese">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
<section class="container main-content text-center">
<h1 class="title">Get full VIP access immediately</h1>
<hr class="small-divider">
<p class="description">PDF of 15+ automation hacks you can use today without writing a line of code</p>
<div id="step-1" class="step">
<div class="tweet-box">
<p>Join me and thousands of others. Master technical marketing with 10 free, actionable email lessons. #GrowthHacking bit.ly/prgming4mrktrs</p>
</div>
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.inithtml.com%2F">
<button class="tweet-button" id="tweet-button"><span class="fa fa-facebook-official"></span> Share on Facebook</button>
</a>
</div>
<div id="step-2" class="step hidden">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-success active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
<span class="sr-only">50%</span>
</div>
You're almost there!
</div>
<div class="share-buttons-box">
<div class="share-twitter-box">
<div class="share-twitter-background">
<div class="share-twitter-box-header"><b>Step 1:</b> Share on Facebook</div>
<div class="share-twitter-box-text">Let your following know about Programming For Marketers</div>
<button class="tweet-button-grey"><span class="fa fa-facebook-official"></span> Share</button>
</div>
</div>
<div class="share-email-box">
<div class="share-email-box-header"><b>Step 2:</b> Email a Friend</div>
<div class="share-email-box-text">Email one friend about Programming For Marketers</div>
<a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to&su=Check out this free course I'm taking&body=Hey%21%20I%27m%20learning%20Technical%20Marketing%20through%20a%20free%2010%20lesson%20email%20course.%20It%20focuses%20on%20skills%20and%20hacks%20you%20can%20use%20with%20no%20technical%20background%20to%20grow%20your%20online%20following.%0D%0A%0D%0AA%20few%20example%20lessons%20are%3A%0D%0A%20-%20Building%20a%20Viral%20Referral%20Campaigns%0D%0A%20-%20Automating%20Twitter%20Following%0D%0A%20-%20Marketing%20with%20APIs%0D%0A%20-%20How%20to%20use%20SQL%20to%20understand%20your%20customers%0D%0A%0D%0AYou%20should%20join%20me%20%40%20www.programmingformarketers.com%21" target="_blank">
<button class="email-button-blue" id="prompt-two-button"><span class="fa fa-paper-plane"></span> Share via Gmail</button>
</a>
</div>
</div>
</div>
<div id="step-3" class="step hidden">
<a id="result-link" href="#"><button class="bribe-link">Gimme my hacks!</button></a>
</div>
<a class="bot-link" href="https://www.inithtml.com/">Never mind, I don't want the free bonuses</a>
</section>
<!-- / main-content -->
<div id="awan"></div>
<!-- / background -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
Ở tập tin main.css.
/* General */
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
color: #45474D;
background: #C0DEED;
}
h1, h2, h3, h4, h5 {
margin-top: 0;
}
img {
max-width: 100%;
height: auto;
}
a, button {
transition:all .1s;
-webkit-transition:all .1s
}
.container {
max-width: 700px;
}
span.fa {
margin-right: 3px;
}
/* Step 1 */
.main-content {
padding: 60px 30px;
background: #fff;
position: relative;
z-index: 1;
margin-top: 80px;
margin-bottom: 50px;
}
.title {
color: #98bf4f;
font-size: 32px;
margin-top: 0;
margin-bottom: 15px;
}
hr.small-divider {
width: 20%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.description {
font-weight: 400;
font-size: 18px;
}
.step {
margin-top: 40px;
}
.tweet-box {
color: #7f8283;
background: #f5fafd url(../img/quote.jpg) right 10px top 10px no-repeat;
border: 1px solid lightgrey;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 0 20px 30px -5px #ccc;
min-height: 50px;
padding: 30px 55px;
font-style: italic;
position: relative;
}
.tweet-box p {
font-size: 16px;
font-weight: 300;
}
.tweet-button {
margin-top: -25px;
height: 50px;
width: 250px;
background: #3a5899;
border: 0;
border-radius: 5px;
color: white;
font-size: 18px;
font-weight: 400;
cursor: pointer;
position: relative;
z-index: 1000;
}
.tweet-button:hover, .tweet-button:focus {
background: #1d418d;
}
/* Step 2 */
.progress {
height: 25px;
line-height: 25px;
}
.share-buttons-box {
border: 1px solid lightgrey;
height: 150px;
width: 100%;
display: table;
}
.share-twitter-box {
padding: 10px;
border-right: 1px solid lightgrey;
display: table-cell;
width: 50%;
height: 100%;
}
.share-twitter-background {
background: #dfeccb;
height: 100%;
padding: 30px;
position: relative;
background-position: center;
background-image: url(../img/tick.png);
background-repeat: no-repeat;
text-align: center;
}
.center-background-image {
background-position: center;
}
.share-twitter-box-header {
color: #bdd896;
font-size: 20px;
text-decoration: line-through;
font-weight: 400;
margin-bottom: 10px;
}
.share-twitter-box-text {
font-style: italic;
color: #a8b19b;
}
.tweet-button-grey {
position: absolute;
bottom: -33px;
left: 50%;
margin-left: -35%;
height: 45px;
width: 65%;
background-color: #d7d8dc;
border: 0;
border-radius: 5px;
color: white;
font-size: 1em;
font-weight: bold;
cursor: default;
}
.share-email-box {
height: 100%;
width: 50%;
display: table-cell;
padding: 30px;
position: relative;
}
.share-email-box-header {
color: #9cc255;
font-size: 20px;
font-weight: 400;
margin-bottom: 10px;
}
.email-button-blue {
text-align: center;
position: absolute;
bottom: -23px;
right: 85%;
margin-right: -70%;
height: 45px;
width: 65%;
background: #dd5348;
border: 0;
border-radius: 5px;
color: white;
font-size: 1em;
font-weight: bold;
cursor: pointer;
}
.email-button-blue:hover, .email-button-blue:focus {
background: #ce3f34;
}
/* Step 3 */
.bribe-link {
position: relative;
margin: 30px;
min-height: 50px;
min-width: 200px;
background-color: #64b5ed;
border: 0;
border-radius: 5px;
color: white;
font-size: 20px;
font-weight: 400;
width: auto;
cursor: pointer;
padding: 5px;
}
/* Bottom */
.bot-link {
display: block;
margin-top: 60px;
color: #ccc;
font-size: 14px;
}
.bot-link:hover, .bot-link:focus {
text-decoration: none;
color: #bbb;
}
/* Background */
#awan {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
margin: 0px;
padding: 0px;
background-color: #C0DEED;
background: url(../img/bg.png) center top repeat-x;
animation: awan-animasi 10s linear infinite;
-ms-animation: awan-animasi 10s linear infinite;
-moz-animation: awan-animasi 10s linear infinite;
-webkit-animation: awan-animasi 10s linear infinite;
z-index: 0;
}
@keyframes awan-animasi {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
@-webkit-keyframes awan-animasi {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
@-ms-keyframes awan-animasi {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
@-moz-keyframes awan-animasi {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
jQuery
Ở tập tin main.js.
$(document).ready(function() {
$('#tweet-button').click(function() {
$('#step-1').addClass('hidden');
$('#step-2').removeClass('hidden');
$('.main-content').css('margin-top', '50px');
});
$('#prompt-two-button').click(function() {
$('#step-1').addClass('hidden');
$('#step-2').addClass('hidden');
$.get('./data/url.txt', function(data) {
$('#result-link').attr('href', data);
});
$('#step-3').removeClass('hidden');
$('.main-content').css('margin-top', '80px');
});
});
Vào http://localhost/thank-you/ để xem kết quả, tải về tại đây để so sánh.
Chúc các bạn thành công!
