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

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

facebook plugin facebook login

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

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

ตัวอย่างการใช้งานปุ่ม ล็อกอินของ 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>

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

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

เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ