การแชร์บน iOS

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

นอกจากนี้ ผู้ใช้ยังแชร์เนื้อหาจากแอพของคุณไปยัง Facebook Messenger ด้วยแพลตฟอร์ม Messenger Expression หรือจากกล่องการส่งข้อความใน SDK สำหรับ iOS ได้อีกด้วย

Messenger SDK สำหรับ iOSกล่องการส่งข้อความ

ข้อกำหนดที่ต้องดำเนินการก่อน

ก่อนเพิ่มการแชร์ไปยังแอพ คุณต้องดำเนินการต่อไปนี้:

  • เพิ่ม Facebook SDK สำหรับ iOS ลงในสภาพแวดล้อมการพัฒนาบนอุปกรณ์มือถือของคุณ
  • กำหนดค่าและเชื่อมโยง ID ของแอพของ Facebook
  • เพิ่ม ID ของแอพ, ชื่อที่แสดง และเหตุผลที่มนุษย์สามารถอ่านได้สำหรับการเข้าถึงรูปภาพในไฟล์ .plist ของแอพของคุณ
  • เชื่อมโยง FBSDKShareKit.framework กับโปรเจ็กต์ของคุณ

แอพไม่ควรกรอกเนื้อหาที่จะแชร์ไว้ล่วงหน้า เนื่องจากไม่สอดคล้องกับนโยบายแพลตฟอร์มของ Facebook โปรดดูนโยบายแพลตฟอร์มของ Facebook, 2.3

การเริ่มต้นใช้งาน SDK สำหรับ iOS

การทำโมเดลเนื้อหา

Facebook SDK เวอร์ชั่น 4.0 ขึ้นไปมีโมเดลใหม่สำหรับการแชร์เนื้อหา เนื้อหาแต่ละประเภทมีอินเทอร์เฟซที่ใช้แสดงได้ซึ่งเป็นไปตาม <FBSDKSharingContent> หลังจากทำโมเดลเนื้อหาแล้ว ให้เพิ่มอินเทอร์เฟซการแชร์ลงในแอพซึ่งเป็นไปตาม <FBSDKSharing> เช่น FBSDKShareDialog

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

ตัวอย่างวิธีทริกเกอร์การแชร์มีดังนี้:

FBSDKShareLinkContent *content = [[FBSDKShareLinkContent alloc] init];
content.contentURL = [NSURL URLWithString:@"https://developers.facebook.com"];

หมายเหตุ: หากแอพของคุณแชร์ลิงก์ไปยังร้านค้า iTunes หรือ Google Play เราจะไม่โพสต์ภาพหรือคำอธิบายที่คุณระบุในการแชร์นั้น แต่จะโพสต์ข้อมูลแอพบางอย่างที่ดึงแยกมาจากร้านแอพโดยตรงด้วย Webcrawler ซึ่งอาจไม่รวมรูปภาพ หากต้องการดูตัวอย่างการแชร์ลิงก์ไปยัง iTunes หรือ Google Play โปรดกรอก URL ลงในตัวแก้ไขจุดบกพร่องการแชร์

รูปภาพ

ผู้ใช้สามารถแชร์รูปภาพจากแอพไปยัง Facebook โดยใช้กล่องการแชร์หรืออินเทอร์เฟซแบบกำหนดเอง ดังนี้:

  • รูปภาพต้องมีขนาดน้อยกว่า 12 MB
  • ผู้ใช้ต้องติดตั้งแอพ Facebook แบบเนทีฟสำหรับ iOS เวอร์ชั่น 7.0 ขึ้นไป

สร้างเนื้อหาที่แชร์สำหรับรูปภาพด้วยโมเดล FBSDKSharePhotoContent โปรดดูรายการแอตทริบิวต์ทั้งหมดใน ข้อมูลอ้างอิงFBSDKSharePhotoContent

- (void)imagePickerController:(UIImagePickerController *)picker
didFinishPickingMediaWithInfo:(NSDictionary *)info
{
  UIImage *image = info[UIImagePickerControllerOriginalImage];

  FBSDKSharePhoto *photo = [[FBSDKSharePhoto alloc] init];
  photo.image = image;
  photo.userGenerated = YES;
  FBSDKSharePhotoContent *content = [[FBSDKSharePhotoContent alloc] init];
  content.photos = @[photo];
  ...
}

วิดีโอ

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

  • วิดีโอต้องมีขนาดเล็กกว่า 50 MB
  • ผู้ที่แชร์ควรติดตั้งไคลเอ็นต์ Facebook สำหรับ iOS เวอร์ชั่น 26.0 ขึ้นไป

สร้างเนื้อหาที่แชร์สำหรับวิดีโอด้วยโมเดล FBSDKShareVideoContent โปรดดูรายการแอตทริบิวต์ทั้งหมดใน ข้อมูลอ้างอิงFBSDKShareVideoContent

 - (void)imagePickerController:(UIImagePickerController *)picker
didFinishPickingMediaWithInfo:(NSDictionary *)info
{
  FBSDKShareVideo *video = [[FBSDKShareVideo alloc] init];
  if (@available(iOS 11, *)) {
    video.videoAsset = [info objectForKey:UIImagePickerControllerPHAsset];
  } else {
    video.videoURL = [info objectForKey:UIImagePickerControllerReferenceURL];
  }
  FBSDKShareVideoContent *content = [[FBSDKShareVideoContent alloc] init];
  content.video = video;
  ...
}

มัลติมีเดีย

ผู้ที่ใช้แอพของคุณสามารถแชร์แบบผสมผสานทั้งรูปภาพและวิดีโอไปยัง Facebook ด้วยกล่องการแชร์ได้ โปรดคำนึงสิ่งต่อไปนี้:

  • ผู้ใช้จะต้องมี iOS เวอร์ชั่น 7.0 ขึ้นไป
  • ผู้ที่แชร์ควรติดตั้งไคลเอ็นต์ Facebook สำหรับ iOS เวอร์ชั่น 52.0 ขึ้นไป
  • รูปภาพต้องมีขนาดเล็กกว่า 12 MB และวิดีโอต้องมีขนาดเล็กกว่า 50 MB
  • ผู้ใช้สามารถแชร์วิดีโอได้สูงสุด 1 รายการกับรูปภาพ 29 หรือ 30 รูป

สร้างเนื้อหาการแชร์มัลติมีเดียของคุณด้วยโมเดล FBSDKShareMediaContent โปรดดูรายการแอตทริบิวต์ทั้งหมดใน ข้อมูลอ้างอิงFBSDKShareMediaContent

FBSDKSharePhoto *photo = [FBSDKSharePhoto photoWith...
FBSDKShareVideo *video = [FBSDKShareVideo videoWith...
FBSDKShareMediaContent *content = [FBSDKShareMediaContent new];
content.media = @[photo, video];
}

วิธีการแชร์

หลังจากจัดการเนื้อหาโดยสร้างโมเดลแล้ว คุณสามารถทริกเกอร์กล่องการแชร์หรือกล่องการส่งข้อความได้

ปุ่ม

Facebook ใน iOS มีปุ่มเนทีฟที่ทริกเกอร์การแชร์ได้


ปุ่มแชร์

คุณสามารถใช้ปุ่มแชร์เพื่อให้ผู้ใช้แชร์เนื้อหาลงในไทม์ไลน์ Facebook ของตนเอง, ในไทม์ไลน์ของเพื่อนหรือในกลุ่มได้ ปุ่มแชร์จะเรียกกล่องการแชร์ขึ้นมา โปรดใส่ส่วนย่อยของโค้ดต่อไปนี้ลงในมุมมองเพื่อเพิ่มปุ่มแชร์:

FBSDKShareButton *button = [[FBSDKShareButton alloc] init];
button.shareContent = content;  
[self.view addSubview:button];

ปุ่มส่ง

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

FBSDKSendButton *button = [[FBSDKSendButton alloc] init];
button.shareContent = content; 
[self.view addSubview:button];

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

if (button.isHidden) {
  NSLog(@"Is hidden");
} else {
  [self.view addSubview:button];
}

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

หากต้องการใช้ประสบการณ์การแชร์ที่ Facebook สร้าง คุณต้องกำหนดเนื้อหาในส่วน การทำโมเดลเนื้อหา ข้างต้น แล้วเรียกกล่องการแชร์ เช่น หากต้องการแชร์ลิงก์ด้วยกล่องการแชร์:

FBSDKShareLinkContent *content = [[FBSDKShareLinkContent alloc] init];
content.contentURL = [NSURL URLWithString:@"http://developers.facebook.com"];
[FBSDKShareDialog showFromViewController:self
                              withContent:content
                                 delegate:nil];

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

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

ถ้าติดตั้งแอพ Facebook แบบเนทีฟไว้แล้ว SDK เวอร์ชั่น 4.0-4.4 จะสลับกลับเป็นแอพ Facebook สำหรับ iOS แบบเนทีฟ และคืนการควบคุมให้แอพหลังจากที่เผยแพร่โพสต์แล้ว หากคุณใช้ SDK เวอร์ชั่น 4.5 ขึ้นไป ผู้ใช้จะเห็นชีทการแชร์ของ iOS แทนที่จะสลับไปยังแอพ Facebook สำหรับ iOS แบบเนทีฟ เว้นแต่ว่าสิ่งที่แชร์เป็นข้อมูล Open Graph

กล่องการส่งข้อความ

กล่องการส่งข้อความสลับไปที่ Messenger สำหรับ iOS แบบเนทีฟ แล้วคืนการควบคุมให้แอพหลังจากที่เผยแพร่โพสต์แล้ว

[FBSDKMessageDialog showWithContent:content delegate:nil];

หมายเหตุ: ขณะนี้ iPad ยังไม่สนับสนุนกล่องการส่งข้อความ

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

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

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

API นี้ยังใช้บล็อกสไตล์เดียวกับส่วนอื่นๆ ของ Facebook SDK ด้วย หากต้องการแสดงกล่องการแชร์ iOS แบบเนทีฟ โปรดใช้:

// Example content. Replace with content from your app.
FBSDKShareLinkContent *content = [[FBSDKShareLinkContent alloc] init];
content.contentURL = [NSURL URLWithString:@"https://developers.facebook.com"];

FBSDKShareDialog *dialog = [[FBSDKShareDialog alloc] init];
dialog.fromViewController = self;
dialog.content = content;
dialog.mode = FBSDKShareDialogModeShareSheet;
[dialog show];

โปรดทราบว่าต้องมี .fromViewController หากต้องการแสดงชีทการแชร์

คุณสมบัติเพิ่มเติม

เมื่อคุณใช้กล่องการแชร์ Facebook คุณจะมีตัวเลือกเพิ่มเติมที่ไม่สามารถใช้งานได้เมื่อคุณแชร์โดยการใช้ API

แฮชแท็ก

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

ต่อไปนี้คือตัวอย่างของการเพิ่มแฮชแท็กไปยังการแชร์ลิงก์

FBSDKShareLinkContent *content = [[FBSDKShareLinkContent alloc] init];
content.contentURL = [NSURL URLWithString:@"https://developers.facebook.com"];
content.hashtag = [FBSDKHashtag hashtagWithString:@"#MadeWithHackbook"];

การแชร์คำพูดอ้างอิง

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

FBSDKShareLinkContent *content = [[FBSDKShareLinkContent alloc] init];
content.contentURL = [@"https://developers.facebook.com/products/sharing"];
content.quote = @"Learn quick and simple ways for people to share content from your app or website to Facebook.";

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

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

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

การแชร์เรื่องราวจาก Open Graph

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

ข้อมูลที่แชร์จะเชื่อมโยงกลับไปยังแอพของคุณหรือหน้า App Store ของแอพ

ดูเพิ่มเติมเกี่ยวกับวิธีเพิ่มข้อมูลที่กำหนดเองลงในแอพได้ใน Open Graph Stories ใน iOS

สร้างเนื้อหาที่จะแชร์สำหรับการดำเนินการ Open Graph ลงในโมเดล FBSDKShareOpenGraphContent โปรดดูรายการแอตทริบิวต์ทั้งหมดใน ข้อมูลอ้างอิงFBSDKShareOpenGraphContent

NSDictionary *properties = @{
  @"og:type": @"fitness.course",
  @"og:title": @"Sample Course",
  @"og:description": @"This is a sample course.",
  @"fitness:duration:value": @100,
  @"fitness:duration:units": @"s",
  @"fitness:distance:value": @12,
  @"fitness:distance:units": @"km",
  @"fitness:speed:value": @5,
  @"fitness:speed:units": @"m/s",
};
FBSDKShareOpenGraphObject *object = [FBSDKShareOpenGraphObject objectWithProperties:properties];
FBSDKShareOpenGraphAction *action = [[FBSDKShareOpenGraphAction alloc] init];
action.actionType = @"fitness.runs";
[action setObject:object forKey:@"fitness:course"];
FBSDKShareOpenGraphContent *content = [[FBSDKShareOpenGraphContent alloc] init];
content.action = action;
content.previewPropertyName = @"fitness:course";

โปรแกรมจำลองและการทดสอบ iOS

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

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