ปุ่มบันทึก

เราได้เลิกใช้ปลั๊กอินปุ่มบันทึกแล้ว โดยปลั๊กอินนี้จะยังสามารถใช้งานและเข้าถึงได้จนถึงวันที่ 15 กันยายน 2022 หลังจากนั้นเป็นต้นไป ปลั๊กอินนี้จะหยุดให้บริการและไม่สามารถใช้งานได้อีก

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

ตัวกำหนดค่าปุ่มบันทึก ตัวอย่างโค้ด การตั้งค่า

วิธีการทีละขั้นตอน

1. เลือกลิงก์เว็บไซต์

เลือกลิงก์ของเว็บไซต์ที่คุณต้องการนำมาใช้กับปุ่มบันทึก

2. ตัวกำหนดค่าโค้ด

วางลิงก์ดังกล่าวลงในตัวกำหนดค่าโค้ด แล้วคลิกที่ปุ่ม "รับโค้ด" เพื่อสร้างโค้ดปุ่มบันทึกของคุณ

3. คัดลอกแล้ววางส่วนย่อย HTML

คัดลอกแล้ววางส่วนย่อยลงใน HTML ของเว็บไซต์ปลายทาง

ตัวกำหนดค่าปุ่มบันทึก

ลิงก์ของเว็บไซต์หรือสินค้าที่จะบันทึก

ขนาดของปุ่ม

large

รับรหัส

ตัวอย่างโค้ดแบบเต็ม

คัดลอกแล้ววางตัวอย่างโค้ดลงในเว็บไซต์ของคุณ ปรับค่า data-uri ให้เป็นลิงก์เว็บไซต์ของคุณ จากนั้นให้ใช้แท็ก <title> เพื่อปรับเปลี่ยนชื่อ "ที่บันทึกไว้"

<html>
<head>
  <title>Your Website Title</title> 
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your save button code -->
  <div class="fb-save" 
    data-uri="http://www.your-domain.com/your-page.html">
  </div>

</body>
</html>

ลองใช้เลย!

การตั้งค่า

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

การตั้งค่า	แอตทริบิวต์ HTML5	คำอธิบาย	ค่าเริ่มต้น
`uri`	`data-uri`	ลิงก์แบบเต็มของเพจที่จะบันทึก	ลิงก์/ที่อยู่ปัจจุบัน
`lazy`	`data-lazy`	`true` หมายถึงการใช้กลไก lazy-loading ของเบราว์เซอร์โดยการตั้งค่าแอตทริบิวต์ iframe `loading="lazy"` ผลที่ได้คือเบราว์เซอร์จะไม่เรนเดอร์ปลั๊กอิน หากไม่อยู่ใกล้กับวิวพอร์ต และอาจไม่เห็นเลย โดยสามารถเป็น `true` หรือ `false` (ค่าเริ่มต้น) ก็ได้	`false`

ปุ่มบันทึกสำหรับผลิตภัณฑ์ต่างๆ

คุณยังสามารถใช้ปุ่มบันทึกสำหรับผลิตภัณฑ์ต่อไปนี้:

1. สร้างแค็ตตาล็อกสินค้า

หากต้องการใช้ปุ่มบันทึกกับสินค้าที่คุณมี คุณจำเป็นต้องสร้างแค็ตตาล็อกสินค้าเสียก่อน

แค็ตตาล็อกสินค้าหรือที่บางครั้งเรียกว่าฟีดสินค้า คือรายการสินค้าที่คุณต้องการโฆษณาบน Facebook โดยสินค้าแต่ละชิ้นในรายการจะมีคุณลักษณะเฉพาะที่สามารถใช้ในการสร้างโฆษณา รวมถึงระบุ ID สินค้า, ชื่อ, คำอธิบาย, URL ของแลนดิ้งเพจ, URL ของ��ูปภาพ, ความพร้อมในการจำหน่าย และอื่นๆ

วิธีสร้างแค็ตตาล็อกสินค้า โฆษณาสินค้าแบบไดนามิกบน Facebook

2. ID สำหรับ API ของ Facebook

ไปที่แท็บการตั้งค่าในแดชบอร์ดของแอพ จากนั้นเพิ่มแพลตฟอร์ม "เว็บไซต์" แล้วระบุโดเมนเว็บไซต์ของคุณ

3. การโหลด JavaScript SDK

โหลด JavaScript SDK โดยใช้ ID ของแอพดังที่แสดงไว้ในตัวอย่างด้านล่าง ให้แทนที่ {your-app-id} ด้วย ID ของแอพคุณ

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId={your-app-id}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

4. รับ URI ของสินค้า

ผ่านทางตัวจัดการธุรกิจ

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

เข้าสู่ระบบธุรกิจของคุณบนตัวจัดการธุรกิจ
ไปที่ "การตั้งค่าธุรกิจ" > "แค็ตตาล็อกสินค้า"
คลิกที่แค็ตตาล็อกสินค้าที่คุณต้องการใช้สำหรับปลั๊กอิน
จด ID แค็ตตาล็อกสินค้าเอาไว้ ซึ่งจะอยู่ใต้ชื่อของแค็ตตาล็อกสินค้านั้น โดยตัวอย่างที่เราให้ไว้มี ID เป็น 768856339915012
อีกข้อมูลหนึ่งที่จำเป็นต้องใช้คือ ID สินค้าที่อัพโหลดไว้ในฟีดสินค้าของคุณ หากต้องการดูตัวอย่างจากฟีดสินค้าของคุณ ให้คลิกที่ ID แค็ตตาล็อกสินค้า
ในหน้าถัดไป ให้คลิกที่ฟีดสินค้าซึ่งอยู่ด้านบน
คลิกฟีดที่มีสินค้าที่คุณต้องการใช้อยู่
คุณจะเห็นตัวอย่างสินค้าจากฟีดของคุณในหน้าถัดไป หากต้องการให้ปลั๊กอินระบุสินค้าของคุณ เราจำเป็นต้องใช้ ID สินค้าที่แสดงอยู่ในฟีดสำหรับสินค้าแต่ละรายการของคุณ
URI สำหรับปลั๊กอินจะมีรูปแบบดังนี้ product://<catalog_id >/{retailer_id} ดังนั้น หากเราต้องการสร้าง URI สำหรับสินค้าที่มีชื่อว่า Product #45 ในตัวอย่างข้างต้น URI ดังกล่าวก็จะเป็น product://768856339915012/45 (โดย ID แค็ตตาล็อกสินค้าจะได้มาจากขั้นตอนที่ 5)

ผ่านทาง API กราฟ

คุณสามารถรับ URI ของสินค้าของคุณผ่าน API กราฟได้ ขณะโหลดรายการสินค้ารายการเดียวหรือหลายรายการ ให้สร้างรูปแบบ URL ต่อไปนี้โดยแทนที่ <catalog_id> ด้วย ID แค็ตตาล็อกของคุณ และแทนที่ <retailer_id> ด้วย ID ผู้ค้าปลีกของสินค้าคุณดังนี้

product://<catalog_id>/<retailer_id>

เรียนรู้เพิ่มเติมได้ในเอกสารเกี่ยวกับรายการสินค้า

5. URI สินค้า

ให้ระบุ URI ของสินค้าลงในส่วน data-uri ของโค้ดปุ่มบันทึก ตัวอย่างเช่น ในกรณีที่ URI ของสินค้าคือ product://949817451770475/143791832 โค้ดของคุณจะมีลักษณะดังนี้

<div class="fb-save" 
  data-uri="product://949817451770475/143791832">
</div>

มุมมองที่บันทึกไว้

ระบบจะเพิ่มลิงก์ที่บันทึกไว้ทั้งหมดลงในมุมมองที่บันทึกไว้ ซึ่งคุณสามารถเข้าดูได้ที่ www.facebook.com/saved หรือเข้าดูบนแอพมือถือได้โดยไปที่เพิ่มเติม -> ที่บันทึกไว้

ตัวอย่าง

ลิงก์ที่บันทึกไว้

การเปลี่ยนภาษา

คุณสามารถเปลี่ยนภาษาของปุ่มบันทึกได้โดยการโหลด Facebook JavaScript SDK เวอร์ชั่นที่แปลเป็นภาษาท้องถิ่นแล้ว เมื่อคุณโหลด SDK ดังกล่าว ให้เปลี่ยนค่าของ js.src เพื่อใช้รูปแบบภาษาของคุณ โดยให้แทนที่ en_US ด้วยรูปแบบภาษาของคุณ เช่น fr_FR สำหรับภาษาฝรั่งเศส (ฝรั่งเศส) ดังนี้

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.6";

ทั้งนี้ เราได้ระบุรูปแบบภาษาที่รองรับไว้ในไฟล์ XML รูปแบบภาษาของ Facebook

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

หัวข้อที่เกี่ยวข้อง

คำถามที่พบบ่อยเกี่ยวกับโซเชียลปลั๊กอิน การแชร์สำหรับเว็บมาสเตอร์Facebook SDK สำหรับ JavaScript