Cách chèn Social Locker vào Blog đơn giản nhất

Hiện nay một số trang web chia sẻ nội dung, link tải miễn phí vẫn còn đang áp dụng social locker với mục đích tăng lượng khách truy cập. Cách thức hoạt động social locker sẽ làm ẩn các liên kết kết tải về hay nội dung thay bằng hộp cảnh báo.

Nội dung trong hộp thoại khóa là các nút cấu hình các mạng xã hội như thích, chia sẻ..., ngay bên dưới liên kết hay nội dung bị ẩn. Khách truy cập bắt buộc phải tác động vào một trong các nút ví dụ như chia sẻ bài viết lên Facebook và sau khi chia sẻ xong hộp thoại chia sẻ đóng lại lúc đó liên kết tải về hay nội dung sẽ hiện ra và khi bạn tải lại trang liên kết tải về hay nội dung sẽ hiện lại là do bạn đã tác động vào nút mở khóa.

Trang web: http://www.prismascacchi.com/locker/index.html đã tạo sẵn, các bạn chỉ cần cấu hình nút sau đó lấy mã chèn vào Blog. Giả sử mình muốn sử dụng nút chia sẻ Facebook để mở khóa mình sẽ chèn vào Blog như sau:

Trong chỉnh sửa HTML của Chủ đề:

- Chèn trước </head>

Copy

<link href='https://www.prismascacchi.com/locker/css/pandalocker.2.1.0.min.css' rel='stylesheet'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

- Chèn trước </body>

Copy

<script src='https://www.prismascacchi.com/locker/js/pandalocker.2.1.0.min.js'/>

<script>

var postUrl = "<data:blog.url.canonical/>";

//<![CDATA[

jQuery(document).ready(function($) {

  $('.onp-sl-content').sociallocker({

    text: {

      header: 'Nội dung bạn cần xem đã bị khóa!',

      message: 'Để xem nội dung bên trong, bạn có thể ấn nút share Facebook để mở khóa nhé!'

    },

    theme: 'flat',

    facebook: {

      share: {

        url: postUrl

      },

      appId: '070532153790016'

    },

    buttons: {

      order: ["facebook-share"],

      counters: true,

      lazy: true

    }

  });

});

//]]></script>

Lưu ý: Nút chia sẻ Facebook sử dụng ID ứng dụng, các bạn truy cập liên kết hướng dẫn tạo ứng dụng Facebook nếu chưa có

- Chèn trong bài viết

Khi soạn thảo hay chỉnh sửa bài viết các bạn thêm đoạn code sau:

Copy

<div class="onp-sl-content">

  Liên kết tải về hoặc nội dung

</div>

Ví dụ:

Copy

<div class="onp-sl-content">

  <a href="https://drive.google.com/drive/folders/0B6-Xel5KQ5vTRHFJb1dYSExIQVE" target="_blank">Tải về</a>

</div>

Các bạn có thể dụng bao nhiêu liên kết tải về trong một bài cũng được vì theo nguyên tắc cứ bên dưới một liên kết tải về sẽ hiển thị một hộp thoại khóa ngay bên dưới

Nội dung chính