Hiện nội dung được ẩn khi click like hoặc +1

Đại đa số blogger đưa blog/website của họ tăng lượng độc giả truy cập lên là nhờ các mạng xã hội hiện nay. Và trước kia mình đã từng giới thiệu nhiều cách khác nhau để liên kết với các trang mạng xã hội này, tuy nhiên điều này không mang tính chất "ép buộc" lắm thì phải, vì vậy số lượng like hay +1 cũng không như mong muốn lắm. Vì thế hôm nay mình sẽ giới thiệu đến độc giả TrollVL một cách khác đó là chỉ hiện nội dung ta muốn ẩn khi độc giả click một trong số các nút Like, +1 của 3 nhà mạng xã hội lớn.

Tất nhiên ta chỉ nên ẩn những nội dung "cần ẩn" ví dụ như "Hãy like nếu bạn đủ 18 tuổi để xem nội dung này" hay "Like để download" chẳng hạn. Đừng nên lạm dụng chức năng này quá sẽ gây phiền hà cho độc giả của mình để rồi chịu hậu quả ngược lại

Và để xem nội dung của bài viết bạn hãy click một trong số các button bên dưới nhé =))

Cài đặt trong template

Dán đoạn code bên dưới vào trước thẻ head

<link href='https://trollvlhcv.googlecode.com/svn/trunk/fortroll/locker.css' rel='stylesheet' type='text/css'/>

Thêm các phần like/folow/+1 mới hiện nội dung vào bài viết

Lựa chọn viết bài với chế độ HTML và sử dụng đoạn code bên dưới

<article id="default-usage">
<div class="to-lock" style="display: none;">
<div style="text-align: center; margin-bottom: 20px;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
NỘI DUNG ẨN CÁC BẠN VIẾT TẠI ĐÂY
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="https://trollvlhcv.googlecode.com/svn/trunk/fortroll/Locklike.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Nội Dung Đã Được Khóa",
message: "Hãy like - theo dõi - +1 để xem nội dung khóa."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["facebook", "google"]
},
// facebook options
facebook: {
url: "http://www.facebook.com/hcvvn",
appId: "450530478318644"
},
google: {
url: "http://www.trollvl.com"
}
});
});;;;
</script>

• Thay đổi những phần được mình tô màu thành những đường link của bạn nha!
• Riêng 450530478318644 là id của app thì bạn có thể giữ nguyên hoặc sử dụng appid của mình nếu bạn nắm rõ về phần này

Nguồn MyBloggerlab