Plugin xã hội

Nút Thích cho web

Khi khách truy cập trang web của bạn nhấp vào nút Thích, Sự kiện trong ứng dụng sẽ được kích hoạt để ghi nhận lượt thích này trên Facebook.

Những thay đổi đối với Plugin xã hội ở khu vực châu Âu

Bạn có thể bắt đầu nhận thấy một số tác động đến Plugin xã hội vì lời nhắc đồng ý nhận cookie cập nhật sẽ được hiển thị cho những người sử dụng các sản phẩm của Facebook ở Khu vực châu Âu. Chúng tôi sẽ không hỗ trợ các Plugin xã hội "Thích" và "Bình luận" cho người dùng ở Khu vực Châu Âu nữa, trừ khi họ 1) đã đăng nhập vào tài khoản Facebook và 2) đã đồng ý với cơ chế kiểm soát “Cookie trên ứng dụng và trang web”. Nếu đáp ứng cả hai yêu cầu này, người dùng sẽ có thể nhìn thấy và tương tác với các plugin như nút "Thích" hoặc "Bình luận". Nếu không đáp ứng yêu cầu nào ở trên, người dùng sẽ không thể nhìn thấy các plugin này.

Khu vực châu Âu là nhóm các quốc gia nằm trong một danh sách cụ thể, bao gồm:

  • Liên minh châu Âu (EU): Áo, Bỉ, Bulgaria, Croatia, Cộng hòa Síp, Cộng hòa Séc, Đan Mạch, Estonia, Phần Lan, Pháp, Đức, Hy Lạp, Hungary, Ireland, Ý, Latvia, Lithuania, Luxembourg, Malta, Hà Lan, Ba Lan, Bồ Đào Nha, Romania, Slovakia, Slovenia, Tây Ban Nha, Thụy Điển

  • Các quốc gia không là thành viên của Liên minh châu Âu, nhưng thuộc Khu vực Kinh tế châu Âu (EEA) nói riêng/Hiệp hội Mậu dịch Tự do châu Âu (EFTA) hoặc Liên minh Thuế quan: [EEA nói riêng/EFTA] Iceland, Liechtenstein và Na Uy; Thụy Sĩ: [Liên minh Thuế quan EU] toàn bộ Quần đảo Channel, Đảo Man, Monaco; Các căn cứ chủ quyền của Vương quốc Anh tại Síp; [Liên minh Thuế quan châu Âu] Andorra, San Marino, Thành Vatican.

  • Các quốc gia không là thành viên của Liên minh châu Âu, nhưng thuộc Những Khu vực Ngoài cùng châu Âu (OMR): Martinique, Mayotte, Guadeloupe, Guiana thuộc Pháp, Réunion, Saint-Martin, Madeira, Azores, Quần đảo Canary.
  • Vương quốc Anh (toàn bộ Quần đảo Anh)

Nhận nút Thích tùy chỉnh

Lấy mã nút Thích bằng bộ cấu hình nút Thích để chèn vào trang web.

  1. Đặt URL của trang web mà bạn đang đặt nút Thích
  2. Tùy chỉnh nút Thích
  3. Xem trước nút
  4. Nhấp vào Lấy mã, sao chép rồi dán mã này vào trang web

Trình định cấu hình nút Thích

URL để Thích
Width
Bố cục
Loại hành động
Kích thước nút
Lấy mã

Lưu ý: nếu bạn đã ghi lại sự kiện trong ứng dụng, hãy gỡ câu lệnh autoLogAppEvents=1 khỏi mã nút để tránh ghi trùng lặp.

Sử dụng Thẻ meta Open Graph để chỉnh sửa bản xem trước liên kết. Thẻ og:url và thuộc tính data-ref phải là cùng một URL.

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

Được định dạng để dễ đọc.

<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 async defer crossorigin="anonymous" 
        src="https://connect.facebook.net/en_US/sdk.js#xfbml=1
             &version={graph-api-version}
             &appId={your-facebook-app-id}
             &autoLogAppEvents=1" 
        nonce="FOKrbAYI">
  </script>

  <!-- Your like button code -->
  <div class="fb-like" 
       data-href="https://www.your-domain.com/your-page.html" 
       data-width=""
       data-layout="standard" 
       data-action="like" 
       data-size="small"  
       data-share="true">
  </div>

</body>
</html>

Thuộc tính HTML5 của nút Thích

Thuộc tính HTML5 Mô tả

data-action

Động từ để hiển thị trên nút. Có thể là like (mặc định) hoặc recommend.

data-colorscheme

Sơ đồ màu được plugin sử dụng cho bất kỳ văn bản nào bên ngoài nút này. Có thể là light (mặc định) hoặc dark.

data-href

URL của trang web sẽ được thích.

data-kid-directed-site

Nếu trang web/dịch vụ online hoặc một phần dịch vụ của bạn là dành cho trẻ em dưới 13 tuổi, bạn phải đặt thuộc tính này thành true. Giá trị mặc định là false.

data-layout

Chọn một trong các bố cục khác nhau có sẵn cho plugin. Có thể là standard (mặc định), button_count, button hoặc box_count. Hãy xem phần Câu hỏi thường gặp để biết thêm chi tiết.

data-lazy

Nếu bạn đặt thông số này thành true, hệ thống sẽ sử dụng cơ chế tải từng phần 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).

data-ref

Nhãn để theo dõi lượt giới thiệu không được quá 50 ký tự và có thể chứa các ký tự chữ và số cùng một số dấu câu (hiện tại là +/=-.:_). Hãy xem phần Câu hỏi thường gặp để biết thêm chi tiết.

data-share

Chỉ định xem có thêm nút chia sẻ bên cạnh nút Thích hay không. Thuộc tính này có giá trị mặc định là true hoặc false. Tùy chọn này chỉ hoạt động với phiên bản XFBML.

data-size

Nút này có 2 giá trị là large và small (mặc định).

data-width

Chiều rộng của plugin (chỉ bố cục tiêu chuẩn), phải có chiều rộng tối thiểu và mặc định. Vui lòng xem bảng Cài đặt bố cục để biết thêm thông tin chi tiết.

Cài đặt bố cục

Không bắt buộc phải cài đặt bố cục.

Bố cục Kích thước mặc định

standard

Chiều rộng tối thiểu: 225 pixel.
Chiều rộng mặc định: 450 pixel.
Chiều cao: 35 pixel (không có ảnh) hoặc 80 pixel (có ảnh).

box_count

Chiều rộng tối thiểu: 55 pixel.
Chiều rộng mặc định: 55 pixel.
Chiều cao: 65 pixel.

button_count

Chiều rộng tối thiểu: 90 pixel.
Chiều rộng mặc định: 90 pixel.
Chiều cao: 20 pixel.

button

Chiều rộng tối thiểu: 47 pixel.
Chiều rộng mặc định: 47 pixel.
Chiều cao: 20 pixel.

Thay đổi ngôn ngữ

Bạn có thể thay đổi ngôn ngữ của nút Thích bằng cách tải phiên bản được bản địa hóa của SDK Facebook dành cho JavaScript. Thay thế en_US bằng ngôn ngữ của bạn, ví dụ: fr_FR đối với tiếng Pháp (Pháp).

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version={graph-api-version} />";

Bạn có thể phải điều chỉnh chiều rộng của Plugin xã hội để sử dụng các ngôn ngữ khác nhau.

Xem thêm