Bài viết được nhúng

Bài viết được nhúng là cách đơn giản để đưa các bài viết công khai – của Trang hoặc của một cá nhân trên Facebook – vào nội dung trên trang hoặc trang web của bạn. Bạn chỉ có thể nhúng các bài viết công khai từ Trang và trang cá nhân Facebook.

Trình tạo mã

URL của bài viết

Chiều rộng pixel của bài viết (từ 350 đến 750)

Bao gồm toàn bộ bài viết

Lấy mã

Cài đặt

Cài đặt	Mô tả	Mặc định
`data-href`	URL tuyệt đối của bài viết.	`n/a`
`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).	`false`
`data-width`	Chiều rộng của bài viết. Tối thiểu là `350` pixel; Tối đa là `750` pixel. Bỏ trống để sử dụng chiều rộng linh hoạt.	chiều rộng linh hoạt
`data-show-text`	Áp dụng cho bài viết có ảnh. Đặt thành `true` để bao gồm văn bản từ bài viết trên Facebook, nếu có.	`false`

Lấy mã từ bài viết

1. Điều hướng đến Bài viết của bạn

Bạn có thể lấy mã nhúng ngay từ chính bài viết. Nếu bài viết hiển thị công khai, hãy nhấp vào biểu tượng xuất hiện ở góc trên cùng bên phải của bài viết đó trên Facebook.

Chọn Embed Post từ menu thả xuống:

Đối với các bài viết có ảnh, hãy chọn nút Embed Post ở dưới cùng bên phải:

2. Sao chép và dán mã

Bạn sẽ thấy một hộp thoại xuất hiện có mã để nhúng bài viết. Sao chép và dán mã này vào trang web của bạn ở nơi mà bạn muốn bài viết xuất hiện.

Để biết chi tiết về kỹ thuật, vui lòng tham khảo phần Thêm mã theo cách thủ công

Thêm mã theo cách thủ công

Ngoài Trình tạo mã, bạn cũng có thể nhúng mã theo cách thủ công.

1. Lấy URL của bài viết

Trước tiên, bạn cần lấy URL của bài viết mà bạn muốn chia sẻ. Bài viết phải hiển thị công khai, điều này được biểu thị bằng biểu tượng thế giới màu xám, ngay bên cạnh thời gian đăng của bài viết:

Để thử nghiệm, bạn có thể sử dụng URL mẫu sau:

"https://www.facebook.com/20531316728/posts/10154009990506729/"

2. Tải JavaScript SDK

Để sử dụng Plugin Bài viết được nhúng hoặc bất kỳ Plugin xã hội nào khác, bạn cần thêm Facebook JavaScript SDK vào trang web của mình. Bạn chỉ cần tải SDK một lần trên mỗi trang, lý tưởng là ngay sau thẻ mở đầu <body>:

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

Bạn có thể xem JavaScript SDK – Bắt đầu nhanh để hiểu rõ hơn về cách triển khai JavaScript SDK.

3. Đặt thẻ bài viết được nhúng

Tiếp theo, đặt thẻ Bài viết được nhúng vào vị trí bất kỳ trên trang web của bạn. Thay thế {your-post-url} bằng URL của bài viết.

<div class="fb-post" data-href="{your-post-url}"></div>

4. Thử nghiệm

Sau khi hoàn tất các bước này, bạn có thể thử nghiệm Bài viết được nhúng của mình. Một tiện ích tích hợp hoàn chỉnh sẽ có dạng như sau:

<html>
  <title>My Website</title>
<body>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

Kết quả của mẫu thử nghiệm được minh họa trong ảnh chụp màn hình bên dưới.

5. Tùy chỉnh

Hãy làm theo hướng dẫn ở cuối trang này để điều chỉnh kích thước, ngôn ngữ và các cài đặt khác.

Lấy URL của bài viết

Trong trường hợp mã nhúng được tạo bằng CMS, bạn chỉ cần lấy URL thô của bài viết. Có hai cách để lấy URL của bài viết:

Sao chép URL của liên kết vĩnh viễn từ thanh địa chỉ của trình duyệt.
Nhấp chuột phải vào thời gian đăng của bài viết và sao chép địa chỉ liên kết.

Cả hai phương thức đều được đánh dấu đỏ trong ảnh chụp màn hình bên dưới.

Thông qua API Đồ thị

Nếu muốn tự động tích hợp các bài viết được nhúng vào trang web, bạn có thể sử dụng API Đồ thị để tổng hợp các bài viết. Ví dụ: bạn có thể sử dụng điểm cuối API Bảng feed dành cho Trang và thông số permalink_url của fields.

Yêu cầu đối với /{page-id}/feed?fields=permalink_url sẽ nhận được phản hồi có dạng như sau:

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

Bố cục trên máy tính

Bạn có thể điều chỉnh chiều rộng của Bài viết được nhúng trên máy tính qua thuộc tính data-width trong thẻ Bài viết được nhúng như trong ví dụ bên dưới. Chọn giá trị từ 350 đến 750 pixel.

Không sử dụng thẻ kiểu CSS để điều chỉnh kích thước của plugin. Điều đó có thể gây ra lỗi hiển thị.

<!-- WRONG! -->
<style type="text/css">
.fb-post {
  width: 500px;
}
</style>
<div 
  class="fb-post"
  data-href="{your-post-url}">
</div>

<!-- CORRECT -->
<div 
  class="fb-post" 
  data-width="500"
  data-href="{your-post-url}">
</div>

Bố cục trên web di động

Trên web di động, Bài viết được nhúng sẽ tự động điều chỉnh tỷ lệ cho vừa với chiều rộng của vùng chứa.

WordPress

Nếu đã sử dụng Facebook SDK dành cho Javascript trong trang web WordPress, bạn có thể dùng plugin Bài viết được nhúng bằng thao tác đơn giản là thêm thẻ fb-post vào bài viết của mình trên WordPress:

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

Nếu bạn hiện không sử dụng Facebook SDK dành cho Javascript và nhúng Bài viết thông qua đoạn mã sao chép & dán – đoạn mã mà bạn có thể lấy từ mỗi bài viết trên Facebook – thì plugin Bài viết được nhúng nhiều khả năng sẽ không hiển thị vì WordPress sẽ chuyển đổi tất cả các ký tự & thành #038; và làm hỏng plugin.

Thay vào đó, hãy sử dụng mã sau để thêm plugin:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v19.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

Một tiện ích tích hợp WordPress mới, dễ sử dụng sẽ được phát hành trong tương lai gần.

Câu hỏi thường gặp

Làm cách nào để hiển thị Plugin xã hội bằng nhiều ngôn ngữ?

Nếu đang dùng phiên bản HTML5 hoặc XFBML, bạn nên thêm mã ngôn ngữ khi thực thể hóa thư viện.

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 đối với tiếng Pháp (Pháp):

// Example 1:
'https://connect.facebook.net/fr_FR/sdk.js';

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

Các ngôn ngữ được hỗ trợ sẽ được tham chiếu trong file XML ngôn ngữ Facebook.

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. Tìm thêm thông tin trên trang Bản địa hóa & dịch thuật của chúng tôi.

Liên kết vĩnh viễn

Mọi người sẽ nhìn thấy gì trong bài viết được nhúng?

Bài viết được nhúng sẽ hiển thị mọi phương tiện được đính kèm cũng như số lượt thích, chia sẻ và bình luận của bài viết. Nhúng bài viết sẽ cho phép những người đang sử dụng trang web của bạn xem thông tin phong phú tương tự như được hiển thị trên Facebook.com, đồng thời cho phép mọi người theo dõi hoặc thích tác giả của nội dung hoặc Trang ngay từ nội dung được nhúng.

Liên kết vĩnh viễn

Điều gì sẽ xảy ra nếu ai đó xóa bài viết hoặc thay đổi bộ chọn đối tượng của bài viết?

Thông báo sau sẽ hiển thị ở vị trí của bài viết được nhúng:

Liên kết vĩnh viễn