ประยุกต์ การ invite friends ใน facebook มาใช้งาน
06 September 2010โค้ดตัวอย่างที่จะได้นำเสนอต่อไป เป็นการประยุกต์ใช้ การ invite friend ของ facebook ที่สมาชิก
จะแนะนำเพื่อน ให้มาใช้งาน application ที่เราสร้างขึ้น
ซึ่งเราสามารถประยุกต์ใช้กับการเปิดรับสมาชิกใหม่ คล้ายการ invite ของระบบ bit แต่ไม่เหมือนโดยสิ้นเชิง
หรือจะใช้เป็นการแนะนำให้เพื่อนใน facebook มาสมัครสมาชิกเว็บไซต์ของเรา (เพื่อนใน facebook หมายถึง เพื่อนของคนที่ทำการแนะนำ ซึ่งหากแต่ละคนทำการแนะนำเพื่อนตัวเอง ก็จะมีจำนวนคนที่เข้ามาใช้งาน ระบบของเรามากตามจำนวน แต่ก็ขึ้นอยู่การตอบรับนั้นๆ ด้วย)
เริ่มต้นเลย
1.สร้างรูปแบบ invite form โค้ดตัวอย่าง และคำอธิบาย ในที่นี่สร้างชื่อ gen_invite_form.php
<?php
if($_GET['g_fbml']==1){
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// app id ของคุณ
$appID="1343511812";
// ขออนุญาตในการเข้าถึงข้อมูลของผู้ใช้
$callbackURL="https://graph.facebook.com/oauth/authorize?client_id=".$appID;
// url เมื่อได้ทำการตอบรับคำเชิญ และอนูญาตให้เข้าถึงข้อมูล
$callbackURL.="&redirect_uri=http://www.ninenik.com/fb/register_newmember.php";
// ส่วนของข้อมูลที่ต้องการขอรับการอนุญาตในการเข้าถึง เพิ่มเติม
$callbackURL.="&scope=read_stream,publish_stream,offline_access,user_photos,user_videos";
?>
<div style="margin:auto;padding:5px;">
<fb:fbml>
<fb:request-form action="http://www.ninenik.com/fb/facebook_test_recieve.php"
method="POST"
invite="true"
type="Ninenik.com"
content="คุณสามารถสมัครสมาชิกกับเราได้แล้ว.
<?php echo htmlentities("<fb:req-choice url=\"$callbackURL\" label=\"Join Ninenik.com \"") ?>" >
<fb:multi-friend-selector showborder="false" actiontext="Ninenik.com เปิดรับสมาชิกใหม่ แนะนำเพื่อนของคุณมาเป็นหนึ่งในสมาชิกของเรา " />
</fb:request-form>
</fb:fbml>
</div>
<?
exit;
}
?>
บรรทัดที่ 7 กำหนด app id ของเรา
บรรทัดที่ 9 กำหนด url เมื่อเพื่อนตอบรับคำเชิญ จะส่งค่าไปร้องขออนุญาตการเข้าถึงข้อมูล
บรรทัดที่ 11 url เมื่อได้ทำการตอบรับคำเชิญ และอนูญาตให้เข้าถึงข้อมูล ไฟล์ในหน้านี้จะใช้สำหรับ
กำหนด การสมัครสมาชิก หรืออื่นตามต้องการ
บรรทัดที่ 13 สิทธิการเข้าถึงของผู้ที่ตอบรับคำเชิญ ที่ต้องการเพิ่มเติม ดูรายการทั้งหมดได้ที่
http://developers.facebook.com/docs/authentication/permissions ต้องการส่วนไหน ให้เพิ่มค่าเข้าไป และคั่นด้วย comma
บรรทัดที่ 17 กำหนด action คือการกำหนด url หรือไฟล์ ที่ต้องการให้ลิ้งค์ไป เมื่อมีการส่ง หรือ ยกเลิก การส่ง invite
ถ้ากรณีส่ง invite ค่าที่ส่งกลับมาจะเป็น id และตัวแปรขึ้นอยู่กับ method ที่กำหนดในบรรทัดที่ 18
ถ้าบรรทัดที่ 18 กำหนดเป็น POST จะคืนค่ากลับมาเป็นตัวแปร POST แบบ Array คือ
$_POST['ids'][0] id ของเพื่อนคนที่ 1 ที่ ส่งไป
$_POST['ids'][1] id ของเพื่อนคนที่ 2 ที่ ส่งไป
$_POST['ids'][2] id ของเพื่อนคนที่ 3 ที่ ส่งไป
......
บรรทัดที่ 19 กำหนดรูปแบบการส่งเป็น invite หรือ request ถ้า invite กำหนดเป็น true
บรรทัดที่ 20 กำหนด app name ของเรา หรือชื่อโดเมน
บรรทัดที่ 21 ข้อความที่จะแสดงในหน้า facebook ของเพื่อน ใส่ข้อความเชิญชวนตามต้องการ
บรรทัดที่ 22 เป็นการกำหนดปุ่ม และ url(ตามบรรทัดที่ 9 11 และ 13) ให้เพื่อนของเราเลือก ส่วนข้อความในปุ่ม
จากตัวอย่าง คือ Join Ninenik.com ให้กำหนดตามต้องการ ใช้เป็นภาษาอังกฤษ ไม่มีเครื่องหมายหรือตัวอักขระพิเศษ
บรรทัดที่ 23 ส่วนเนื้อหาที่แสดงในหน้าเว็บของเราตอนเลือกทำการ invite friends
2.สร้างไฟล์เรียกใช้งาน form จากข้อ 1 ในที่นี้ใช้ชื่อ facebook_dialog_invite_to_join.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>facebook invite friends</title>
<style>
/* css กำหนดความกว้างของ invite form ที่แสดง */
.FB_UI_Dialog { width: 770px !important; }
/* รูปแบบปุ่มกด สำหรับทดสอบ */
#testOpen{
border:1px groove #06C;
background-color:#526da5;
color:#FFFFFF;
cursor:pointer;
}
</style>
</head>
<body>
<a href="facebook_dialog_invite_to_join.php">Reload</a>
<br />
<br />
<button type="button" id="testOpen">Suggest to Friends</button>
<div id="fb-root"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId:'1343511812',
status: true,
cookie: true,
xfbml: true
});
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript">
$(function(){
$("#testOpen").click(function(){ // คลิกที่ปุ่ม ให้แสดง ivite form
openDialog();
});
});
function openDialog(){ // ฟังก์ชัน javascript เปิด invite form
var fbml_data=$.ajax({
url:"gen_invite_form.php",
data:{g_fbml:1},
async:false,
success:function(fbml_data){
var dialog = {
method: 'fbml.dialog',
display: 'iframe',
fbml: fbml_data,
width:"80%"
};
FB.ui(dialog);
}
}).responseText;
}
</script>
</body>
</html>
3.สร้างไฟล์การตอบรับการสมัครสมาชิก หรืออื่นๆ ตามที่ประยุกต์ (ไฟล์ตามบรรทัดที่ 11 ในข้อ 1 ในที่นี้ใช้ชื่อ register_newmember.php) มีการใช้งาน facebook php sdk ด้วยการ include ไฟล์ facebook.php
สร้าง facebook.php ได้โดยก็อบปี้โค้ดจากไฟล์ http://www.ninenik.com/fb/facebook.php.txt
กำหนดรูปแบบ และการทำงานในหน้า register_newmember.php ตามต้องการ เช่นให้ทำการบันทึกสมาชิกคนนั้น
ลงฐานข้อมูลแล้วแจ้งสถานะการสมัครสมาชิก เป็นต้น
จากตัวอย่าง ตามโค้ดด้านล่าง เป็นการแสดงข้อมูลของผู้ที่สมัครสมาชิกมาเท่านั้น สามารถประยุกต์ตามต้องการ
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
include("facebook.php");
// สร้าง Application instance.
$facebook = new facebook(array(
'appId' => '1343511812', // appid ที่ได้จาก facebook
'secret' => 'f26e6a52edc970973855be5e7a7', // app secret ที่ได้จาก facebook
'cookie' => true, // อนุญาตใช้งาน cookie
));
// appId และ secret ดูวิธีการได้มาจาก
// http://www.ninenik.com/สร้าง_comment_ด้วย_social_plugins_ใน_facebook_api_อย่างง่ายดาย-291.html
// ตรวจสอบสถานะการ login
$session = $facebook->getSession();
// สร้างตัวแปรสำหรับเก็บข้อมูลของสมาชิกเมื่อได้ทำการ login แล้ว
$me = null;
// ถ้ามีการ login ดึงข้อมูลสมาชิกที่ login มาเก็บที่ตัวแปร $me เป็น array
if ($session) {
try {
$uid = $facebook->getUser();
$me = $facebook->api('/me');
} catch (FacebookApiException $e) {
error_log($e);
}
}
if($me){ // กรณีเงื่อน login อยู่
// เก็บค่า url ไว้ในตัวแปร $logoutUrl สำหรับ logout กรณีที่ได้ทำการ login อยู่
$logoutUrl = $facebook->getLogoutUrl();
}else{ // กรณีเงื่อนไข logout
// เก็บค่า url ไว้ในตัวแปร $loginUrl สำหรับ login กรณีที่ยังไม่ได้ login
$loginUrl = $facebook->getLoginUrl();
}
?>
<img src="https://graph.facebook.com/<?=$me['id']?>/picture" /> <?=$me['name']?>
<pre><?php print_r($me); ?></pre>
ปล. ตัวอย่างและวิธีการนี้ ค่อนข้างยาก และต้องอาศัยความรู้ ในการทำความเข้าใจพอสมควร จึงไม่ได้เอามาแสดงไว้ ตั้งแต่ต้น เพราะไม่รู้จะอธิบายยังไง สุดท้าย ก็ขึ้นอยู่กับแต่ละคนแล้ว ขอให้โชคดี
เข้าไปทดสอบตัวอย่างได้ที่ (ต้องล็อกอิน facebook ก่อนถึงจะเห็นรายชื่อเพื่อน)
http://www.ninenik.com/fb/facebook_dialog_invite_to_join.php
ดาวน์โหลดโค้ด ไปปรับทดสอบ
http://www.ninenik.com/download/facebook_invite.rar
อ่านเนื้อหาที่เกี่ยวกับ facebook
http://www.ninenik.com/สร้าง_comment_ด้วย_social_plugins_ใน_facebook_api_อย่างง่ายดาย-291.html
http://www.ninenik.com/ใช้_comments.get_เรียกและ_บันทึก_facebook_comment_ล่าสุด_ลงฐานข้อมูล_ด้วย_jQuery-319.html
http://www.ninenik.com/ปรับแต่ง_facebook_comments_ด้วย_css_กำหนด_style_ให้เข้ากับเว็บ-310.html
http://www.ninenik.com/การนำ_ระบบสมาชิก_ของ_facebook_มาประยุกต์ใช้-297.html
http://www.ninenik.com/เทคนิค_php_ดึงข้อมูล_comment_จาก_facebook_มาใช้งาน-295.html
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
03 Aug 11 ใช้งาน google chart ตัวใหม่สร้าง poll อย่างง่าย อ่าน 1192 03 Jun 09 สร้างระบบ slide เลื่อนซ้าย ขวา ด้วย jquery อย่างง่าย อ่าน 13397 02 Jun 09 แก้ปัญหา การดึงข้อมูล จากฐานข้อมูล เมื่อเปลี่ยน charset ใน แท็ก meta อ่าน 3376 01 Dec 10 การใช้งาน polyline และ polygon ใน google map api v3 อ่าน 3663 25 Sep 08 หาตำแหน่งของ element แนวแกน x แกน y ด้วยฟังก์ชันของ jQuery อ่าน 2583 09 Oct 09 ขยายขนาดความสูงของ iframe ตามความสูงของเพจที่แสดง ด้วย jQuery อ่าน 3600 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5414 18 Mar 10 การเก็บข้อมูลวันที่ ในฐานข้อมูล กับคำสั่ง sql ในการค้นหา อ่าน 4639 03 Nov 10 การเพิ่ม ลบ แก้ไข แบ่งหน้า ข้อมูล ด้วย jquery ajax อย่างง่าย อ่าน 5501 25 Sep 08 คำสั่ง SQL เพื่อสุ่มข้อมูลมาแสดง อ่าน 3799 15 Oct 08 สร้างลิ้งค์มีรูปภาพแสดงนามสกุลไฟล์ อ่าน 2663 08 Nov 09 เทคนิค CSS แสดงข้อมูลแบ่งเป็น คอลัมน์ แทนการใช้ตาราง Table อ่าน 7552 31 Aug 10 เทคนิค php ใช้ fgets และ javascript วนลูป loop อ่านไฟล์ ขนาดใหญ่ อ่าน 1607 24 Feb 09 เพิ่มลูกเล่นให้กับป้ายโฆษณาตรึงขอบล่าง ด้วย jQuery อ่าน 3533 29 Nov 09 กำหนด hilight ของ cell ข้อมูลในตาราง ด้วย jQuery และ CSS อย่างง่าย อ่าน 2613 30 Mar 09 ค้นหาและ hilight ข้อความในหน้าเว็บเพจด้วย jQuery อ่าน 2779 03 Sep 10 จัดรูปแบบ url ลิ้งค์ link ด้วย เทคนิค php ได้อย่างง่าย อ่าน 2488 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 4438 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 8967 25 Sep 08 ตรวจสอบโดเมน Domain ด้วย Ajax อ่าน 3193