Tạo nút Like để mở khóa nội dung bài viết cho blogger
Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách tạo nút Like, Chia sẻ mạng xã hội để mở khóa nội dung bài viết được ẩn đi, điều này giúp tăng lượt tương tác trên mạng xã hội tuy nhiên đôi lúc nó cũng làm cho độc giả cảm thấy khó chịu, vì vậy bạn cần phải cân nhắc trước khi sử dụng nhé.
DEMO
HƯỚNG DẪN THỰC HIỆN
Bước 1 : Đầu tiên, các bạn truy cập vào trang quản trị blogger rồi chọn Chủ đề -> Chỉnh sửa
Bước 2: Sau đó các bạn tìm đến thẻ ]]></b:skin> rồi copy và dán đoạn code sau lên trước nó.
.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;
}
Bước 3: Tiếp theo các bạn tìm đến thẻ đóng </body> rồi dán đoạn code dưới đây lên trước nó.
<script src=’//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js’></script><script type=’text/javascript’>
//<![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>
Nếu template bạn đã có thư viện jQuery rồi thì bỏ đoạn màu đỏ đi nhé
Bước 4: Để ẩn nội dung trong bài viết các bạn vào đăng bài mới rồi chuyển sang chế độ soạn thảo bằng HTML, sau đó dán đoạn code sau vào
<div class=”hide”>
<!–Nội dung bài viết cần ẩn đi–>
…
</div>
<div class=”show”>
Để mở khóa nội dung, bạn vui lòng like hoặc chia sẻ lên mạng xã hội dưới đây.
<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=”bacsiwindows” 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 bạn lưu lại và kiểm tra xem đã thành công chưa nhé.
LỜI KẾT
Chỉ với vài bước đơn giản bạn đã có thể buộc độc giả phải like hoặc chia sẻ bài viết của bạn rồi
Chúc các bạn thành công!