Video được nhúng – Plugin xã hội – Tài liệu – Facebook for Developers

từng bước

1. chọn url hoặc trang

chọn url của video trên facebook mà bạn muốn nhúng.

2. bộ cấu hình mã

dán url vào bộ cấu hình mã và nhấp vào nút “lấy mã” để tạo mã trình phát video được nhúng.

Bạn đang xem: Video được nhúng – Plugin xã hội – Tài liệu – Facebook for Developers

3. sao chép & dán đoạn mã html

sao chép và dán đoạn mã vào html của trang web đích.

bộ cấu hình trình phát video được nhúng

chiều rộng pixel của video

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

sao chép & dán ví dụ về mã vào trang web của bạn. Điều chỉnh giá trị data-href cho url của video. kiểm soát kích thước trình phát bằng thuộc tính data-width.

<html> <head> <title>your website title</title> </head> <body> <!-- load facebook sdk for javascript --> <div id="fb-root"></div> <script async defer src="https://connect.facebook.net/en_us/sdk.js#xfbml=1&version=v3.2"></script> <!-- your embedded video player code --> <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/0972357659/" data-width="500" data-show-text="false"> <div class="fb-xfbml-parse-ignore"> <blockquote cite="https://www.facebook.com/facebook/videos/0972357659/"> <a href="https://www.facebook.com/facebook/videos/0972357659/">how to share with just friends</a> <p>how to share with just friends.</p> posted by <a href="https://www.facebook.com/facebook/">facebook</a> on friday, december 5, 2014 </blockquote> </div> </div> </body> </html>

cài đặt

bộ cấu hình ở trên không bao gồm tất cả các cài đặt có thể cho trình phát video được nhúng. bạn cũng có thể thay đổi các cài đặt sau:

cài đặt mô tả mặc định

data-href

url tuyệt đối của video.

n/a

data-allowfullscreen

cho phép phát video ở chế độ toàn màn hình. có thể là false hoặc true.

false

data-autoplay

tự động bắt đầu phát video khi tải trang. video sẽ được phát mà không có âm thanh (tắt tiếng). mọi người có thể bật âm thanh qua các nút điều khiển của trình phát video. cài đặt này không áp dụng cho các thiết bị di động. có thể là false hoặc true.

false

data-lazy

nếu bạn đặt thông số này thành true, hệ thống sẽ sử dụng cơ chế lazy-loading (chỉ tải khi cần thiết) 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

Xem thêm: 1 Facebook tạo được bao nhiêu fanpage?

data-width

chiều rộng của vùng chứa video. tối thiểu là 220px.

auto

data-show-text

Đặt thành true để bao gồm văn bản từ bài viết trên facebook được liên kết với video, nếu có. chỉ dùng được cho trang web dành cho máy tính.

false

data-show-captions

Đặt thành true để hiển thị chú thích (nếu có) theo mặc định. chú thích chỉ dùng được trên máy tính.

false

cấu hình mẫu

<div class="fb-video" data-href="https://www.facebook.com/facebookdevelopers/posts/0972357659" data-width="500" data-allowfullscreen="true" data-autoplay="true" data-show-captions="true"></div>

lấy mã của bạn từ bài viết có video

1. chuyển đến bài viết có video của bạn

nếu đăng một video công khai (xem câu hỏi thường gặp), bạn có thể lấy mã nhúng ngay từ chính bài viết có video.

chọn embed video từ menu tùy chọn:

video được nhúng - plugin xã hội - tài liệu - facebook for developers

hoặc khi xem video ở chế độ xem toàn trang, chọn nút embed video ở dưới cùng bên phải:

video được nhúng - plugin xã hội - tài liệu - facebook for developers

chỉ dành cho trang

khi đăng video công khai lên trang (xem câu hỏi thường gặp), bạn có thể lấy mã nhúng ngay từ dòng thời gian. 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 video từ menu thả xuống: (chỉ dành cho trang)

video được nhúng - plugin xã hội - tài liệu - facebook for developers

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

video được nhúng - plugin xã hội - tài liệu - facebook for developers

Để 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 có video

trước tiên, bạn cần lấy url của bài viết có video mà bạn muốn chia sẻ. bài viết có video phải hiển thị công khai (xem câu hỏi thường gặp), đ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: video được nhúng - plugin xã hội - tài liệu - facebook for developers

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

"https://www.facebook.com/facebookdevelopers/videos/0972357659/"

2. tải sdk dành cho javascript

Để sử dụng plugin trình phát video đượ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 async defer src="https://connect.facebook.net/en_us/sdk.js#xfbml=1&version=v3.2"></script>

bạn có thể tìm thêm trợ giúp về cách triển khai sdk dành cho javascript trong sdk dành cho javascript – bắt đầu nhanh.

3. Đặt thẻ trình phát video được nhúng

tiếp theo, đặt thẻ trình phát video được nhúng vào vị trí bất kỳ trên trang web của bạn. thay thế your-video-post-url bằng url của bài viết.

<div class="fb-video" data-href="your-video-post-url" data-allowfullscreen="true" data-width="500"></div>

4. thử nghiệm

sau khi hoàn tất những bước này, bạn có thể thử nghiệm trình phát video đượ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> <div id="fb-root"></div> <script async defer src="https://connect.facebook.net/en_us/sdk.js#xfbml=1&version=v3.2"></script> <h1>my video player</h1> <div class="fb-video" data-href="https://www.facebook.com/facebookdevelopers/posts/0972357659" data-width="500" data-allowfullscreen="true"></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.

video được nhúng - plugin xã hội - tài liệu - facebook for developers

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 video

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:

Xem thêm: Hướng dẫn cách tăng like ảnh Facebook cực đơn giản mà hiệu quả

  1. sao chép url của câu 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ỉ kết hợp.

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

video được nhúng - plugin xã hội - tài liệu - facebook for developers

thông qua api Đồ thị

nếu muốn tự động tích hợp các trình phát video được nhúng vào trang web, bạn có thể sử dụng api Đồ thị để tổng hợp các video. ví dụ: bạn có thể sử dụng điểm cuối api video trang, điểm cuối này sẽ gửi cho bạn phản hồi về yêu cầu đối với /page-id/videos ở định dạng sau (rút gọn):

 "data": [  "id": "0972357659", "created_time": "0972357659t23:22:06+0000", "description": "my video caption", "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=0972357659\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>", "format": []  ] 

cách lấy url của video:

sử dụng giá trị id để tạo url theo cấu trúc:

"https://www.facebook.com/video.php?v=id"

không sử dụng thuộc tính embed_html để nhúng video. Để biết thêm thông tin về chủ đề này, vui lòng tham khảo phần câu hỏi thường gặp

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

bạn có thể điều chỉnh chiều rộng của trình phát video được nhúng trên máy tính qua thuộc tính data-width trong thẻ trình phát video được nhúng như trong ví dụ bên dưới. giá trị phải tối thiểu là 220. không có giới hạn về giá trị tối đa, nhưng trình phát không bao giờ được lớn hơn thành phần chính.

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-video  width: 500px;  </style> <div class="fb-post" data-href="your-video-post-url"></div> <!-- correct --> <div class="fb-video" data-href="your-video-post-url" data-allowfullscreen="true" data-width="500"></div>

toàn màn hình

bạn có thể thêm thuộc tính data-allowfullscreen="true" để cho phép phát video ở chế độ toàn màn hình.

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

trên web di động, trình phát video được nhúng tự động điều chỉnh theo chiều rộng bên trong của thành phần chính.

thay đổi ngôn ngữ

bạn có thể thay đổi ngôn ngữ của plugin trình phát video được nhúng 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 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ụ như fr_fr đối với tiếng pháp (pháp):

src="https://connect.facebook.net/fr_fr/sdk.js#xfbml=1&version=v3.2"

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

wordpress

nếu đã sử dụng facebook sdk for javascript trong trang web wordpress, bạn có thể dùng plugin trình phát video được nhúng bằng thao tác đơn giản là thêm thẻ fb-video vào bài viết của mình:

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=0972357659" data-width="500" data-allowfullscreen="true"></div>

nếu bạn hiện không sử dụng facebook sdk for javascript và nhúng video 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 có video), plugin trình phát video đượ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 trình phát.

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

<script>window.fbasyncinit = function()  fb.init( xfbml : true, version : 'v3.2' ); ; (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"; fjs.parentnode.insertbefore(js, fjs); (document, 'script', 'facebook-jssdk'));</script> <div class="fb-video" data-href="https://www.facebook.com/video.php?v=0972357659" data-width="500" data-allowfullscreen="true"></div>

một tiện ích 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

tôi có thể sử dụng thuộc tính embed_html cho video api Đồ thị không?

không, bạn không được sử dụng thuộc tính embed_html. thay vào đó, hãy sử dụng plugin trình phát video được nhúng!

giới thiệu về thuộc tính embed_html:

Điểm cuối api Đồ thị video sẽ phân phối thuộc tính có tên là embed_html. giá trị của thuộc tính này sẽ chứa thành phần html có thể được nhúng vào trang web để phát video yêu cầu.

không được nhầm lẫn giá trị này với plugin trình phát video được nhúng. bạn không nên sử dụng thuộc tính này nữa. thay vào đó, hãy dùng plugin trình phát video được nhúng!

nếu bạn sử dụng giá trị của thuộc tính embed_html, trình phát video sẽ:

  • không hoạt động trên các thiết bị di động và máy tính bảng

  • không chứa bất kỳ thông tin bổ sung nào như lượt xem, tiêu đề video, v.v.

ví dụ về thuộc tính embed_html (đã ngừng sử dụng):

 "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=0972357659\" width=\"1280\" height=\"720\" frameborder=\"0\"> </iframe>" 

Nguồn: https://hoidapmmo.net
Danh mục: Facebook