สร้างปุ่ม บันทึก สำหรับเว็บไซต์ของคุณ

เคล็ดลับและการแก้ไขปัญหา

"โปรดทราบว่าหากคุณเพิ่ม 'ปุ่มบันทึก' ไปยังโค้ดก่อนเดือนมิถุนายน 2016 เราได้ทำการอัปเดตดีไซน์ของปุ่ม "ปักพิน" ไปเป็น "บันทึก" ในวันที่ 3 ตุลาคม 2017"

ปุ่ม บันทึก เป็นวิธีที่ดีที่สุดที่จะแสดงธุรกิจใน Pinterest เวลาเพิ่มปุ่ม บันทึก ไว้ในหน้าใดก็ตามในเว็บไซต์ ลูกค้าของคุณสามารถบันทึกสิ่งต่าง ๆ ที่ชอบในเว็บไซต์ของคุณไว้ใน Pinterest ได้ ซึ่งเป็นการช่วยให้ผู้อื่นได้เห็นสิ่งเหล่านั้นมากขึ้น 
 
ถ้าคุณมีเว็บไซต์ Wordpress, Blogger, Tumblr, Wix หรือ Squarespace:
 
WordPress.com WordPress.com
ปุ่ม Pin It สำหรับ Wordpress ไม่จำเป็นต้องมีโค้ดเพิ่มเติมในเว็บไซต์ คุณสามารถเพิ่มปุ่ม Pin It ลงในโพสต์ Wordpress ทั้งหมดได้โดยเปิดใช้งานในตัวเลือกการแชร์เริ่มต้น
  1. ไปยังแดชบอร์ด WordPress ของคุณ
  2. ไปที่ การตั้งค่า แล้วไปที่ การแชร์
  3. ในส่วน ปุ่มการแชร์ ให้ลากบริการ Pinterest จาก บริการที่สามารถใช้ได้ ไปที่ บริการที่เปิดใช้งาน
  4. หากคุณต้องการแสดงรูปเริ่มต้นของปุ่ม Pin It ให้เปลี่ยน รูปแบบปุ่ม จากเมนูดรอปดาวน์ให้เป็น ปุ่มอย่างเป็นทางการ
  5. คลิก บันทึกการเปลี่ยนแปลง ด้านล่างของหน้าเว็บ
WordPress.org WordPress.org

คุณสามารถดาวน์โหลดปลั๊กอินสำหรับปุ่ม Pin It แบบเลื่อนเมาส์มาวางได้จาก ไดเรกทอรี่ปลั๊กอินของ WordPress.org

Blogger Blogger
  1. ในแดชบอร์ด บล็อกเกอร์ ของคุณ ให้ไปที่ส่วน เค้าโครง
  2. คลิก แก้ไข ในส่วนบล็อกโพสต์
  3. เลื่อนหน้าจอไปยัง แสดงปุ่มแชร์ หากยังไม่มีเครื่องหมายให้ทำเครื่องหมายถูก
  4. จัดเรียงสิ่งที่คุณต้องการในส่วน จัดเรียงรายการ จากนั้นให้คลิก บันทึก
Tumblr Tumblr
ก่อนอื่น จะต้องเพิ่มบรรทัด JavaScript ก่อน
 
วิธีการเพิ่มบรรทัด JavaScript:
  1. ในแดชบอร์ด Tumblr ของคุณ ให้เลือกบล็อกที่คุณต้องการแก้ไข จากนั้นคลิก ปรับแต่ง
  2. คลิก แก้ไข HTML จากหน้าจอ ปรับแต่ง
  3. เลื่อนหน้าจอลงมาที่ส่วนล่างของโค้ด
  4. คลิกเพื่อดูว่าโค้ดของคุณมี pinit.js หรือไม่ หากมีแสดงว่าเสร็จเรียบร้อยแล้ว!
  5. หากไม่มี ให้เพิ่มแท็กนี้เหนือแท็กปิด </body>: <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
 
วิธีการเพิ่มปุ่ม Pin It แบบเลื่อนเมาส์มาวาง:
  1. ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มบรรทัด JavaScript ตามขั้นตอนด้านบนแล้ว
  2. ในแดชบอร์ด Tumblr ของคุณ ให้เลือกบล็อกที่คุณต้องการแก้ไข จากนั้นคลิก ปรับแต่ง
  3. คลิก แก้ไข HTML จากหน้าจอ ปรับแต่ง
  4. เลื่อนหน้าจอลงมาที่ส่วนล่างของโค้ด
  5. เพิ่ม data-pin-hover="true" ​ ก่อนหน้าส่วน “src=” จากขั้นตอนที่ 4 ด้านบน บรรทัดใหม่ของคุณควรเป็นเช่นนี้: <script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
  6. คลิก อัพเดทการแสดงตัวอย่างคุณควรเห็นปุ่ม Pin It ปรากฏเมื่อคุณเลื่อนเมาส์ไปบนรูปภาพตัวอย่างทางด้านขวา หากไม่เป็นเช่นนั้น ให้กลับไปที่ขั้นตอนที่ 4 แล้วตรวจสอบว่าได้ทำทุกอย่างถูกต้องแล้ว
  7. คลิก บันทึก
Wix.com Wix.com
  1. คลิก เพิ่ม (+) ที่ด้านซ้ายของโปรแกรมแก้ไข
  2. คลิก โซเชียล
  3. เลื่อนลงไปด้านล่างแล้วคลิก Pinterest Pin It
  4. ลากปุ่ม Pin It ไปยังบริเวณที่ต้องการในหน้าเว็บ
  5. ปุ่ม Pin It จะสร้างพินจากรูปภาพและคำอธิบายที่คุณเลือก พินจะเชื่องโยงกลับไปยังหน้าเว็บที่คุณอยู่เมื่อคุณคลิก Pin It
Squarespace Squarespace

เรียนรู้วิธีสร้างปุ่ม Pin It สำหรับไซต์ Squarespace ของคุณ ที่นี่ 

 
หากต้องการสร้างปุ่มเอง อันดับแรก ให้ตัดสินใจก่อนว่าต้องการเพิ่มปุ่ม บันทึก แบบใด ปุ่มดังกล่าวมีให้เลือก 3 ประเภท: 
 
  • เลื่อนเมาส์ไว้เหนือรูปภาพ (ดูตัวอย่าง): เวลาเลื่อนเมาส์ไว้เหนือรูปภาพในหน้านั้น ปุ่มบันทึก จะแสดงขึ้นมา
    Learn how to build it Learn how to build it
    1. ไปที่ ตัวสร้างวิดเจ็ต
    2. เลือก การวางเมาส์บนภาพ ในส่วนประเภท ปุ่ม
    3. ปรับแต่งขนาดและรูปร่างของปุ่ม 
    4. ดูตัวอย่างปุ่มโดยเลื่อนเมาส์ไปไว้เหนือรูปตัวอย่าง หรือจะลองคลิกปุ่ม Pin It เพื่อดูว่าเป็นอย่างไรก็ได้
    5. เมื่อพอใจแล้ว ให้คัดลอกโค้ดใต้ส่วน คัดลอกโค้ด 
    6. วางโค้ดเหนือแท็ก </body> ของแต่ละหน้า ในตำแหน่งที่ต้องการให้ปุ่มแสดงในเว็บไซต์
  • รูปใดก็ได้  (ดูตัวอย่าง): ถ้าคลิกปุ่มนี้ จะสามารถบันทึกรูปใดก็ได้ในเว็บไซต์ จึงใช้งานง่ายมาก
    Learn how to build it Learn how to build it
    1. ไปที่ ตัวสร้างวิดเจ็ต
    2. เลือก ภาพใดก็ได้ ในส่วนประเภท ปุ่ม
    3. กำหนดขนาด รูปร่าง ภาษา และรูปภาพสำหรับปุ่มของคุณเอง 
    4. ดูตัวอย่างปุ่มโดยเลื่อนเมาส์ไปไว้เหนือรูปตัวอย่าง หรือจะลองคลิกปุ่ม บันทึก เพื่อดูว่าเป็นอย่างไรก็ได้
    5. เมื่อพอใจแล้ว ให้คัดลอกโค้ดที่ปรากฏทางด้านขวาของหน้าเพจ
    6. วางโค้ดระหว่างแท็ก <body> กับ </body> ในแต่ละหน้าตรงที่ที่ต้องการให้ปุ่มแสดงในเว็บไซต์
  • รูปเดียว (ดูตัวอย่าง): เป็น ปุ่มบันทึก สำหรับรูปเดียวในหน้านั้นๆ และต้องใช้โค้ดที่ค่อนข้างซับซ้อนทางเทคนิค
    Learn how to build it Learn how to build it
    1. ไปที่ ตัวสร้างวิดเจ็ต
    2. กำหนดขนาด รูปร่าง ภาษา หรือรูปภาพสำหรับปุ่มของคุณเอง 
    3. เพิ่ม URL สำหรับเว็บเพจที่มีรูปที่ต้องการสร้างปุ่ม บันทึก (อาจเป็นโฮมเพจหรือหน้าใดก็ได้ในเว็บไซต์)
    4. เปิดหน้าต่างใหม่ในเบราว์เซอร์ และไปที่เว็บไซต์ของคุณ
    5. คลิกขวาบนรูปที่ต้องการสร้างปุ่ม บันทึก
    6. เลือก คัดลอก URL รูปภาพ
    7. กลับไปที่ตัวสร้างวิดเจ็ต แล้ววาง URL รูปภาพในช่อง รูปภาพ
    8. เขียนคำอธิบายรูป
    9. คลิก สร้างเลย! เพื่อดูตัวอย่างปุ่ม
    10. เมื่อพอใจแล้ว ให้คัดลอกโค้ดที่ปรากฏทางด้านขวาของหน้าเพจ
    11. วางโค้ดระหว่างแท็ก <body> กับ </body> ในแต่ละหน้าตรงที่ที่ต้องการให้ปุ่มแสดงในเว็บไซต์

ปัญหาทั่วไป

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

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

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

หากคุณกำลังใช้ตัวนับด้านข้างของปุ่มและมีจำนวนพินเป็น 0 สำหรับหน้านี้ ตัวนับจะไม่แสดง เมื่อคุณมีอย่างน้อย 1 พินจากหน้านั้น ตัวนับจะปรากฎ

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

หากคุณกำลังใช้ปุ่ม บันทึก ของคุณเอง โปรดลองใช้เคล็ดลับเหล่านี้:

  • ตรวจสอบว่าคุณใส่บรรทัด JavaScript ไว้ในโค้ดของหน้า เหนือแท็กปิดแล้ว
  • หากคุณมีบรรทัด JavaScript ในหน้าเว็บของคุณหลายบรรทัด ให้ลองลบบรรทัดทั้งหมดยกเว้นบรรทัดสุดท้าย
  • หากคุณใช้ทั้งบรรทัด JavaScript อะซิงโครนัสขั้นสูงและบรรทัด JavaScript ธรรมดา ให้ลบอย่างใดอย่างหนึ่งออก
  • หากคุณใช้ปลั๊กอินจากบริษัทอื่น ให้ตรวจดูว่าปลั๊กอินไม่ได้ใส่บรรทัด pinit.js ไว้แล้วในโค้ดของคุณ หากมีอยู่แล้วคุณไม่จำเป็นต้องเพิ่มอีก
บางโฮสต์ไม่รองรับ JavaScript ดังนั้นคุณจะไม่สามารถเพิ่มโค้ดจากตัวสร้างวิดเจ็ตของเรา โฮสต์เหล่านั้นอาจมีวิธีการอื่นเพื่อเพิ่มวิดเจ็ต!

ลองใช้เคล็ดลับการแก้ไขปัญหาเหล่านี้:
 
  • ตรวจสอบให้แน่ใจว่ารูปภาพมีขนาดด้านใดด้านหนึ่ง (ความสูงหรือความกว้าง) อย่างน้อย 100px และอีกด้านหนึ่งอย่างน้อย 200px (เพื่อให้แสดงปุ่ม บันทึก แบบเลื่อนเมาส์มาวางได้ รูปจะต้องมีขนาดอย่างน้อย 120px x 120px)
  • ตรวจสอบว่ารูปภาพของคุณไม่ได้ระบุในแบ็คกราวด์ CSS และตรวจสอบว่าแต่ละรูปมีแอตทริบิวต์ src ที่ขึ้นต้นด้วย "img"
  • เพิ่มรหัสปุ่มเลื่อนเมาส์ไว้เหนือแท็กปิด

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