Plugin trích dẫn

Plugin trích dẫn cho phép mọi người chọn văn bản trên trang của bạn và thêm vào nội dung chia sẻ của họ để họ có thể kể câu chuyện có ý nghĩa hơn. Lưu ý rằng bạn không cần triển khai tính năng đăng nhập Facebook hoặc 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 để sử dụng plugin này.

Chia sẻ trích dẫn dành cho web di động

Nếu bạn đang xây dựng một trang web cho web di động hoặc nút được 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 hỗ trợ việc thêm trích dẫn vào chia sẻ liên kết.

Chia sẻ trích dẫn dành cho iOS & Android

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 iOSHộp thoại chia sẻ riêng trên Android.

Dùng thử pluginVí dụ về mãCài đặt

Dùng thử plugin

Chọn một phần của câu này để xem plugin hoạt động.

Ví dụ về mã

Điều chỉnh giá trị data-href cho URL của trang web. Đảm bảo thẻ meta Open Graph được cập nhật và data-href dành cho plugin khớp với thuộc tính og:url.

<html>
<head>
  <title>Your Website Title</title>
  <!-- Comment #1: OG Tags -->
  <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>

  <!-- Comment #2: SDK -->
  <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=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Comment #3: Content -->
  <h1>Your Headline</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh, 
    vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim, 
    vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer 
    pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus. 
  </p>

  <!-- Comment #4: Plugin Code -->
  <div class="fb-quote"></div>

</body>
</html>
Hãy dùng thử!

Bình luận về mã

  1. OG Tags: Bạn có thể sử dụng thẻ open graph để tùy chỉnh bản xem trước liên kết.
  2. SDK: Tải SDK Facebook dành cho JavaScript.
  3. Content: Nội dung trang của bạn.
  4. Plugin Code: Mã plugin trích dẫn từ bộ cấu hình. Bạn có thể đặt mã này ở bất kỳ đâu trong tài liệu và mã sẽ chỉ hiển thị khi bạn đánh dấu văn bản trong vùng chứa đó. Trong ví dụ này, mã chỉ hiển thị khi bạn đánh dấu văn bản trong phần nội dung

Cài đặt

Bạn có thể thay đổi các cài đặt sau:

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 trích dẫn.

URL hiện tại

layout

data-layout

  • quote: Khi chọn văn bản, nút có biểu tượng Facebook màu xanh lam và văn bản "Chia sẻ trích dẫn" sẽ được hiển thị dưới dạng lớp phủ. Khi một người nhấp vào đó, nút sẽ mở một hộp thoại chia sẻ có văn bản được đánh dấu dưới dạng trích dẫn.
  • button: Hoạt động giống tùy chọn "trích dẫn" nhưng chỉ có biểu tượng Facebook màu xanh lam trong nút.

quote

Khu vực có thể trích dẫn

Một số khu vực của trang web có thể không được hưởng lợi từ việc có thể trích dẫn như menu, thanh bên, chân trang. Bạn có thể xác định khu vực có thể trích dẫn của trang bằng:

  • thành phần <article> HTML hoặc
  • mọi thành phần có tên lớp là fb-quotable

Bạn có thể hòa trộn và so khớp nhiều cặp thành phần như mong muốn và xác định khu vực có thể trích dẫn.

Nếu trang của bạn bao gồm <article> hoặc class="fb-quotable", toàn bộ trang sẽ có thể trích dẫn.

Thay đổi ngôn ngữ

Bạn có thể thay đổi ngôn ngữ của plugin trích dẫn bằng cách tải phiên bản được bản địa hóa của SDK Facebook dành cho JavaScript. Khi bạn tải SDK, hãy thay đổi giá trị của js.src để sử dụng ngôn ngữ của bạn. Thay thế en_US bằng ngôn ngữ của bạn, ví dụ: fr_FR cho tiếng Pháp (Pháp):

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.6";

Các ngôn ngữ được hỗ trợ được tham chiếu trong tệp XML ngôn ngữ Facebook. Bạn có thể cần đ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. Bạn có thể tìm thêm thông tin trên trang Bản địa hóa & dịch của chúng tôi.