Theo dõi người dùng nhấn nút like Facebook

Bài viết này Sáu sẽ hướng dẫn cho bạn cách theo dõi người dùng khi họ nhấn nút like Facebook. Yêu cầu của bài toán được đặt ra là bạn có chức năng chỉ hiển thị cho người dùng nội dung của bài viết một khi họ đã nhấn like trên fanpage của bạn. Nếu như chỉ like bình thường thôi thì nội dung sẽ không được cập nhật, theo cách thông thường, khi người dùng vừa nhấn like thì hiển thị thông báo và tải lại trang hiển thị nội dung cho người đó.

Đây là bài viết đầu tiên Sáu viết bài hướng dẫn có liên quan đến Facebook API, do vậy bạn phải tạo một tài khoản Facebook trước tiên và đăng ký một APP mới trên Facebook Developers. Bạn hãy tạo một app mới, điền tên cho phù hợp và thiết lập đầy đủ cho nó nhé.

Sau khi đã có một app thì bạn nên quan tâm tới 2 thành phần chính đó là app id và app secret. Các ứng dụng được viết với Facebook PHP SDK đều dùng cái này, nên bạn có thể lưu lại vào mail hoặc trên ổ cứng của bạn để sử dụng, khỏi phải mất công đăng nhập vào đây để lấy.

Và trước khi bạn thực hành thì hãy ghé xem demo để biết được mục đích của bài viết, và hiểu được bạn chuẩn bị làm theo hướng dẫn để được kết quả như thế nào.

Thông báo khi người dùng nhấn like Facebook

Bên dưới là toàn bộ code mà bạn có thể tham khảo để tạo một nút like như trong bài viết Sáu đã giới thiệu, bạn phải tải thư viện Facebook PHP SDK về nữa nhé.

<?php
require_once('src/facebook.php');
$config['App_ID'] = 'FACEBOOK_APP_ID';
$config['App_Secret'] = 'FACEBOOK_APP_SECRET';
$config['callback_url'] = 'https://hocwp.net/example/theo-doi-like-facebook/';

$facebook = new Facebook(array(
	'appId'  => $config['App_ID'],
	'secret' => $config['App_Secret'],
	'cookie' => true
));

$user = $facebook->getUser();
if(isset($_GET['logout'])) {
	$facebook->destroySession();
	session_destroy();
	if (isset($_SERVER['HTTP_COOKIE'])) {
		$cookies = explode(';', $_SERVER['HTTP_COOKIE']);
		foreach($cookies as $cookie) {
			$parts = explode('=', $cookie);
			$name = trim($parts[0]);
			setcookie($name, '', time()-1000);
			setcookie($name, '', time()-1000, '/');
		}
	}
	header("Location: ".$config['callback_url']);
	exit();
}
elseif(isset($_GET['code'])) {
	header("Location: ".$config['callback_url']);
	exit();
}
if($user) {
	$user_profile = $facebook->api('/me');
}
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta charset="UTF-8" />
<title>Thông báo khi người dùng nhấn like Facebook</title>
<style type="text/css">	
	.logout a {
		background-color: #3B5998;
		border-radius: 3px;
		color: #FBFBFB;
		padding: 5px 10px;
		text-decoration: none;
	}
	.logout a:hover {
		background-color: #4e69a2;
	}
</style
</head>
<body>
<p>Nếu bạn thích bài hướng dẫn này thì hãy nhấn like để ủng hộ</p>

<?php if($user) : ?>
<p class="logout">
	Facebook ID: <?php print_r($user); ?>
	&nbsp;&nbsp;&nbsp;
	<a href="<?php echo $facebook->getLogoutUrl(array('next' => $config['callback_url'].'?logout=1', 'access_token' => $facebook->getAccessToken())); ?>">Đăng xuất</a>
</p>
<fb:like href="LIKED_URL" layout="standard" action="like" show_faces="false" share="true"></fb:like>
<?php else : ?>
<p><a href="<?php echo $facebook->getLoginUrl(array('scope' => 'friends_likes,email,publish_stream,status_update,offline_access')); ?>"><img src="images/facebook-login-button.png" /></a></p>
<?php endif; ?>

<?php
$fb_name = 'bạn';
if(!empty($user_profile)) {
	$fb_name = $user_profile['name'];
}
?>

<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function() {
	FB.init({appId: '<?php echo $config['App_ID']; ?>', status: true, cookie: true, xfbml: true});
	FB.Event.subscribe('edge.create', function(href, widget) {
		alert('Cảm ơn <?php echo $fb_name; ?> đã thích Sáu Hỉ Blog');
	});
};
(function() {
	var e = document.createElement('script');
	e.type = 'text/javascript';
	e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
	e.async = true;
	document.getElementById('fb-root').appendChild(e);
}());
//-->
</script>
<script type="text/javascript">
    if (window.location.hash && window.location.hash == '#_=_') {
        if (window.history && history.pushState) {
            window.history.pushState("", document.title, window.location.pathname);
        } else {
            var scroll = {
                top: document.body.scrollTop,
                left: document.body.scrollLeft
            };
            window.location.hash = '';
            document.body.scrollTop = scroll.top;
            document.body.scrollLeft = scroll.left;
        }
    }
</script>
</body>
</html>

Bạn phải thay đổi một vài thông tin theo như tài khoản của bạn, cụ thể bạn nhìn những dòng config ở phía đầu và sửa lại chỗ này:

$config['App_ID'] = 'FACEBOOK_APP_ID';
$config['App_Secret'] = 'FACEBOOK_APP_SECRET';
$config['callback_url'] = 'https://hocwp.net/example/theo-doi-like-facebook/';

Tiếp đến, nút like thì bạn tự tạo nút like Facebook theo sở thích riêng hoặc là chỉ cần sửa lại đường link trong đoạn code sau:

<fb:like href="LIKED_URL" layout="standard" action="like" show_faces="false" share="true"></fb:like>

Như vậy là bạn đã làm được như hướng dẫn rồi đấy, nhưng vẫn còn một điều quan trọng nữa đó là trong thẻ <html> bạn phải để như sau:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

Như vậy là bạn đã hoàn thành được bài viết tạo chức năng theo dõi khi người dùng click vào nút like Facebook, công việc của bạn tiếp theo là kiểm tra nếu người dùng đã like trang của bạn rồi thì hiển thị ra nội dung, hoặc nếu người dùng chưa like thì hiện ra nút like. Trường hợp người dùng chưa đăng nhập Facebook thì hiển thị nút đăng nhập cho họ trước. Chúc bạn thành công.

Nếu các bạn thích nội dung bài viết này thì hãy like trang Sáu Hỉ Blog để ủng hộ nhé, lần sau Sáu sẽ cập nhật bài viết tích hợp đăng nhập Facebook vào WordPress.

Lại Đình Cường