Nút Chia sẻ

Với nút Chia sẻ, mọi người có thể thêm tin nhắn được cá nhân hóa vào liên kết trước khi chia sẻ lên dòng thời gian của họ, trong nhóm hoặc chia sẻ với bạn bè thông qua Tin nhắn Facebook.

Nếu ứng dụng của bạn dành riêng cho iOS hoặc Android, bạn nên sử dụng hộp thoại Chia sẻ riêng trên iOS và hộp thoại Chia sẻ riêng trên Android.

Nếu trang web của bạn không cần nút để mở hộp thoại chia sẻ hoặc nút mà Facebook cung cấp không phù hợp với thiết kế trang web, hộp thoại Chia sẻ trên web cũng được cung cấp để chia sẻ liên kết. Lưu ý rằng để sử dụng plugin này, bạn không cần triển khai tính năng đăng nhập Facebook hay yêu cầu bất kỳ quyền bổ sung nào thông qua việc xét duyệt ứng dụng.

Bộ cấu hình nút Chia sẻ
Ví dụ về mã
Cài đặt
Câu hỏi thường gặp

Từng bước

1. Chọn URL hoặc Trang

Chọn URL của trang web hoặc Trang Facebook mà bạn muốn chia sẻ.

2. Bộ cấu hình mã

Dán URL vào Bộ cấu hình mã và điều chỉnh layout của nút chia sẻ. Nhấp vào nút Get Code để tạo mã nút chia sẻ.

3. Sao chép & dán đoạn mã HTML

Sao chép và dán đoạn mã vào HTML của trang web đích.

Bộ cấu hình nút Chia sẻ

URL để chia sẻ

Bố cục

button_count

Kích thước nút

small

Lấy mã

Ví dụ về mã đầy đủ

Sao chép & dán ví dụ về mã vào trang web của bạn. Điều chỉnh giá trị data-href cho URL trang web. Tiếp theo, hãy dùng thẻ meta og:*** để điều chỉnh bản xem trước liên kết của bạn. og:url và data-href sẽ sử dụng cùng một 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>

Cài đặt

Cài đặt	Thuộc tính HTML5	Mô tả	Mặc định
`href`	`data-href`	URL tuyệt đối của trang sẽ được chia sẻ.	Các phiên bản XFBML và HTML5 đặt mặc định thành URL hiện tại.
`lazy`	`data-lazy`	Nếu bạn đặt thông số này thành `true`, hệ thống sẽ sử dụng cơ chế lazy-loading (chỉ tải khi cần thiết) của trình duyệt bằng cách đặt thuộc tính `loading="lazy"` cho iframe. Khi đó, trình duyệt sẽ không hiển thị plugin nếu plugin này ở xa vùng hiển thị và có thể không bao giờ xuất hiện. Có thể có giá trị là `true` hoặc `false` (mặc định).	`false`
`layout`	`data-layout`	Chọn một trong các bố cục khác nhau có sẵn cho plugin. Có thể là một trong số `box_count`, `button_count`, `button`.	`icon_link`
~~`mobile_iframe`~~ Không dùng nữa	~~`data-mobile_iframe`~~	Nếu đặt thành `true`, nút chia sẻ sẽ mở hộp thoại chia sẻ trong iframe (thay vì cửa sổ bật lên) ở đầu trang web trên di động. Tùy chọn này chỉ dùng được trên di động chứ không dùng được trên máy tính. Để biết thêm thông tin, hãy xem phần Hộp thoại Chia sẻ trên web di động.	~~`false`~~
`size`	`data-size`	Nút này được cung cấp ở 2 kích thước là `large` và `small`.	`small`

Chủ đề liên quan

Câu hỏi thường gặp về plugin xã hội Hộp thoại Chia sẻ Chia sẻ cho quản trị viên web SDK Facebook dành cho JavaScript