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

คลิกเดียวบนปุ่มถูกใจจะ "ถูกใจ" เนื้อหาต่างๆ บนเว็บ และแชร์บน 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="http://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="http://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 = "//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="http://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 = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.10"; 

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