ปุ่มบันทึก

เราได้เลิกใช้ปลั๊กอินปุ่มบันทึกแล้ว โดยปลั๊กอินนี้จะยังสามารถใช้งานและเข้าถึงได้จนถึงวันที่ 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