Share post Facebook để mở khóa nội dung bằng cách sử dụng jQuery & Facebook API

Để 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.

Đầu tiên bạn cần phải tạo một Facebook App, đăng ký trang web của bạn và nhận được một App ID.

Bước 1

Bạn nhúng đoạn mã sau vào mã nguồn của mình

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

Hãy điều chỉnh 491547834327043 thành ID apps của bạn

Bước 2

Tiếp tục nhúng đoạn mã sau:

<script>
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function checkFBshare() {
    var fbshare=getCookie("fbshare");
    if (fbshare != "") // nếu đã share rồi 
    {
        document.getElementById("contentFBshare").style.display = "";  // hiện nội dung
        document.getElementById("buttonFBshare").style.display = "none";  // ẩn nút share nội dung
    } 
    else  // ngược lại nếu chưa share
    {
       document.getElementById("contentFBshare").style.display = "none"; // ẩn nội dung
       document.getElementById("buttonFBshare").style.display = "";  // hiện nút share nội dung

    }
}


function shareOnFB() {
 FB.ui({
        method: "feed",
        link: "https://kienthuc24h.com",
        picture: "https://kienthuc24h.com/ogimage.png",
        name: "KienThuc24h.com",
        caption: 'kienthuc24h.com',
        description: "Kiến Thức 24h - Chia sẻ kiến thức không giới hạn"
      }, function(t){
        var str = JSON.stringify(t);
        var obj = JSON.parse(str); 
        if(obj.post_id != '')
        {
            setCookie("fbshare", 1, 3);
            document.getElementById("contentFBshare").style.display = "";  // hiện nội dung
            document.getElementById("buttonFBshare").style.display = "none";  // ẩn nút share dung
        }
      });
}
</script>

Các bạn có thể điều chỉnh một số thông tin cho phù hợp. Và ở dòng 54 setCookie(“fbshare”, 1, 3); Bạn có thể thay số 3 thành một số khác, mặc định người dùng sẽ không cần phải share lại bài viết trong vòng 3 ngày, nếu có tải lại trang.

Bước 3

Ở bước này bạn chỉ cần đặt content cần khóa vào thẻ contentFBshare và trang trí lại một số chỗ theo ý muốn của bạn.

<body onload="checkFBshare()">
	<div id="buttonFBshare">
		<img onclick="shareOnFB();" style="cursor:pointer" src="https://dkhp.kienthuc24h.com/fbshare.png">
		<p>Chia sẻ để mở khóa nội dung</p>
	</div>
	<div id="contentFBshare" style="display:none">
		<p>Đây là nội dung!</p>
	</div>
</body>

Nhìn chung ở bài viết này cách cài đặt khá đơn giản, mình có tham khảo một bài “Facebook Share to Unlock Content” ở trang nước ngoài, tuy nhiên mỗi lần F5 phải share lại bài viết, khá phiền phức, nên khi viết lại ở đây mình có cải tiến và sử dụng thêm cookie, tuy nhiên đây là cách đơn giản. Hi vọng bài viết này sẽ giúp ích được nhiều trong việc quảng bá và khai thác người dùng từ facebook.

Bước 1

Bước 2

Bước 3

Để lại một bình luận Hủy