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

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

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

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

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

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

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

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

ปุ่ม “ดำเนินการต่อในชื่อ {Name}” จะมีข้อความ “ดำเนินการต่อในชื่อ {persons' name}” และอาจมีรูปโปรไฟล์บน Facebook ของบุคคลผู้นั้นด้วยหากเข้าสู่ระบบด้วย 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 การปฏิบัติตามหลักปฏิบัติที่ดีที่สุดสองอย่างนี้เป็นสิ่งสำคัญโดยเฉพาะอย่างยิ่งเมื่อใช้ “ดำเนินการต่อในชื่อ {Name}”

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

หลักปฏิบัติที่ดีที่สุดอื่นๆ ที่สามารถใช้ได้ ได้แก่

• ระบุให้ชัดเจนว่าการเข้าสู่ระบบจะดำเนินการอะไร
• ใช้ตัวยึดตำแหน่ง (Placeholder) หรือสัญลักษณ์ตัวหมุน (Spinner) ขณะโหลดปุ่มเข้าสู่ระบบและนำออกเมื่อโหลดปุ่มเสร็จแล้ว ตัวอย่างของโค้ดดังกล่าว ได้แก่

<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>

การตั้งค่า

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

การย้าย

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

ปุ่ม “ดำเนินการต่อในชื่อ {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 เหล่านี้หลังจากที่ SDK เมธอด init ทำงานแล้ว (เช่น ในกล่องโต้ตอบที่สร้างแบบไดนามิก) คุณต้องเรียก FB.XFBML.parse() อีกครั้งเพื่อให้การแปลงมีผล