Làm sao để theo dõi người dùng nhấn nút like Facebook trên site của bạn
Bài viết này mình 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 mình 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 mình đã giới thiệu, bạn phải tải thư viện Facebook PHP SDK về nữa nhé.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
<?php require_once('src/facebook.php'); $config['App_ID'] = 'FACEBOOK_APP_ID'; $config['App_Secret'] = 'FACEBOOK_APP_SECRET'; $config['callback_url'] = 'http://wordpress.edu.vn/demo/thong-bao-facebook-like/'; $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); ?> <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 WordPress.edu.vn'); }); }; (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:
|
1
2
3
|
$config['App_ID'] = 'FACEBOOK_APP_ID';$config['App_Secret'] = 'FACEBOOK_APP_SECRET';$config['callback_url'] = 'http://wordpress.edu.vn//demo/thong-bao-facebook-like/'; |
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:
|
1 |
<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:
|
1 |
<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 WordPress.edu.vn để ủng hộ nhé, lần sau mình sẽ cập nhật bài viết tích hợp đăng nhập Facebook vào WordPress.
Liên Quan Khác
Related posts:
Bạn ơi, liệu có thể chèn các nút của bạn hướng dẫn lên blogger được không? Và mình không hiểu tại sao google lại thiết kế nhiều nút thế, việc lựa chọn rất khó khăn mà ko thể cài đặt tất cả lên được, vd đã có nút share lại còn thêm like này kia…
Bạn kiểm tra giúp các nút của mình liệu mình cài như thế này có giúp chuẩn seo và nhẹ hơn ko. Site: daisudulich.vn/p/dirltr-styletext-align-left-trbidion.html
Cảm ơn bạn!