Cách thêm button “Like to Unlock” vào bài viết Blogspot
Updated on August 22, 2016
Bạn có biết rằng, hầu hết mọi người chỉ đọc bài viết rồi rời đi mà không bao giờ like hoặc chia sẻ nội dung đó ?
Bạn có muốn khuyến khích mọi người like hoặc chia sẻ bài viết của bạn ?
Đây là giải pháp dành cho bạn. Trong bài viết này, tôi sẽ chia sẻ cách thêm button “Like to Unlock” vào bài viết Blogspot nhanh chóng và dễ dàng.
Cách thức hoạt động của button “Like to Unlock” này khá đơn giản. 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.
Cách thêm button “Like to Unlock” vào bài viết Blogspot
Trước khi bắt đầu, tôi khuyên các bạn nên backup lại giao diện hiện tại của blog để tránh những sai sót không đáng có.
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>
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>
Để 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
Tiếp đó, điền đoạn code dưới đây vào vị trí muốn sử dụng
Cuối cùng, hãy xuất bản bài viết. Bây giờ, để xem phần nội dung bị ẩn đi, người dùng sẽ buộc phải like, twitter, +1 bài viết của bạn.
Bạn có muốn khuyến khích mọi người like hoặc chia sẻ bài viết của bạn ?
Đây là giải pháp dành cho bạn. Trong bài viết này, tôi sẽ chia sẻ cách thêm button “Like to Unlock” vào bài viết Blogspot nhanh chóng và dễ dàng.
Cách thức hoạt động của button “Like to Unlock” này khá đơn giản. 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.
Cách thêm button “Like to Unlock” vào bài viết Blogspot
Trước khi bắt đầu, tôi khuyên các bạn nên backup lại giao diện hiện tại của blog để tránh những sai sót không đáng có.
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='http://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'>Bước 3 : Thêm đoạn code dưới đây vào phía trên thẻ ]]></b:skin>
//<![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>
Làm sao để sử dụng ?
.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;
}
Để 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
Tiếp đó, điền đoạn code dưới đây vào vị trí muốn sử dụng
<div class="hide">trong đó : …….. là phần nội dung sẽ bị ẩn đi
..........
</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>
Cuối cùng, hãy xuất bản bài viết. Bây giờ, để xem phần nội dung bị ẩn đi, người dùng sẽ buộc phải like, twitter, +1 bài viết của bạn.