Share like post facebook twitter và subscribe youtube để mở khóa nội dung cho blogspot

Với những người sử dụng blogspot, để khai thác tối đa tiềm năng từ mạng xã hội khi chia sẻ một sản phẩm công nghệ miễn phí, chúng ta có thể dùng đến phương án buộc người dùng phải “Chia sẻ bài viết lên facebook để nhìn thấy nội dung”. Chỉ với vài dòng mã mà chúng ta có thể dễ dàng cài đặt tính năng này.

Sau đây là hướng dẫn cách khóa nội dung chia sẻ yêu cầu like, share bài viết mới mở khóa-Share post Facebook để mở khóa nội dung bằng cách sử dụng jQuery & Facebook API cho blogspot

Bước 1

- Blogspot của bạn cần có thư viện jquery
- Đầu tiên bạn cần phải tạo một Facebook App tại đây cho trang web/blog của mình có cài đặt chức năng khóa nội dung cần chia sẻ, đăng ký trang web của bạn và nhận được một App ID.
Sau khi hoàn thành bạn được cung cấp một mã javascript như sau

<div id="fb-root"></div>
<script>(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/sdk.js#xfbml=1&amp;appId=xxxxxxxxxx&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Thay xxxxxxx thành ID app của bạn và đem dán vào trước thẻ </body>

Bước 2

Bạn dán toàn bộ code sau vào trước thẻ </head> hoặc thẻ </body> (khuyên dùng vì đỡ ảnh hưởng tới tốc độ tải trang)

<script src='//www.prismascacchi.com/locker/js/pandalocker.2.1.0.js?6'/>
<link href='//www.prismascacchi.com/locker/css/pandalocker.2.1.0.min.css' rel='stylesheet' type='text/css'/>
<script>
jQuery(document).ready(function ($) {
   $('.to-lock').sociallocker({
 text:{
    header: 'Nội dung này bị khóa',
    message: 'Hãy ủng hộ chúng tôi, sử dụng một trong các nút bên dưới để mở khóa nội dung.'
 },
 theme: 'flat',
 facebook:{
    appId: 'xxxxxxxxxxxx'
 },
 buttons:{
    order: ["facebook-like","facebook-share","twitter-tweet"],
    counters: false,
    lazy: true
 }
   });
});
</script>

- Thay xxxxxxxxx là số ID App của bạn vừa đăng ký được ở trên.
- Nếu muốn hiển thị số lượt thì đổi counters: false, thành counters: true,
- Có 3 đích là like, share fb và twitter không dùng cái nào thì bỏ cái đó đi tại dòng bên dưới trong code

order: ["facebook-like","facebook-share","twitter-tweet"],

Bạn nên tải các file js và css về và up lên host riêng của mình để dùng lâu dài.

Bước 3

Khi sử dụng bạn dùng HTML sau đặt vào bất kể chỗ nào trong bài viết mà bạn muốn

<div class="to-lock" style="display: none; background-color: #f9f9f9; text-align: center;">
Nội dung cần khóa
</div>

+ Có thể dùng được tất cả các button như hình

Đoạn javascript đầy đủ :

<script>
jQuery(document).ready(function ($) {
   $('.to-lock').sociallocker({
 text:{
    header: 'Nội dung này bị khóa',
    message: 'Hãy ủng hộ chúng tôi, sử dụng một trong các nút bên dưới để mở khóa nội dung.'
 },
 theme: 'flat',
 facebook:{
    appId: 'xxxxxxxxxxxxx'
 },
 buttons:{
    order: ["facebook-like","facebook-share","twitter-tweet","twitter-follow","linkedin-share","youtube-subscribe"],
    counters: false,
    lazy: true
 }
   });
});
</script>

+ Đăng ký App(với ID app tương ứng) cho trang blog nào thì code dùng cho trang blog đó.

Nguồn:prismascacchi.com

File js & css:

<script src='//cdn.staticaly.com/gh/dautoblogger/bootstrap/master/js-highlight.js'/>
<script src='//cdn.staticaly.com/gh/dautoblogger/bootstrap/master/js-pandalocker.js'/>
<link href='//cdn.staticaly.com/gh/dautoblogger/bootstrap/master/css-pandalocker.css' rel='stylesheet' type='text/css'/>