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

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

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

วิธีทำ

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

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

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

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

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

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

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

URL เพื่อกดถูกใจ
Width
เลย์เอาท์
ประเภทการดำเนินการ
ขนาดของปุ่ม

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

คัดลอกแล้ววางตัวอย่างโค้ดลงในเว็บไซต์ของคุณ ปรับค่า 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>(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";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</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" 
    data-show-faces="true">
  </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

show_faces

data-show-faces

ระบุว่าจะแสดงรูปโปรไฟล์ด้านล่างของปุ่ม (เค้าโครงมาตรฐานเท่านั้น) คุณต้องไม่เปิดใช้งานคุณสมบัตินี้บน ไซต์สำหรับเด็ก

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=v2.11"; 

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