Nút chia sẽ Facebook để mở khóa nội dung ẩn bằng cách sử dụng jQuery và Facebook API

Với tiện ích này, độc giả buộc phải chia sẻ địa chỉ (URL) của bạn lên Facebook để có thể thấy được nội dung đã ẩn bên trong nút chia sẻ (Share Facebook), điều này sẽ góp một phần nhỏ giúp cho bạn có thêm lưu lượng truy cập từ Facebook. Và với chỉ với vài dòng code dưới đây bạn sẽ dễ dàng thực hiện được chức năng hiển thị một nội dung nào đó khi người dùng nhấn vào nút chia sẻ lên Facebook.

Mở khóa nội dung ẩn bằng cách chia sẻ lên facebook

- Bước 1: Trước tiên, để thực hiện chức năng này, bạn cần đăng ký và tạo một App tạihttps://developers.facebook.com/ để lấy App ID
- Bước 2: Sau khi bạn có được AppID, việc tiếp theo là Thêm đoạn mã dưới đây vào Mẫu (template) của bạn, tốt nhất nên đặc nó trước thẻ </body>

<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&appId=212550605589620&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Thay đoạn appId màu đỏ thành appId của ứng dụng của bạn

- Bước 3: Tiếp theo, đặt đoạn javascript dưới đây vào bấc cứ nơi nào trong bài viết của bạn
Ở đây, ta sử dụng Facebook's Feed Dialog nó cho phép người dùng xuất bản những thông tin như: liên kết, hinh ảnh, mô tả,.. của một địa chỉ (url). Để biết thêm có thể vào đây để tham khảo thêm.

<script type="text/javascript">
function shareOnFB() {
  var e = {
    method: "feed",
    link: "http://KTheme.com",
    picture: "https://farm4.staticflickr.com/3914/14601901546_3a8dfd5d32_b.jpg",
    name: "KTheme's Blog | Chia sẽ Thủ thuật - Blogger - Tutorials",
    caption: 'KTheme.com',
    description: "KTheme.com là một blog chia sẽ các thủ thuật liên quan đến việc sử dụng Blogspot"
};
FB.ui(e, function(t) {
    if (t["post_id"]) {
      //Sau khi chia sẻ thành công, nội dung cần hiển thị của bạn ở đây
      var secret_data = "<h2>Cảm ơn bạn đã quan tâm!<br />Hy vọng bài viết này sẻ làm bạn hài lòng!<br />Chúc bạn thành công ^^</h2>";
      jQuery("#results").html(secret_data);
    }
  })
}
</script>

- Thay đoạn màu đỏ phía trên theo ý đồ của bạn
- Thay đổi các thuộc tính
         link: địa chỉ blog của bạn
         picture: hình ảnh cần hiển thị
         name: tiêu đề cần hiển thị
         caption: địa chỉ blog của bạn
         description: đoạn mô tả ngắn cho blog của bạn

- Bước 3: Sử dụng, để sử dụng chỉ cần thêm thuộc tính onclick="shareOnFB();" vào thẻ bạn cần sử dụng

<div id="results">
    <div style="text-align:center; color:#FF0000;">
        Nội dung đã bị khóa! Xin vui lòng bấm vào nút chia sẽ để mở khóa
        <br /><br />
        <img onclick="shareOnFB();" style="cursor:pointer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgamVdpMJC0C7p8O2O6qXGnG56oscRAxdHf3eDfJQsJGBqbU0RP48lYJaKeZ2Ezm28CD8QC2ZDuC25w1BWBtH013J26JPxxg_3JvPfFRsKYbmcKHi6POsRX94Qj2VgB0z14n-WN3wcWtwAE/s1600/fbshare.png">
    </div>
</div>

Bạn nên chú thích một vài chữ ngắn gọn để đọc giả của bạn biết như: Nội dung đã khóa! Vui lòng bấm vào chia sẽ để mở khóa!

Vậy là xong, hy vọng với tiện ích nhỏ này sẽ làm bạn hài lòng! Chúc vui vẽ ^^

Posted in bl