กล่องการแชร์

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

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

หากต้องการนำกล่องการแชร์ไปใช้ในแอพเฉพาะสำหรับอุปกรณ์มือถือ โปรดอ่านคำแนะนำของเราสำหรับ iOS และ Android

การผสานการทำงาน

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

Facebook SDK สำหรับ JavaScript

ทริกเกอร์กล่องการแชร์โดยใช้ฟังก์ชั่น FB.ui ที่มีพารามิเตอร์วิธีการ share ในการแชร์ลิงก์

หากต้องการแชร์ลิงก์:

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/',
}, function(response){});
ลองใช้ด้วยตัวเอง!

ใส่แท็กเมตาของ Open Graph บนเพจที่ URL นี้เพื่อปรับรูปแบบเรื่องราวที่แชร์กลับไปที่ Facebook

โปรดทราบว่า response.error_message จะปรากฏขึ้นเฉพาะเมื่อมีผู้ใช้แอพของคุณได้ให้การรับรองแอพของคุณด้วยการเข้าสู่ระบบด้วย Facebook

พารามิเตอร์

พารามิเตอร์ที่ใช้บ่อย

JS SDK จะให้พารามิเตอร์เหล่านี้โดยอัตโนมัติ

พารามิเตอร์คำอธิบาย

app_id

ตัวระบุที่ไม่ซ้ำกันของแอพของคุณ ต้องระบุ

redirect_uri

URL ที่จะเปลี่ยนเส้นทางไปหลังจากที่ผู้ใช้คลิกที่ปุ่มในกล่องโต้ตอบ ต้องมีเมื่อใช้การทำ URL

display

กำหนดวิธีการแสดงกล่องโต้ตอบ

  • หากคุณกำลังใช้กล่องโต้ตอบการเปลี่ยนเส้นทาง URL ก็จะกลายเป็นการแสดงผลเต็มหน้าที่ปรากฏใน Facebook.com การแสดงผลประเภทนี้เรียกว่า page
  • หากคุณกำลังใช้หนึ่งใน iOS หรือ Android SDK ในการเริ่มกล่องโต้ตอบ สิ่งนี้จะถูกระบุโดยอัตโนมัติและเลือกชนิดการแสดงผลที่เหมาะสมสำหรับอุปกรณ์
  • หากคุณกำลังใช้ Facebook SDK สำหรับ JavaScript จะมีการกำหนดค่าเริ่มต้นเป็น iframe แบบโหมดสำหรับผู้ที่เข้าสู่ระบบแอพของคุณ หรือใน async เมื่อใช้ภายในเกมบน Facebook.com และหน้าต่าง popup สำหรับคนอื่น คุณยังสามารถบังคับชนิด popup ในขณะใช้ Facebook SDK สำหรับ JavaScript ได้หากจำเป็น
  • แอพบนเว็บไซต์สำหรับอุปกรณ์มือถือจะกำหนดค่าเริ่มต้นเป็นการแสดงผลประเภท touch เสมอ

พารามิเตอร์ share

พารามิเตอร์คำอธิบายค่าเริ่มต้น

href

ลิงก์ที่แนบมากับโพสต์นี้ ต้องมีเมื่อใช้วิธี share ใส่แท็กเมตาของ Open Graph ในเพจที่ URL นี้เพื่อปรับแต่งเรื่องราวที่แชร์

URL ปัจจุบัน

hashtag

แฮชแท็กถูกระบุโดยผู้พัฒนาเพื่อเพิ่มไปยังบริบทที่ถูกแชร์ ผู้ใช้จะยังมีโอกาสในการลบแฮชแท็กนี้ในกล่องโต้ตอบได้ แฮชแท็กควรมีเครื่องหมายแฮช เช่น #facebook

null

quote

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

null

mobile_iframe

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

false


ข้อมูลการตอบสนอง

พารามิเตอร์ คำอธิบาย

post_id

ใช้ได้เฉพาะเมื่อผู้ใช้ลงชื่อเข้าใช้แอพของคุณโดยใช้ Facebook และได้อนุญาต publish_actions แล้วเท่านั้น ID นี้เป็น ID ของข้อมูล Open Graph ที่เผยแพร่ ถ้ามี

error_message

ใช้ได้เฉพาะเมื่อผู้ใช้เข้าสู่ระบบแอพของคุณโดยใช้การเข้าสู่ระบบด้วย Facebook เท่านั้น

หัวข้อขั้นสูง

คุณยังสามารถใช้ประโยชน์จากคุณสมบัติขั้นสูงต่อไปนี้

กล่องการแชร์สำหรับเว็บบนมือถือ

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

ตัวอย่างรหัส

ในการเปิดใช้งานกล่องการแชร์ของเว็บบนมือถือใน iFrame ให้ตั้งค่าแอตทริบิวต์ mobile_iframe เป็น true:

FB.ui({
  method: 'share',
  mobile_iframe: true,
  href: 'https://developers.facebook.com/docs/',
}, function(response){});
ลองใช้ด้วยตัวเอง!

การทำ URL Redirect

หากต้องการแชร์ลิงก์:

https://www.facebook.com/dialog/share?
  app_id=145634995501895
  &display=popup
  &href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
  &redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

หมายเหตุ: เมื่อทำการทดสอบรหัสนี้ ให้ลบการขึ้นบรรทัดใหม่ออก ไม่เช่นนั้นอาจมีข้อผิดพลาดเกิดขึ้น

การดำเนินการของ Open Graph

ทริกเกอร์กล่องการแชร์โดยการใช้ฟังก์ชั่น FB.ui ที่มีพารามิเตอร์วิธีการ share_open_graph ในการแชร์ข้อมูล Open Graph

หากต้องการแชร์ข้อมูล Open Graph ด้วยกล่องโต้ตอบ:

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.likes',
  action_properties: JSON.stringify({
    object:'https://developers.facebook.com/docs/',
  })
}, function(response){});

โปรดทราบว่าการเปลี่ยนเส้นทาง URL จะทำงานด้วยวิธีเดียวกันกับที่ทำสำหรับการแชร์ลิงก์แบบมาตรฐาน

พารามิเตอร์ share_open_graph

ใช้พารามิเตอร์เดียวกันกับที่ใช้สำหรับการแชร์ลิงก์มาตรฐาน แต่เพิ่มสิ่งต่อไปนี้

พารามิเตอร์ คำอธิบาย

action_type

สตริงที่กำหนดชนิดการดำเนินการของ Open Graph ในการเผยแพร่ เช่น og.likes สำหรับชนิดที่คล้ายกับสร้างไว้ภายใน นอกจากนี้ กล่องโต้ตอบยังรองรับประเภทที่กำหนดเองที่ได้รับอนุมัติแล้วด้วย ต้องมีเมื่อใช้วิธี share_open_graph

action_properties

อ็อบเจ็กต์ JSON ของคู่คีย์/ค่าที่ระบุพารามิเตอร์ซึ่งสอดคล้องกับ action_type ที่ใช้ คู่คีย์/ค่าที่ถูกต้องคือพารามิเตอร์เดียวกับที่สามารถนำมาใช้เมื่อทำ การเผยแพร่การดำเนินการของ Open Graph โดยการใช้ API ต้องมีเมื่อใช้วิธี share_open_graph

กล่องโต้ตอบ share_open_graph ไม่รองรับ mobile_iframe: true