Hướng dẫn chèn link Fanpage Facebook vào website

Updated at 1774174423000

Trong quá trình xây dựng website thời trang, việc gắn link Fanpage Facebook vào website là một bước rất hữu ích để tăng độ tin cậy, giúp khách hàng dễ dàng theo dõi trang và kết nối với thương hiệu trên mạng xã hội.

Đặc biệt với các shop thời trang online, Fanpage không chỉ là nơi đăng bài bán hàng mà còn là kênh chăm sóc khách hàng, cập nhật mẫu mới, livestream và quảng bá thương hiệu. Khi hiển thị Fanpage ngay trong website, khách truy cập sẽ cảm thấy website chuyên nghiệp hơn và dễ tương tác hơn.Trên nền tảng EzyPlatform, bạn có thể thực hiện việc này bằng cách tạo một đoạn nội dung nhỏ trong khu vực quản trị bài viết, sau đó chèn đoạn đó vào phần chân trang hoặc vị trí mong muốn trên website.

Bài viết này sẽ hướng dẫn theo 2 trường hợp:

Trường hợp 1: Dành cho người không biết lập trình, chỉ cần dùng ChatGPT để tạo sẵn nội dung code
Trường hợp 2: Dành cho người biết lập trình, muốn tự viết và tùy biến giao diện Fanpage trên website

👉 Nếu bạn đang tự xây dựng website thời trang và chưa quen với việc viết code, đừng lo lắng. Bạn vẫn có thể thêm Fanpage Facebook vào website bằng một cách rất đơn giản: nhờ ChatGPT tạo sẵn nội dung hiển thị. Bạn chỉ cần thực hiện vài thao tác trong khu vực quản trị là đã có thể hoàn thành. Phần hướng dẫn dưới đây sẽ giúp bạn làm điều đó một cách dễ dàng.

Trường hợp 1: Hướng dẫn cho người không biết code

Ý tưởng thực hiện

Nếu bạn không biết lập trình, bạn vẫn có thể chèn Fanpage vào website bằng cách:

Chuẩn bị thông tin Fanpage
Nhờ ChatGPT tạo sẵn đoạn code HTML
Sao chép đoạn code đó vào khu vực quản trị bài viết
Lưu lại và kiểm tra hiển thị ngoài website

👉 Nói cách khác, bạn không cần tự viết code, chỉ cần dùng ChatGPT như một công cụ hỗ trợ tạo sẵn nội dung.

Tạo đoạn nội dung Fanpage trong khu vực quản trị

Dựa trên ảnh minh họa, bạn thực hiện như sau:

Bước 1: Vào khu vực quản trị bài viết

Trong menu quản trị bên trái, chọn:

Các bài viết → Danh sách / Tạo
Sau đó mở bài viết hoặc đoạn nội dung mà bạn muốn dùng để hiển thị Fanpage.

Ở ví dụ trong ảnh, bài viết đang được chỉnh sửa có tên gần giống như: website_footer_fanpage

👉 Điều này cho thấy nội dung Fanpage đang được tạo như một đoạn riêng để chèn vào chân website.

Bước 2: Nhập nội dung code do ChatGPT tạo

Trong khung soạn thảo nội dung, bạn dán đoạn code HTML mà ChatGPT tạo cho bạn.

Ví dụ dạng nội dung sẽ gồm:

khối ngoài cùng của fanpage
khu vực ảnh đại diện
tên fanpage
mô tả ngắn
nút bấm theo dõi trang
đường dẫn tới Facebook

👉 Bạn chỉ cần sao chép toàn bộ đoạn code và dán vào ô nội dung như trong ảnh minh họa.

Bước 3: Thiết lập thông tin bài viết

Ở phần bên phải màn hình, bạn có thể cấu hình thêm một số thông tin:

Cuối đường dẫn: ví dụ fanpage-website
Loại bài viết
Kiểu nội dung
Trạng thái
Ngôn ngữ
Độ ưu tiên

👉 Phần này giúp hệ thống quản lý đoạn nội dung rõ ràng hơn.

Bước 4: Khai báo tên trang và tên đoạn trang

Ở phía dưới nội dung, bạn nhập:

Tên trang: website_footer
Tên đoạn trang: fanpage

👉 Điều này có nghĩa là đoạn nội dung Fanpage này sẽ được dùng trong trang chân website.Đây là bước quan trọng vì hệ thống sẽ dựa vào các thông tin này để gọi đúng nội dung ra ngoài giao diện website.

Bước 5: Cập nhật bài viết

Sau khi dán nội dung và điền thông tin đầy đủ, nhấn nút: Cập nhật để lưu lại.

Dùng ChatGPT để tạo nội dung Fanpage

Đây là cách phù hợp nhất với người không biết code. Bạn chỉ cần gửi cho ChatGPT đầy đủ thông tin và yêu cầu tạo một đoạn hiển thị Fanpage đơn giản.Mẫu prompt gợi ý

Bạn có thể dùng prompt như sau:

👉 ChatGPT sẽ trả về cho bạn một đoạn HTML để sao chép vào hệ thống.

Dùng ChatGPT để tạo banner, logo và nội dung mô tả

Ngoài phần code hiển thị, bạn cũng có thể dùng ChatGPT để hỗ trợ viết nội dung và lên ý tưởng giao diện.

Tạo nội dung mô tả ngắn cho fanpage

Ví dụ prompt: "Hãy viết cho tôi 5 câu mô tả ngắn để hiển thị fanpage thời trang trên website, giọng văn chuyên nghiệp, ngắn gọn, dễ hiểu."

Tạo ý tưởng banner fanpage

Ví dụ prompt: "Hãy gợi ý cho tôi nội dung banner nhỏ để đặt cạnh fanpage trên website thời trang nữ, phong cách hiện đại, sang trọng, tối giản."

Tạo ý tưởng logo fanpage

Ví dụ prompt: "Hãy gợi ý phong cách logo cho fanpage thời trang tên FASHION, tông màu nhẹ nhàng, phù hợp website bán quần áo."

Mẫu code đơn giản cho người không biết code

Bạn có thể dùng ngay mẫu cơ bản sau:

📘 Mẫu code hiển thị Fanpage

&lt;div class="fanpage-card"&gt;
  &lt;div class="fanpage-top"&gt;
    &lt;div class="fanpage-avatar"&gt;
      &lt;img src="LINK_ANH_LOGO" alt="Fanpage Logo"&gt;
    &lt;/div&gt;

    &lt;div class="fanpage-info"&gt;
      &lt;a class="fanpage-name" href="https://www.facebook.com/mi.le.916758/" target="_blank"&gt;FASHION&lt;/a&gt;
      &lt;div class="fanpage-followers"&gt;người theo dõi&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="fanpage-bottom"&gt;
    &lt;a class="follow-btn" href="https://www.facebook.com/mi.le.916758/" target="_blank"&gt;
      Theo dõi Trang
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

Bạn chỉ cần thay:

LINK_ANH_LOGO bằng link ảnh logo thật
FASHION bằng tên fanpage của bạn
link Facebook bằng fanpage thật của bạn

Kiểm tra hiển thị ngoài website

Sau khi lưu hoặc cập nhật nội dung Fanpage trong khu vực quản trị, bạn hãy truy cập website để kiểm tra phần chân trang (footer) hoặc vị trí đã chèn Fanpage. Khi hoàn tất đúng, bạn sẽ thấy một khối hiển thị gồm logo Fanpage, tên trang và nút “Theo dõi Trang”. Khi nhấn vào tên hoặc nút theo dõi, trình duyệt sẽ mở Fanpage Facebook ở tab mới.

👉 Bạn nên kiểm tra lại một số điểm quan trọng như: đường dẫn Fanpage có chính xác, logo có hiển thị rõ ràng, tên Fanpage đúng chính tả và bố cục hiển thị cân đối trên cả desktop và mobile.

Trường hợp 2: Dành cho người biết lập trình

Đối với người biết lập trình, việc chèn Fanpage Facebook vào website thời trang sẽ được thực hiện trực tiếp trong mã nguồn giao diện (page fragment) thay vì thao tác trong khu vực quản trị nội dung.

Cách làm này giúp bạn:

Chủ động thiết kế giao diện Fanpage theo layout website
Dễ dàng chỉnh sửa CSS, responsive
Quản lý code theo cấu trúc dự án
Sync nhanh lên server

Cấu trúc nội dung Fanpage

Dựa trên cấu trúc dự án trong VS Code, phần Fanpage thường được đặt trong:

page-fragments

└── support

└── website_footer

└── fanpage

├── content.html

├── head.html

├── foot.html

└── meta.json

👉 Đây là block riêng cho Fanpage ở chân website.Bạn sẽ chỉnh sửa file:"content.html" để thêm HTML hiển thị Fanpage.

Trong file content.html, bạn chèn khối code Fanpage:

Ảnh đại diện hoặc logo Fanpage
Tên Fanpage (có gắn link Facebook)
Nội dung mô tả ngắn
Nút theo dõi hoặc liên kết tới Fanpage

Thêm CSS hiển thị giao diện Fanpage

Bạn có thể viết CSS trực tiếp trong content.html hoặc tách sang file style chung.

Ví dụ:

Thiết lập kích thước card
Bo góc
Shadow
Layout flex
Responsive

👉 Khi code bằng fragment, nên:

Tránh CSS global
Prefix class rõ ràng (ví dụ: .fanpage-card)
Test hiển thị mobile

Đồng bộ code Fanpage lên server

Sau khi chỉnh sửa xong trong VS Code, bạn cần sync fragment lên server.

Thực hiện:

👉 Click chuột phải vào folder: fanpage → Chọn: Sync Page Fragment Folder

👉 Hệ thống sẽ hiển thị cảnh báo: "Syncing this fragment folder from the server will overwrite the current content." Bạn chọn Continue để tiếp tục.Sau khi sync thành công, nội dung Fanpage sẽ được cập nhật trên website.

Kiểm tra hiển thị sau khi sync

Sau khi deploy fragment:

Refresh website
Kiểm tra footer đã hiển thị Fanpage chưa
Kiểm tra link Facebook mở tab mới
Kiểm tra CSS có bị xung đột không
Kiểm tra mobile

Lưu ý chung cho cả hai trường hợp

✅ Kiểm tra đường dẫn Fanpage đã đúng và có thể truy cập được.

✅ Đảm bảo logo hoặc hình ảnh Fanpage hiển thị rõ nét, không bị lỗi hoặc vỡ hình.

✅ Kiểm tra tên Fanpage đúng chính tả, đúng thương hiệu.

✅ Bố cục hiển thị cân đối trên cả desktop và mobile.

✅ Nội dung mô tả nên ngắn gọn, dễ hiểu, tránh quá dài.

✅ Màu sắc và kiểu chữ nên đồng bộ với giao diện website thời trang.

✅ Sau khi chỉnh sửa, nên làm mới trang (refresh) hoặc kiểm tra trên nhiều trình duyệt để đảm bảo hiển thị ổn định.

✅ Chỉ nên sử dụng Fanpage chính thức của shop để tăng độ uy tín cho website.

Previous Page Hướng dẫn tạo trang "Biểu đồ kích thước (Size Chart)" hiển thị trên website Next Page Hướng dẫn tạo tài khoản ngân hàng cho Shop hiển thị trên Website