กำหนด รายละเอียด การใช้งาน facebook login button เพิ่มเติม

20 March 2011 เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee

facebook plugin login facebook

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

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

การกำหนด permission
เมื่อเราต้องการกำหนด permission เพิ่มเพื่อร้องขอไปยังผู้ใช้ facebook ที่กำลังล็อกอิน ว่า
จะอนุญาต ให้ app id นี้สามารถเข้าไปใช้งานข้อมูลใดๆ บ้างของผู้ที่กำลังล็อกอิน ทำได้โดยการกำหนด
attribute ชื่อ perms เข้าไปใน แท้ก fb:login-button ตัวอย่าง

<fb:login-button perms="email,publish_stream" 
onlogin="window.location='index.php'">
</fb:login-button>

จากตัวอย่าง perms="email,publish_stream" คือ ร้องขอไปยังผู้ใช้ facebook ที่กำลังล็อกอิน ว่าต้องการ
ได้รับอนุญาตจากผู้ใช้ ในการเข้าถึงข้อมูลอีเมลล์ และสามารถโพสข้อความไปที่หน้า profile ของผู้ใช้

ข้อมูลอ้างอิง สำหรับการกำหนด permission เพิ่มเติม สามารถเข้าไปดูได้ที่
http://developers.facebook.com/docs/authentication/permissions/

การแสดงรูป และชื่อผู้ล็อกอิน
การแสดงรูป และชื่อผู้ล็อกอิน สามารถกำหนด attribute ชื่อ show-faces
เข้าไปใน แท้ก fb:login-button ตัวอย่าง

<fb:login-button perms="email,publish_stream" 
show-faces="yes"
onlogin="window.location='index.php'">
</fb:login-button>

การแสดงปุ่ม ล็อกอิน โดยขณะที่ล็อกอินอยู่ ให้แสดงเป็น ปุ่มสำหรับ ล็อกเอาท์ อัตโนมัติ
เราสามารถใช้รูปแบบปุ่ม ล็อกอิน ได้ดังนี้

<fb:login-button perms="email,publish_stream" 
autologoutlink="true" 
onlogin="window.location='index.php'">
</fb:login-button>

ประยุกต์ การสร้างปุ่มล็อกอิน ที่เปลี่ยนเป็นปุ่ม ล็อกเอาท์ อัตโนมัติ เมื่อ ล็อกอิน อยู่
พร้อมแสดงรูปภาพ และชื่อผู้ใช้

<div style="width:200px;text-align:center;">
<?php 
if(isset($_COOKIE['fbs_xxxxxxxx'])){  ///   xxxxxxxx  คือ app id เช่น app id  = 123456789 ก็จะได้เป็น fbs_123456789  
?>
<fb:login-button show-faces="yes"></fb:login-button>
<br />
<br />
<?php } ?>
<fb:login-button 
perms="email,read_stream,user_checkins" 
autologoutlink="true" onlogin="window.location='facebook_js_sdk_02.php'">
</fb:login-button>
</div>

ตัวอย่างโค้ดทดสอบ ใช้งานร่วม JavaScript SDK

<!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></title>
</head>

<body>

<div style="width:200px;text-align:center;">
<?php 
if(isset($_COOKIE['fbs_xxxxxxxx'])){  ///   xxxxxxxx  คือ app id เช่น app id  = 123456789 ก็จะได้เป็น fbs_123456789  
?>
<fb:login-button show-faces="yes"></fb:login-button>
<br />
<br />
<?php } ?>
<fb:login-button 
perms="email,read_stream,user_checkins" 
autologoutlink="true" onlogin="window.location='facebook_js_sdk_02.php'">
</fb:login-button>
</div>




<div id="fb-root"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  window.fbAsyncInit = function() {
	  FB.init({
		appId  : 'YOUR APP ID', // ใส่ APP ID
		status : true, // check login status
		cookie : true, // enable cookies to allow the server to access the session
		xfbml  : true  // parse XFBML
	  });
  };
  (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(){
	// jQuery code
});
</script>
</body>
</html>

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