ปุ่มถูกใจสำหรับเว็บ

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

ตัวกำหนดค่าปุ่มถูกใจ ตัวอย่างโค้ด การตั้งค่า ปรับเปลี่ยนภาษา คำถามที่พบบ่อย

วิธีทำ

1. เลือก URL หรือเพจ

เลือก URL ของเว็บไซต์หรือเพจบน Facebook ที่คุณต้องการใช้กับปุ่มถูกใจ

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

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

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

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

4. ลบการทำซ้ำหากจำเป็น

หากคุณมีโค้ดเพื่อเปิดใช้งานการบันทึกของเหตุการณ์ในแอพอยู่แล้ว ให้ลบคำสั่ง autoLogAppEvents=1 ออกจากโค้ดที่วางเพื่อป้องกันการบันทึกซ้ำ

ตัวกำหนดค่าปุ่มถูกใจ

URL เพื่อกดถูกใจ

Width

เลย์เอาท์

standard

ประเภทการดำเนินการ

ขนาดของปุ่ม

small

รวมปุ่มแชร์ด้วย

รับรหัส

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

คัดลอกแล้ววางตัวอย่างโค้ดลงในเว็บไซต์ของคุณ ปรับค่า data-href ไปที่ URL เว็บไซต์ของคุณ ต่อจากนั้น ใช้แท็กเมตา og:*** ในการปรับพรีวิวลิงก์ของคุณ og:url และ data-href ควรใช้ URL เดียวกัน

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>

  <!-- Your like button code -->
  <div class="fb-like" 
    data-href="https://www.your-domain.com/your-page.html" 
    data-layout="standard" 
    data-action="like">
  </div>

</body>
</html>

ปรับแต่งพรีวิวของลิงก์เอง

การตั้งค่า

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

การตั้งค่า	แอตทริบิวต์ HTML5	คำอธิบาย	ค่าเริ่มต้น
`action`	`data-action`	คำกริยาที่จะแสดงบนปุ่ม อาจเป็น `like` หรือ `recommend`	`like`
`colorscheme`	`data-colorscheme`	แบบแผนชุดสีที่ปลั๊กอินนี้ใช้สำหรับข้อความใดๆ ภายนอกปุ่มนั้นเอง อาจเป็น `light` หรือ `dark`	`light`
`href`	`data-href`	URL แบบเต็มของเพจที่จะถูกใจ	URL ปัจจุบัน
`kid_directed_site`	`data-kid-directed-site`	หากเว็บไซต์หรือบริการออนไลน์ของคุณ หรือส่วนของบริการของคุณให้บริการแก่เด็กที่อายุต่ำกว่า 13 ปีโดยตรง คุณต้องเปิดใช้งานสิ่งนี้	`false`
`layout`	`data-layout`	เลือกเลย์เอาท์แบบอื่นๆ มาหนึ่งแบบซึ่งพร้อมใช้งานสำหรับปลั๊กอินดังกล่าว อาจเป็นหนึ่งใน `standard`, `button_count`, `button` หรือ `box_count` ดูคำถามที่พบบ่อยสำหรับรายละเอียดเพิ่มเติม	`standard`
`ref`	`data-ref`	ป้ายสำหรับการติดตามการอ้างอิงต้องมีอักขระน้อยกว่า 50 ตัวและประกอบด้วยตัวอักษรและตัวเลขและเครื่องหมายวรรคตอน (ปัจจุบันคือ +/=-.:_) ดูคำถามที่พบบ่อยสำหรับรายละเอียดเพิ่มเติม	ไม่มี
`share`	`data-share`	ระบุว่าจะรวม ปุ่มแชร์ ไว้เคียงข้างปุ่มถูกใจหรือไม่ การดำเนินการนี้จะใช้งานได้กับเวอร์ชั่น XFBML เท่านั้น	`false`
`size`	`data-size`	จะมีปุ่มให้เลือก 2 ขนาด เช่น `large` และ `small`	`small`
`width`	`data-width`	ความกว้างของปลั๊กอิน (เลย์เอาท์มาตรฐานเท่านั้น) ซึ่งขึ้นอยู่กับความกว้างต่ำสุดและความกว้างเริ่มต้น โปรดดูการตั้งค่าเลย์เอาท์ด้านล่างนี้สำหรับรายละเอียดเพิ่มเติม	ดู `standard` ในการตั้งค่าเลย์เอาท์

การตั้งค่าเลย์เอาท์

มีตัวเลือกดังต่อไปนี้:

เลย์เอาท์	ขนาดเริ่มต้น
`standard`	ความกว้างต่ำสุด: 225 พิกเซล ความกว้างเริ่มต้น: 450 พิกเซล ความสูง: 35 พิกเซล (ไม่มีรูปภาพ) หรือ 80 พิกเซล (มีรูปภาพ)
`box_count`	ความกว้างต่ำสุด: 55 พิกเซล ความกว้างเริ่มต้น: 55 พิกเซล ความสูง: 65 พิกเซล
`button_count`	ความกว้างต่ำสุด: 90 พิกเซล ความกว้างเริ่มต้น: 90 พิกเซล ความสูง: 20 พิกเซล
`button`	ความกว้างต่ำสุด: 47 พิกเซล ความกว้างเริ่มต้น: 47 พิกเซล ความสูง: 20 พิกเซล

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

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

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v7.0";

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

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

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