Thứ Sáu, 22 tháng 12, 2017

test nhúng bài viết facebook

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 = "https://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.