PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ประยุกต์ การ invite friends ใน facebook มาใช้งาน

06 September 2010 By


โค้ดตัวอย่างที่จะได้นำเสนอต่อไป เป็นการประยุกต์ใช้ การ 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

 


Tags:: invite friends facebook





URL สำหรับอ้างอิง