ปุ่มเข้าสู่ระบบ

ปุ่มเข้าสู่ระบบเป็นวิธีง่ายๆ ในการเริ่มต้นกระบวนการเข้าสู่ระบบด้วย Facebook บนเว็บไซต์หรือแอพบนเว็บของคุณ

หากผู้ใช้ยังไม่ได้เข้าสู่ระบบแอพของคุณ ผู้ใช้เหล่านั้นจะเห็นปุ่มนี้ และเมื่อคลิกที่ปุ่มนี้ ระบบก็จะเปิดกล่องการเข้าสู่ระบบขึ้นมา ซึ่งเป็นการเริ่มต้นขั้นตอนการเข้าสู่ระบบ ส่วนผู้ใช้ที่เข้าสู่ระบบอยู่แล้วจะไม่เห็นปุ่มใดๆ หรือคุณจะเลือกแสดงปุ่มออกจากระบบให้กับผู้ใช้เหล่านี้ก็ได้เช่นกัน

หากคุณแสดงปุ่มออกจากระบบ เมื่อผู้ใช้ใช้ปุ่มดังกล่าวเพื่อออกจากระบบ ผู้ใช้จะออกจากระบบทั้งแอพของคุณและจาก Facebook

ปุ่มเข้าสู่ระบบได้รับการออกแบบมาเพื่อทำงานร่วมกับ JavaScript SDK เท่านั้น หากคุณกำลังสร้างแอพมือถือหรือไม่สามารถใช้ JavaScript SDK ของเราได้ คุณควรปฏิบัติตามคำแนะนำเกี่ยวกับขั้นตอนการเข้าสู่ระบบสำหรับแอพประเภทนั้นๆ แทน

ปุ่มดำเนินการต่อด้วย Facebook จะเข้ามาแทนที่ปุ่มเข้าสู่ระบบเวอร์ชั่นต่างๆ ก่อนหน้านี้ โปรดดูข้อมูลเพิ่มเติมที่การย้าย

ตัวกำหนดค่าปลั๊กอิน

ปุ่ม “ดำเนินการต่อในชื่อ {Name}”

ปุ่ม “ดำเนินการต่อในชื่อ {Name}” จะมีข้อความว่า “ดำเนินการต่อในชื่อ {persons' name}” อยู่ และอาจจะมีรูปโปรไฟล์ของบุคคลนั้นๆ อยู่ด้วยก็ได้ หากผู้ใช้เหล่านั้นเข้าสู่ระบบ Facebook ในเบราว์เซอร์เดียวกัน หากต้องการใช้ปุ่ม “ดำเนินการต่อในชื่อ {Name}” คุณจะต้องโหลด JavaScript SDK เสียก่อน โปรดดูคำแนะนำเกี่ยวกับการตั้งค่า JavaScript SDK ที่การเริ่มต้นใช้งานอย่างง่ายสำหรับ JavaScript SDK เปิดใช้งาน “ดำเนินการต่อในชื่อ {Name}” โดยการเพิ่ม data-use-continue-as="true" ลงในการตั้งค่าสำหรับปุ่มของคุณ

คุณไม่สามารถปรับแต่งความสูงของปุ่ม “ดำเนินการต่อในชื่อ {Name}” ได้

หากคุณเลือกขนาดที่เกินกว่าพารามิเตอร์สูงสุด ปุ่มดังกล่าวจะใช้ค่าเริ่มต้นเป็นความกว้างสูงสุด

หลักปฏิบัติที่ดีที่สุดสำหรับปุ่ม “ดำเนินการต่อในชื่อ {Name}”

ปุ่ม “ดำเนินการต่อในชื่อ {Name}” อาจเป็นวิธีที่ดีในการเพิ่มจำนวนการคลิกและการมีส่วนร่วม ซึ่งช่วยให้ผู้ใช้สามารถเห็นรูปโปรไฟล์และชื่อบนปุ่มเข้าสู่ระบบของเราได้ และอาจช่วยให้แอพของคุณเหมาะกับแต่ละบุคคลมากยิ่งขึ้น

ด้วยเหตุนี้ อาจเป็นเรื่องน่าสับสนได้เช่นกันหากผู้ใช้ไม่ได้คาดหวังว่าจะเห็นชื่อและรูปโปรไฟล์ของตนในบริบทนี้ โปรดพิจารณาสิ่งต่อไปนี้เพื่อดูว่า “ดำเนินการต่อในชื่อ” เหมาะกับแอพของคุณที่สุดหรือไม่

แม้ว่า “ดำเนินการต่อในชื่อ {Name}” จะไม่เหมาะกับแอพของคุณ แต่คุณก็ยังคงสามารถลองใช้ปุ่ม JavaScript SDK แบบใหม่ๆ ที่ระบุว่า “ดำเนินการต่อด้วย Facebook” ได้

กรณีการใช้งานที่แนะนำ

เราให้บริการแก่ฐานผู้ใช้ทั่วโลก และภูมิภาคต่างๆ ก็มีความคาดหวังของผู้ใช้ที่แตกต่างกันไป ให้คำนึงถึงความคาดหวังเหล่านั้นอยู่เสมอเวลาที่ใช้ปุ่มนี้

เหมาะอย่างยิ่งในเวลาดังนี้

• แอพของคุณเป็นแอพโซเชียล:
  เมื่อผู้คนใช้แอพโซเชียล ผู้ใช้เหล่านี้จะคาดหวังว่าจะได้เชื่อมต่อกับคนอื่นๆ เราได้เห็นแล้วว่า “ดำเนินการต่อในชื่อ {Name}” มีประสิทธิภาพดีในกรณีเหล่านี้

• ผู้คนในตลาดเป้าหมายใช้โทรศัพท์ร่วมกัน:
  เมื่อมีคนหลายคนใช้โทรศัพท์เดียวกัน “ดำเนินการต่อในชื่อ {Name}” จะช่วยเน้นย้ำให้บุคคลเหล่านี้มั่นใจได้ว่ากำลังใช้บัญชีที่ถูกต้องอยู่

หลีกเลี่ยงในเวลาดังนี้

• แอพของคุณเป็นแอพใหม่:
  หากแอพของคุณเพิ่งเข้ามาในตลาด ผู้ใช้ของคุณอาจมีแนวโน้มมากขึ้นที่จะเกิดความสับสนว่าเหตุใดชื่อและรูปโปรไฟล์ของตนจึงแสดงขึ้นโดยอัตโนมัติ โดยเปรียบเทียบกับแอพซึ่งเป็นที่รู้จักหรือคุ้นเคยที่ผู้ใช้วางแผนที่จะใช้เป็นประจำ

• ผู้คนในตลาดเป้าหมายมีความกังวลในเรื่องความเป็นส่วนตัว:
  ในหลายประเทศ รูปโปรไฟล์ถือเป็นข้อมูลที่มีความเป็นส่วนตัวมาก คุณอาจต้องหลีกเลี่ยงโดยใช้ “ดำเนินการต่อในชื่อ {Name}” ในกรณีนี้ เนื่องจากระบบจะแสดงรูปโปรไฟล์ของผู้ใช้ที่เข้าสู่ระบบแล้ว

หลักปฏิบัติที่ดีที่สุดสำหรับปุ่มเข้าสู่ระบบ

โปรดปฏิบัติตามหลักปฏิบัติที่ดีที่สุดทั่วไปสำหรับการใช้การเข้าสู่ระบบด้วย Facebook การปฏิบัติตามหลักปฏิบัติที่ดีที่สุด 2 ประการเหล่านี้เป็นสิ่งสำคัญอย่างยิ่งเมื่อใช้ “ดำเนินการต่อในชื่อ {Name}”

• ให้วิธีในการออกจากระบบ (นโยบายกำหนดให้มี)
• ทดสอบและวัดผล นั่นคือ ระบุว่าฟีเจอร์นี้จะส่งผลกระทบอย่างไรบ้างต่อการรับรู้และคอนเวอร์ชั่นของผู้ใช้

หลักปฏิบัติที่ดีที่สุดอื่นๆ บางส่วนที่เป็นไปได้มีดังนี้

• ระบุอย่างชัดเจนว่าการเข้าสู่ระบบจะทำอะไรได้บ้าง
• ใช้ตัวยึดตำแหน่ง/ตัวหมุนในขณะที่ปุ่มเข้าสู่ระบบกำลังโหลดอยู่ และนำตัวยึดตำแหน่ง/ตัวหมุนออกเมื่อโหลดปุ่มเสร็จแล้ว ตัวอย่างของโค้ดดังกล่าวมีดังนี้

<script>
var finished_rendering = function() {
  console.log("finished rendering plugins");
  var spinner = document.getElementById("spinner");
  spinner.removeAttribute("style");
  spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
    style="
        background: #4267b2;
        border-radius: 5px;
        color: white;
        height: 40px;
        text-align: center;
        width: 250px;">
    Loading
    <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="large"
    data-button-type="continue_with"
    data-use-continue-as="true"
    ></div>
</div>

การตั้งค่า

นอกเหนือจากการตั้งค่าข้างต้นแล้ว คุณยังสามารถเปลี่ยนรายการต่อไปนี้ได้

การย้าย

ระบบจะย้ายปุ่มแบบเก่าไปใช้ปุ่มแบบใหม่แทน ตารางต่อไปนี้จะแสดงการจับคู่

ปุ่ม “Continue as {Name}” แบบใหม่นี้จะมีพารามิเตอร์ที่เรียกว่า button_type ซึ่งไม่จำเป็นต้องใช้สำหรับปุ่มแบบเก่า พารามิเตอร์นี้เป็นวิธีที่คุณใช้ระบุถึงปุ่ม “ดำเนินการต่อด้วย Facebook” หรือ “เข้าสู่ระบบด้วย Facebook” หากคุณไม่ได้ระบุประเภทของปุ่ม ระบบจะแสดงปุ่มเป็นปุ่มใหม่ขนาดเล็กๆ โดยขนาดนี้จะอยู่ในระดับปานกลางเมื่อเทียบกับปุ่มแบบเก่า ทั้งนี้ ในกรณีของ x-large ปุ่มจะย่อขนาดลงเล็กน้อย แต่หากคุณระบุพารามิเตอร์ button_type ไว้ ปุ่มของคุณก็จะปรากฏตามที่ระบุ

คุณสามารถทำให้ปุ่มโหลดเร็วขึ้นได้โดยการเปิดใช้ JavaScript SDK โดยเร็วที่สุด แต่ระบบไม่สามารถโหลดปุ่มได้จนกว่าเว็บเพจและ JavaScript จะโหลดเสร็จ จากนั้นจึงจะสามารถสร้าง iframe และโหลดทรัพยากรต่างๆ ในการแสดงปุ่มได้

 <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="<medium, large>"
    data-button-type="continue_with"
    data-width="<100% or px>"
    data-scope="<comma separated list of permissions, e.g. public_profile, email>"
></div>
}

การแปลเป็นภาษาท้องถิ่น:

การโหลดปุ่มเป็นรูปแบบภาษาอื่นจำเป็นต้องใช้ JavaScript SDK จึงจะโหลดรูปแบบภาษานั้นๆ ได้ โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการแปล JavaScript SDK เป็นภาษาท้องถิ่นที่การแปลเป็นภาษาท้องถิ่นด้วยโซเชียลปลั๊กอินและ JavaScript SDK

คำถามที่พบบ่อย

ฉันจะใช้ปุ่มนี้เพื่อให้ผู้ใช้เข้าสู่ระบบได้อย่างไร

ทันทีที่มีคนคลิกที่ปุ่มเข้าสู่ระบบและยอมรับกล่องการเข้าสู่ระบบ (กล่าวคือ ทำตามขั้นตอนการเข้าสู่ระบบจนเสร็จสมบูรณ์) แอพของคุณก็จะสามารถใช้ Facebook SDK สำหรับ JavaScript เพื่อเรียกใช้ API ในนามของบุคคลนั้นๆ ได้เลย

คุณไม่จำเป็นต้องตั้งค่าใดๆ เพิ่มเติมในส่วนนี้ แต่คุณสามารถใช้การตั้งค่า onlogin ในปุ่มเพื่อเริ่มใช้งานฟังก์ชั่น JavaScript ของคุณเอง ซึ่งจะทำงานเมื่อมีการเข้าสู่ระบบ

คุณสามารถใช้ปุ่มเข้าสู่ระบบกับโค้ดการลงทะเบียนในฝั่งเซิร์ฟเวอร์ได้หรือไม่

ใช้ได้ แต่คุณยังจำเป็นต้องใช้ JavaScript SDK ในบางส่วน ทันทีที่กระบวนการเข้าสู่ระบบที่เริ่มต้นจากการคลิกปุ่มเสร็จสิ้นลงแล้ว SDK จะมีสิทธิ์เข้าถึงอ็อบเจ็กต์ authResponse โดยใช้ FB.getLoginStatus() คุณสามารถใช้ฟังก์ชั่นนี้เพื่อส่งอ็อบเจ็กต์การตอบกลับไปยังโค้ดฝั่งเซิร์ฟเวอร์ของคุณได้ เพื่อทำการลงทะเบียนที่มีอยู่นั้นให้เสร็จสมบูรณ์

ฉันสามารถใช้ปุ่มเข้าสู่ระบบเพื่อร้องขอสิทธิ์การอนุญาตที่ผู้ใช้ได้ปฏิเสธไปแล้วอีกครั้งได้หรือไม่

ปุ่มเข้าสู่ระบบไม่รองรับการส่งคำขออีกครั้ง เนื่องจากการร้องขอสิทธิ์การอนุญาตที่ถูกปฏิเสธไม่ได้สอดคล้องกับถ้อยคำที่อยู่บนปุ่ม หากคุณจำเป็นต้องร้องขอสิทธิ์การอนุญาตอีกครั้ง ให้ตั้งค่าปุ่มที่กำหนดเองและใช้ FB.login() ตามที่อธิบายไว้ในเอกสารประกอบเรื่องการเข้าสู่ระบบด้วย Facebook สำหรับเว็บ

ปุ่มไม่แสดง

ระบบจะแปลงแท็ก <div> เป็นปุ่มที่แสดงขึ้น โดยใช้เทคโนโลยีที่เรียกว่า XFBML ซึ่งอาศัย JavaScript ใน SDK ในการแยกวิเคราะห์หน้าและทำการแทนที่ต่างๆ หากคุณเปลี่ยนแปลงเนื้อหาบนหน้าอยู่ตลอด เพื่อเพิ่ม div เหล่านี้หลังจากที่เมธอด init ของ SDK ได้รันไปแล้ว (เช่น ในกล่องโต้ตอบที่สร้างขึ้นแบบไดนามิก) คุณจำเป็นต้องเรียกใช้ FB.XFBML.parse() อีกครั้ง เพื่อให้การเปลี่ยนแปลงนั้นแสดงผล