การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook
เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdeefacebook plugin login facebook
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ facebook plugin login facebook
ไปที่ Copy
ตัวอย่างการใช้งานปุ่ม ล็อกอินของ 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>
