การเชื่อมต่อ facebook และ ล็อกอิน แบบ popup ด้วย php sdk v.3.1.1

14 October 2011 By Ninenik Narkdee

popup facebook php sdk

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ popup facebook php sdk

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

แนวทางการประยุกต์ การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1 แบบสร้าง ล็อกอิน

แบบ popup window ด้วย javascript

โดยจะเป็นการประยุกต์ใช้งานจากเนื้อหาเดิม ตามลิ้งค์ด้านล่าง

http://www.ninenik.com/content.php?arti_id=423

รูปแบบการทำงานคือ เมื่อทำการคลิกที่ลิ้งค์ สำหรับล็อกอินด้วย facebook ก็จะเปิดหน้า popup

สำหรับกรอกชื่อผู้ใช้ หรือรหัสผ่าน กรณียังไม่ได้ล็อกอิน facebook อยู่ หลังจาก ล็อกอินเสร็จแล้ว

จะลิ้งค์ไปอีกหน้าหนึ่ง สำหรับสร้างค่า session และเช็ค สถานะการล็อกอิน ของผู้ใช้งาน

แล้วปิดหน้า popup นั้นลง พร้อมกับรีโหลดหน้าหลัก เป็นต้น

ดาวน์โหลดไฟล์ทดสอบ ไปปรับใช้ได้ที่

http://www.ninenik.com/fb/fb3.1.1popup.rar

หรือทดสอบตัวอย่างก่อนโหลด

http://www.ninenik.com/fb/fb3.1.1/test_login_popup.php

ไฟล์โค้ดตัวอย่าง ที่เกี่ยวข้อง

ไฟล์ test_login_popup.php

<?php
include("fb_connect_popup.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>Sample FB Login Popup</title>
</head>

<body>
<?php
//pre($fb_user);
?>
<h1>php-sdk 3.1.1</h1>

<?php if($fb_user){ // ถ้ามีการล็อกอิน facebook อยู่แล้ว แสดงลิ้งค์สำหรับ logout ?>
	<a href="<?=$logoutUrl?>">Logout</a>
<?php }else{ //  ถ้ายังไม่ได้ล็อกอิน แสดงลิ้งค์สำหรับ Login ?>
    <div>
    Login using OAuth 2.0 handled by the PHP SDK:
    <a href="javascript:popup('<?=$loginUrl?>','',500,350);">Login with Facebook</a>
    </div>
<?php } ?>


    <h3>PHP Session</h3>
    <pre><?php print_r($_SESSION); ?></pre>

<?php if($fb_user){ // ถ้ามีการล็อกอิน facebook อยู่แล้ว แสดงข้อมูลของคนๆ นั้น ?>
      <h3>You</h3>
      <img src="https://graph.facebook.com/<?=$fb_user?>/picture">

      <h3>Your User Object (/me)</h3>
      <?php 
	  pre($fb_userData); 
	  ?>
      
<?php }else{ //  ถ้ายังไม่ได้ล็อกอิน  ?>
      <strong><em>You are not Connected.</em></strong>

<?php } ?>


<script type="text/javascript">
function popup(url,name,windowWidth,windowHeight){    
	myleft=(screen.width)?(screen.width-windowWidth)/2:100;	
	mytop=(screen.height)?(screen.height-windowHeight)/2:100;	
	properties = "width="+windowWidth+",height="+windowHeight;
	properties +=",scrollbars=yes, top="+mytop+",left="+myleft;   
	window.open(url,name,properties);
}
</script>
</body>
</html>

ไฟล์ fb_connect_popup.php

<?php
session_start(); // กำหนดไว้ กรณีอาจได้ใช้ตัวแปร session
include("inc/facebook.php"); //  เรียกใช้งานไฟล์ php-sdk สำหรับ facebook
//
$facebook = new Facebook(array(
  'appId'  => 'xxxxxx', // appid ที่ได้จาก facebook
  'secret' => 'xxxxxxxx',  // app secret ที่ได้จาก facebook
  'fileUpload' => true, // เปิดใช้ในส่วนของการอัพโหลดรูปได้
  'cookie' => true, // อนุญาตใช้งาน cookie  
));
// สร้างฟังก์ชันไว้สำหรัดทดสอบ การแสดงผลการใช้งาน
function pre($varUse){
	echo "<pre>";
	print_r($varUse);
	echo "</pre>";
}
// Get User ID
$fb_user = $facebook->getUser();
if($fb_user){
  try{
    // Proceed knowing you have a logged in user who's authenticated.
    $fb_userData=$facebook->api('/me');
  }catch(FacebookApiException $e) {
    error_log($e);
    $user=null;
  }
}
if(isset($_GET['logout'])){ // ทำการ logout อย่างสมบูรณ์
	$facebook->destroySession(null); 	// ล่างค่า session ของ facebook
	header("Location:".$_SERVER['PHP_SELF']); //ลิ้งค์ไปหน้าที่ต้องการเมื่อ logout เรียบร้อยแล้ว
}
// Login or logout url will be needed depending on current user state.
if($fb_user){
  $logoutUrl = $facebook->getLogoutUrl(array(
  	"next"=>"http://www.ninenik.com/fb/fb3.1.1/test_login_popup.php?logout"
  ));
} else{
  $loginUrl = $facebook->getLoginUrl(array(
  	"redirect_uri"=>"http://www.ninenik.com/fb/fb3.1.1/fb_checklogin.php",
	"display"=>"popup",
	"scope"=>"offline_access,publish_stream,email" // คั่นแต่ละค่าด้วย ,(comma
  ));
}
?>

ไฟล์ fb_checklogin.php

<?php
include("fb_connect_popup.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Check Login</title>
</head>

<body>
<script type="text/javascript">
window.opener.location.reload();
window.close();
</script>
</body>
</html>

Tags:: facebook php sdk popup

อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ

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