Cách nhúng video Facebook vào các bài viết và trang WordPress

1. Lợi ích của việc Nhúng Video trên Facebook

Mặc dù YouTube có thể sẽ vẫn là vua của nền tảng video trong tương lai gần, nhưng nếu bạn để ý thì sẽ thấy một số lợi thế của việc nhúng video trên Facebook. Ví dụ:

  • Tận dụng lợi thế của Phát trực tiếp – bạn có thể đã thấy tính năng phát trực tiếp mới phổ biến mà Facebook mới ra mắt gần đây. Khi bạn nhúng video theo phương pháp này, bạn cũng có thể nhúng phát trực tiếp từ Facebook trực tiếp vào trang web WordPress của mình.
  • Quảng bá chéo Trang Facebook của bạn – nhúng video Facebook cung cấp một phương pháp khác để quảng bá trang Facebook của bạn trên trang web.

2. Cách nhúng video Facebook với SDK JavaScript

Vì vậy, để bắt đầu, bạn cần thêm SDK của Facebook cho JavaScript vào tiêu đề của chủ đề. Về cơ bản, đó là một cái tên ưa thích cho đoạn mã này :

<!-- Load Facebook SDK for JavaScript -->
 <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&version=v2.6";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

Đối với WordPress thông thường, bạn sẽ cần phải truy cập tệp header.php của chủ đề và thêm nó ngay sau thẻ <body> như sau:

Xem thêm:  5 bước đơn giản nhưng giúp giảm tỷ lệ thoát trang web của bạn?

embed-facebook-video1

3. Cách Nhúng Video Facebook Cá nhân

Để làm được điều này để tạo bit mã thứ hai đó, bạn sẽ cần tìm URL thực của video trực tiếp bạn muốn chia sẻ và sau đó cắm URL đó vào đoạn mã nhỏ này:

<div class=”fb-video” data-href=”{your-video-post-url}”
data-allowfullscreen=”true” data-width=”500″></div>

Nếu bạn đang xem một bài đăng video trong nguồn cấp dữ liệu của trang, bạn có thể chỉ cần nhấp chuột phải vào dấu thời gian và sao chép URL:

Nhúng từng video riêng lẻ

Nếu bạn đang xem trình phát video đầy đủ, bạn có thể tìm thấy URL theo cách tương tự:

Nhúng video Facebook từ trình phát

Đây là mã nhúng sẽ trông như thế nào sau khi thêm URL cho video Divi Builder và thay đổi chiều rộng của video thành 550 px:

<div class="fb-video" data-href="https://www.facebook.com/elegantthemes/videos/10153760379211923/"
  data-allowfullscreen="true" data-width="550"></div>

Chỉ cần dán mã đó vào tab văn bản của trình chỉnh sửa WordPress để nhúng video. Bạn cũng có thể thêm mã này vào thanh bên của mình hoặc bất kỳ nơi nào khác cho phép mã:

Nhúng mã video Facebook

Sau khi xuất bản bài đăng, bạn sẽ thấy video được nhúng:

Đã xuất bản video Facebook nhúng

MẸO Làm cho video được nhúng của bạn tự động phát

Một trong những lợi thế lớn của việc nhúng video Facebook theo cách này là khả năng làm cho chúng tự động phát (tắt tiếng) giống như trên Facebook. Nếu bạn muốn video Facebook tự động phát ngay cả khi được nhúng vào trang web của mình, bạn chỉ cần thêm một thuộc tính vào mã nhúng của mình.

Xem thêm:  Cách sửa camera yoosee bị lỗi?

Đây là thuộc tính bạn cần thêm:

01
data-autoplay=”true”

Trong mã nhúng đầy đủ, nó trông giống như sau:

01
<div class="fb-video" data-href="https://www.facebook.com/elegantthemes/videos/10153760379211923/"data-allowfullscreen="true" data-width="550" data-autoplay="true"></div>

Sau khi bạn thực hiện thay đổi đó, video của bạn sẽ tự động phát khi người đọc tải trang.

4. Cách nhúng video Facebook với iFrames

Nếu bạn không muốn tuỳ chỉnh vào tiêu đề chủ đề của mình, Facebook cũng đã thêm các đoạn nhúng iframe có chức năng khá giống với YouTube. Lưu ý – bạn không thể tạo video tự động phát khi bạn nhúng chúng qua iframe với phương pháp này.

Để tìm mã nhúng, trước tiên bạn cần nhấp vào mũi tên nhỏ ở góc trên cùng bên phải của bài đăng video:

Khung nội tuyến video trên Facebook

Sau đó chọn tùy chọn Nhúng .

Một cửa sổ mới sẽ mở ra với mã iframe của bạn:

mã iframe

Chỉ cần sao chép mã đó và dán vào tab văn bản của Trình chỉnh sửa WordPress.

Khung nội tuyến video Facebook trong WordPress

Ok vậy là đã xong, chúc các bạn thành công.

0/5 (0 Reviews)