Breaking News

Nút chia sẻ Facebook để mở khóa nội dung Ẩn


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

Demo chia sẻ Facebook để mở khóa nội dung

Nội dung đã bị khóa! Xin vui lòng bấm vào nút chia sẽ để mở khóa 

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 shareforshow() {
  var e = {
    method: "feed",
    link: "http://Thucleblogs.tk",
    picture: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ2NOlZMBc175GCp6b4qWV4gau0Y-uHNDyk8mQs_aAONyXOTjll",
    name: "Thucle Blog | Chia sẻ kiến thức blog",
    caption: 'thucleblogs.tk',
    description: "SEO Wordpress, thủ thuật SEO Wordpress, SEO Wordpress, Hướng dẫn SEO Blogspot, thủ thuật blogspot, seo blog, templates 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="shareforshow();" 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="shareforshow();" style="cursor:pointer" src="http://3.bp.blogspot.com/-mUeXUS-OeZA/VFXTTi5PTeI/AAAAAAAACNs/2Fm9wdZ5Jp8/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!
Chúc các bạn thành công với thủ thuật này
Sưu tầm trên internet

Không có nhận xét nào