ปุ่มแชร์

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

หากแอพของคุณเป็นแอพที่มีอยู่เดิมใน iOS หรือ Android เราแนะนำให้คุณใช้ กล่องโต้ตอบการแชร์บน iOS และ กล่องโต้ตอบการแชร์บน Android รูปแบบเดิมแทน

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

ทีละขั้นตอน

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

เลือก URL ของเว็บไซต์หรือเพจ Facebook ที่คุณต้องการแชร์

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

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

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

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

ตัวกำหนดค่าปุ่มแชร์

URL เพื่อแชร์
เลย์เอาท์
ขนาดของปุ่ม

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

คัดลอกและวางตัวอย่างโค้ดลงในเว็บไซต์ของคุณ ปรับค่า 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 share button code -->
  <div class="fb-share-button" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="button_count">
  </div>

</body>
</html>

การตั้งค่า

การตั้งค่า แอตทริบิวต์ HTML5 คำอธิบาย ค่าเริ่มต้น

href

data-href

URL สัมบูรณ์ของเพจที่จะแชร์

เวอร์ชันของ XFBML และ HTML5 กำหนดค่าเริ่มต้นไปที่ URL ปัจจุบัน

layout

data-layout

เลือกเค้าโครงแบบอื่นๆ มาหนึ่งแบบซึ่งพร้อมใช้งานสำหรับปลั๊กอินดังกล่าว อาจเป็นหนึ่งใน box_count, button_count, button

icon_link

mobile_iframe

data-mobile_iframe

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

false

size

data-size

จะมีปุ่มให้เลือก 2 ขนาด เช่น large และ small

small