การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook
19 March 2011 By Ninenik Narkdeelogin facebook plugin facebook
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ login facebook plugin facebook
ตัวอย่างการใช้งานปุ่ม ล็อกอินของ 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>
ตัวอย่าง
ปุ่ม ล็อกอิน ด้วย facebook ขนาดกลาง พร้อมกำหนดข้อความที่ต้องการแสดงเอง
<fb:login-button size="medium" onlogin="window.location='index.php'"> Connect with Facebook </fb:login-button>
ตัวอย่าง
ปุ่ม ล็อกอิน ด้วย facebook ขนาดใหญ่ พร้อมกำหนดข้อความที่ต้องการแสดงเอง
<fb:login-button size="large" onlogin="window.location='index.php'"> Login with Facebook </fb:login-button>
ตัวอย่าง
ปุ่ม ล็อกอิน ด้วย facebook ขนาดใหญ่ที่สุด พร้อมกำหนดข้อความที่ต้องการแสดงเอง
<fb:login-button size="xlarge" onlogin="window.location='index.php'"> Find Friends </fb:login-button>
ตัวอยาง
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>
