ปุ่มแชร์

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

หากแอพของคุณเป็นแอพเนทีฟใน iOS หรือ Android เราแนะนำให้คุณใช้กล่องการแชร์บน iOS และกล่องการแชร์บน Android แบบเนทีฟแทน

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

ตัวกำหนดค่าปุ่มแชร์
ตัวอย่างโค้ด
การตั้งค่า
คำถามที่พบบ่อย

วิธีการทีละขั้นตอน

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

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

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

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

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

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

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

URL เพื่อแชร์

เลย์เอาท์

button_count

ขนาดของปุ่ม

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>(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&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

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

</body>
</html>

การตั้งค่า

การตั้งค่า	แอตทริบิวต์ HTML5	คำอธิบาย	ค่าเริ่มต้น
`href`	`data-href`	URL สัมบูรณ์ของเพจที่จะแชร์	เวอร์ชั่นของ XFBML และ HTML5 กำหนดค่าเริ่มต้นไปที่ URL ปัจจุบัน
`lazy`	`data-lazy`	`true` หมายถึงการใช้กลไก Lazy-Loading ของเบราว์เซอร์โดยการตั้งค่าแอตทริบิวต์ iframe `loading="lazy"` ผลที่ได้คือเบราว์เซอร์จะไม่เรนเดอร์ปลั๊กอิน หากไม่อยู่ใกล้กับวิวพอร์ท และอาจไม่เห็นเลย อาจเป็นหนึ่งใน `true` หรือ `false` (ค่าเริ่มต้น)	`false`
`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`

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

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