StayPano · Góc nhìn & kinh nghiệm

Cách nhúng tour 360 vào website và fanpage

Hướng dẫn nhúng tour 360 vào website bằng iframe hoặc link, các lưu ý hiển thị trên điện thoại và cách chia sẻ tour lên fanpage Facebook hiệu quả.

Minh họa nhúng tour 360 vào website

Có tour 360 trong tay mà chỉ gửi link qua tin nhắn thì phí — tour cần nằm ở nơi khách tự tìm thấy: website của cơ sở và fanpage. Bài này hướng dẫn hai cách đưa tour lên website, các lưu ý để tour hiển thị đẹp trên điện thoại, và cách chia sẻ tour lên fanpage cho đúng (vì Facebook không cho nhúng trực tiếp).

Hai cách đưa tour lên website

Cách 1: mã nhúng iframe. Bạn dán một đoạn mã vào trang, tour hiện ngay trong bài viết — khách kéo xoay 360° mà không cần rời trang. Cách này giữ khách ở lại website lâu hơn, hợp với trang chủ hoặc trang mô tả từng hạng phòng. Như đã nói trong bài tour 360 cho khách sạn, mỗi trang hạng phòng nên nhúng đúng nhóm cảnh của hạng đó thay vì cả tour dài.

Cách 2: link tour mở tab mới. Đặt nút "Xem tour 360" trên trang, khách bấm thì tour mở ở tab riêng. Cách này nhẹ nhất cho website — không ảnh hưởng tốc độ tải trang — và dễ làm nhất: chỉ cần dán link. Hợp với bài viết ngắn, trang tin tức, hoặc khi bạn chưa muốn can thiệp vào code website.

Nên dùng cách nào? Nếu website là kênh bán phòng chính, dùng iframe ở các trang quan trọng (trang chủ, trang hạng phòng) và dùng link ở những chỗ còn lại. Nếu chỉ cần chia sẻ nhanh, link là đủ.

Các bước nhúng bằng iframe

Sau khi quy trình dựng tour hoàn tất, bên làm tour sẽ bàn giao cho bạn một đoạn mã nhúng — thường có dạng <iframe src="..."></iframe>. Bốn bước để đưa nó lên website:

Bước 1: lấy đúng mã nhúng cho từng trang. Nếu tour có nhiều nhóm cảnh (ví dụ từng hạng phòng), mỗi nhóm có mã riêng — hỏi bên làm để lấy đúng mã cho từng trang, đừng nhúng cả tour dài vào trang chỉ nói về một hạng phòng.

Bước 2: dán vào trình soạn thảo ở chế độ HTML. Mở trang cần nhúng trong trình quản trị website, chuyển sang chế độ soạn thảo HTML (hoặc khối "Custom HTML" nếu dùng WordPress), dán đoạn mã vào vị trí muốn tour hiện ra. Đừng dán ở chế độ soạn thảo thường — mã sẽ hiện thành chữ thay vì thành tour.

Bước 3: chỉnh kích thước khung. Đặt chiều rộng 100% và chiều cao khoảng 500–600px trên máy tính (trên điện thoại khung sẽ tự co theo chiều rộng màn hình). Khung quá thấp thì khách khó xoay xem, khung quá cao thì che mất nội dung bên dưới.

Bước 4: kiểm tra hiển thị. Mở trang vừa nhúng trên cả máy tính và điện thoại: tour có tải được không, kéo xoay có mượt không, các nút trong tour có bấm được không. Nhờ một người khác mở thử bằng điện thoại của họ — máy của bạn có thể đã lưu cache nên thấy nhanh hơn thực tế.

Lưu ý khi nhúng

Ba điểm hay gặp sự cố nhất:

Kiểm tra kỹ trên điện thoại. Đa số khách xem tour bằng điện thoại. Mở trang ở chế độ 4G (đừng chỉ thử bằng wifi), xem tour tải trong bao lâu, chữ trong các điểm thông tin có đọc được không. Nếu tour tải chậm quá, báo bên làm tour tối ưu lại dung lượng ảnh.

Khung nhúng phải có kích thước thật ngay từ đầu. Đừng đặt tour trong tab ẩn, popup chưa mở, hoặc khối nội dung đóng/mở (accordion) đang đóng — nhiều trình xem tour tính kích thước khung lúc khởi tạo, khung đang ẩn thì tour hiện ra trắng trơn hoặc méo hình. Cách đúng: khung luôn có kích thước thật; nếu cần hiệu ứng tải thì phủ một lớp "đang tải" lên trên rồi gỡ khi tour sẵn sàng.

Đặt tour ở vị trí khách dễ thấy. Đầu trang hạng phòng, ngay dưới album ảnh — như đã nói trong bài ảnh thường vs tour 360, khách bị ảnh thu hút rồi bấm vào tour để kiểm chứng. Giấu tour ở cuối trang thì ít ai kéo tới.

Còn fanpage thì sao?

Nói thẳng: Facebook không hỗ trợ nhúng iframe trực tiếp vào bài viết. Không có cách nào để tour hiện ngay trong bài đăng fanpage như trên website.

Cách làm đúng trên fanpage gồm 3 bước:

1. Đăng link tour kèm ảnh thumbnail. Viết một bài giới thiệu ngắn ("Xem trước toàn cảnh villa của chúng mình bằng tour 360°"), đính kèm ảnh panorama đẹp nhất làm thumbnail, dán link tour trong bài. Link có ảnh đẹp đi kèm thì tỉ lệ bấm cao hơn hẳn link trơ trụi.

2. Ghim bài viết lên đầu trang. Vào tùy chọn bài viết → "Ghim lên đầu trang". Khách vào fanpage là thấy ngay tour, không phải kéo tìm.

3. Đặt link tour ở phần giới thiệu trang. Mục "Giới thiệu" của fanpage cho phép thêm liên kết website — thêm link tour vào đó để khách tìm thấy cả khi không đọc bài ghim.

Ngoài ra, mỗi khi đăng ảnh phòng mới, nhắc một câu "xem tour 360° đầy đủ tại link trong phần giới thiệu" — lặp lại nhiều lần thì khách mới nhớ.


Đã có tour mà chưa biết nhúng vào đâu? Gửi link website qua Zalo — mình xem cấu trúc trang và tư vấn vị trí đặt tour hợp lý, miễn phí. Chưa có tour thì gửi bộ ảnh 360 để kiểm tra chất lượng trước.

💬 Nhờ tư vấn vị trí nhúng tour

Tìm hiểu tiếp: Quy trình đặt làm tour 360 tại StayPano · Tour 360 cho khách sạn: những góc nào nhất định phải có

Read this article in English →