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. Chỉ có thể nhúng các bài viết công khai từ Trang Facebook 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)

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-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

Được áp dụng cho bài viết có ảnh. Được đặ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. Chuyển đến bài viết của bạn

Bạn có thể lấy mã nhúng ngay từ 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 chứa ảnh, 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ẽ nhìn thấy một hộp thoại xuất hiện cùng với mã để nhúng bài viết của mình. 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

Bên cạnh 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 SDK JavaScript

Để 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 SDK Facebook dành cho JavaScript 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 phía sau thẻ <body> mở:

<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Bạn có thể tìm thêm trợ giúp về cách triển khai SDK JavaScript trong SDK JavaScript - Bắt đầu nhanh.

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

Tiếp theo, đặt thẻ Bài viết được nhúng vào bất kỳ vị trí nào 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 những bước này, bạn có thể thử nghiệm Bài viết được nhúng của mình. Tích hợp hoàn tất sẽ như sau:

<html>
  <title>My Website</title>
<body>
  <script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5" 
      async></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 hiển thị trong ảnh chụp màn hình bên dưới.

5. Tùy chỉnh

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

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

  1. Sao chép URL của liên kết vĩnh viễn từ thanh địa chỉ của trình duyệt.
  2. 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 bằng màu đỏ trong ảnh chụp màn hình bên dưới.

Thông qua API Đồ thị

Nếu bạn 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 nguồn cấp Trang và thông số permalink_url của fields.

Phản hồi về yêu cầu đối với /{page-id}/feed?fields=permalink_url sẽ gửi cho bạn 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ẻ Nhúng bài viết như trong ví dụ bên dưới. Chọn một 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 tự động điều chỉnh theo chiều rộng của vùng chứa.

Wordpress

Nếu bạn hiện đã sử dụng SDK Facebook dành cho JavaScript trong trang web Wordpress, bạn có thể sử dụng plugin Bài viết được nhúng bằng cách thêm thẻ fb-post vào bài viết trên Wordpress của mình:

<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 SDK Facebook dành cho JavaScript và nhúng bài viết thông qua đoạn mã copy&paste (đ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à ngắt plugin.

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

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v2.10'
    });
  }; 
  (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 = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

Tích hợp Wordpress mới, dễ dàng sẽ được phát hành trong tương lai gần.

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

Nếu đang sử dụng phiên bản HTML5 hoặc XFBML, bạn phải thêm mã ngôn ngữ khi tạo thư viện.

Khi bạn tải SDK, hãy điều chỉnh giá trị js.src để sử dụng ngôn ngữ của mình, chỉ cầ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):

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

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

Các ngôn ngữ được hỗ trợ được tham chiếu trong [tệp XML ngôn ngữ Facebook].(http://www.facebook.com/translations/FacebookLocales.xml). 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. Hãy tìm thêm thông tin trên trang Bản địa hóa & dịch của chúng tôi.

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.