PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook

19 March 2011 By


ตัวอย่างการใช้งานปุ่ม ล็อกอินของ facebook แบบไม่แสดงรูป มีรูปแบบต่างๆให้เลือกใช้งาน
ดังต่อไปนี้

รูปแบบมาตรฐาน
 

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

ตัวอย่าง

รูปแบบเปลี่ยนเป็นปุ่ม ล็อกเอาท์ อัตโนมัติ มีล็อกอินอยู่
 

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

ตัวอย่าง

ปุ่ม ล็อกอิน ด้วย facebook ขนาดเล็ก พร้อมกำหนดข้อความที่ต้องการแสดงเอง
 

<fb:login-button size="small" onlogin="window.location='index.php'">
Connect
</fb:login-button>

ตัวอย่าง
Connect

ปุ่ม ล็อกอิน ด้วย facebook ขนาดกลาง พร้อมกำหนดข้อความที่ต้องการแสดงเอง
 

<fb:login-button size="medium" onlogin="window.location='index.php'">
Connect with Facebook
</fb:login-button>

ตัวอย่าง
Connect with Facebook

ปุ่ม ล็อกอิน ด้วย facebook ขนาดใหญ่ พร้อมกำหนดข้อความที่ต้องการแสดงเอง
 

<fb:login-button size="large" onlogin="window.location='index.php'">
Login with Facebook
</fb:login-button>

ตัวอย่าง
Login with Facebook

ปุ่ม ล็อกอิน ด้วย facebook ขนาดใหญ่ที่สุด พร้อมกำหนดข้อความที่ต้องการแสดงเอง
 

<fb:login-button size="xlarge" onlogin="window.location='index.php'">               
Find Friends
</fb:login-button>

ตัวอยาง
Find Friends

onlogin คือ เหตุการณ์กำหนด เมื่อได้ทำการล็อกอินแล้ว ให้ทำงานคำสั่ง JavaScript ที่ต้องการ ในตัวอย่างคือ
ให้ลิ้งค์ไปที่ไฟล์ index.php
onlogin="window.location='index.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></title>
</head>

<body>

รูปแบบมาตรฐาน<br />
ตัวอยาง<br />
<fb:login-button onlogin="window.location='index.php'">
</fb:login-button>
<br />
<br />
<br />
รูปแบบเปลี่ยนเป็นปุ่ม ล็อกเอาท์ อัตโนมัติ มีล็อกอินอยู่<br />
ตัวอยาง<br />
<fb:login-button autologoutlink="true" onlogin="window.location='index.php'">
</fb:login-button>
<br />
<br />
<br />

ปุ่ม ล็อกอิน ด้วย facebook ขนาดเล็ก พร้อมกำหนดข้อความที่ต้องการแสดงเอง<br />
ตัวอยาง<br />
<fb:login-button size="small" onlogin="window.location='index.php'">
Connect
</fb:login-button>
<br />
<br />
<br />
ปุ่ม ล็อกอิน ด้วย facebook ขนาดกลาง พร้อมกำหนดข้อความที่ต้องการแสดงเอง<br />
ตัวอยาง<br />
<fb:login-button size="medium" onlogin="window.location='index.php'">
Connect with Facebook
</fb:login-button>
<br />
<br />
<br />
ปุ่ม ล็อกอิน ด้วย facebook ขนาดใหญ่ พร้อมกำหนดข้อความที่ต้องการแสดงเอง<br />
ตัวอยาง<br />
<fb:login-button size="large" onlogin="window.location='index.php'">
Login with Facebook
</fb:login-button>
<br />
<br />
<br />
ปุ่ม ล็อกอิน ด้วย facebook ขนาดใหญ่ที่สุด พร้อมกำหนดข้อความที่ต้องการแสดงเอง<br />
ตัวอยาง<br />
<fb:login-button size="xlarge" onlogin="window.location='index.php'">               
Find Friends
</fb:login-button>




<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>

 


Tags:: facebook plugin login facebook





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