การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook
19 March 2011ตัวอย่างการใช้งานปุ่ม ล็อกอินของ 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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
17 Mar 09 ง่ายๆ กับการส่งค่าตัวแปร PHP ไปใช้ใน Javascript อ่าน 5706 24 Feb 10 เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย อ่าน 4610 16 Aug 09 เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker อ่าน 17951 17 Dec 10 สร้าง php ฟังก์ชัน ตราจสอบ ก่อนถึงวันหมดอายุ อย่างง่าย อ่าน 1907 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3 อ่าน 3815 06 Oct 10 การใช้งาน graph api ของ facebook ด้วย php sdk อ่าน 3937 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5672 02 Apr 11 การอ้างอิง object ในหน้าหลัก จากหน้า popup ด้วย jQuery อย่างง่าย อ่าน 2690 27 May 10 ทบทวน ลำดับ การทำงาน mouse events ใน jQuery อ่าน 2393 05 Nov 08 CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 9412 07 Sep 11 นาฬิกาเวลา จาก server อย่างง่าย อ่าน 1011 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 3700 04 Nov 09 ประยุกต์สร้าง pdf ไฟล์ จาก tcpdf class ด้วย php รองรับภาษาไทย อ่าน 5408 19 Oct 08 คำสั่ง SQL functions อ่าน 4491 18 Oct 08 สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4265 18 Aug 10 ใช้ php ดึงรูปภาพ จากโฟลเดอร์ มาแสดง พร้อม เทคนิค แบ่งหน้า อ่าน 4736 09 Aug 10 ประยุกต์ jQuery UI ปฏิทิน Datepicker แสดงภาษาไทย และใช้ ปี พ.ศ. อ่าน 9078 08 Feb 12 Google map API v.3 กับ jQuery ลากจุดหา ชื่อตำแหน่ง และ พิกัด ค่า latitude longitude อ่าน 322 07 Jun 09 กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย อ่าน 5731 19 Nov 10 ทางเลือก อัพโหลดไฟล์ใน ckeditor ด้วย ajax file manager อ่าน 2244