Xem Nội Dung Ngay

Làm thế nào để tạo bảng so sánh affiliate trên ghost CMS?

Nếu bạn đang ghost để làm affilate thì bạn sẽ yêu thích kỹ thuật tôi sắp chia sẻ sau đây, siêu dễ áp dụng (P/S: đặc biệt những bạn đang làm Amazon Affiliate lại càng không thể bỏ qua).

Cường Trần
Cường Trần
6 phút đọc
Làm thế nào để tạo bảng so sánh affiliate trên ghost CMS?

Một kỹ thuật tăng tỷ lệ chuyển đổi cực tốt trong các bài viết review affiliate đó là tạo các bảng so sánh, bảng đánh giá, bảng thông tin sản phẩm, bảng phân tích ưu điểm khuyết điểm.

Tạo các loại bảng này chưa bao giờ được xem là điều dễ dàng, kể cả khi bạn có dùng WordPress plugin thì nó luôn được liệt vào danh sách Premium Plugin trả phí và phí luôn cao, nhưng lại khó dùng.

Ghost không có plugin nhưng có một cách giúp bạn tạo các loại bảng trên cực kỳ dễ dàng, không làm ảnh hưởng đến tốc độ, lại tuyệt vời cho SEO.

Bài viết này tôi sẽ giới thiệu bạn một công cụ tuyệt vời là Affiliatable, tuy chuyên dụng cho Affiliate Amazon nhưng dùng được cho mọi tình huống.

Tạo tài khoản Affiliatable và các bước cần thiết

Bạn cần tạo một tài khoản Affiliatable miễn phí để làm theo hướng dẫn. Tuy tài khoản miễn phí có hạn chế nhưng vẫn dùng được như thường cho nhiều website của bạn.

Dĩ nhiên nâng cấp lên bản trả phí vĩnh viễn sẽ tuyệt vời hơn nếu bạn cảm thấy cần thiết và có đủ điều kiện. Hãy xem bảng so sánh tài khoản miễn phí và trả phí tạo bằng Affiliatable bên dưới.

ImageProductFeaturesPrice
Miễn Phí Miễn Phí
  • Hạn chế lựa chọn Layout
  • Không được dùng Sidebar Copy Code
  • Hạn chế số lượng bảng tạo
Tìm Hiểu
Trả Phí ($299) Trả Phí ($299)
  • Không giới hạn tính năng
  • Hỗ trợ tốt hơn
Tìm Hiểu

Sau khi đã có tài khoản Affiliatable, việc tiếp theo là bạn copy CSS của Affiliatable vào trong blog của bạn.

Copy CSS của Affiliatable
Bước #1: Copy và dán CSS của Affiliatable
<style>

@charset "utf-8" ;
:root{
    --cg-orange:#f39c12;
}
.....

</style>

Bạn nhớ phải thêm <style></style> như trên.

Dán vào Ghost Head Tag
Bước #2: Dán vào Ghost Head Tag (Site Header)

Nếu không có CSS thì bảng không thể tạo được. Affiliatable chỉ dùng thuần HTML và CSS để tạo bảng cho bạn, không JavaScript, nên bảng được tạo là "chuẩn nhất" cho SEO lẫn tốc độ tải trang.

Bạn quay lại Affilate Dashboard để tiếp tục.

Cách tạo bảng Affiliatable

Affiliatable hiện có 5 loại bảng cho bạn lựa chọn, các bản cập nhật sau sẽ bổ sung thêm những loại bảng khác

  1. Table (Bảng so sánh và tính năng)
  2. Product Box (Bảng giới thiệu sản phẩm)
  3. Top 3 Box (Bảng top 3 sản phẩm nổi bật)
  4. Pros & Cons (Bảng ưu khuyết điểm sản phẩm)
  5. Rating box (Bảng đánh giá sản phẩm)

Bạn chọn 1 trong 5 bảng trên vào tùy chỉnh link, màu sắc, diện mạo (tài khoản miễn phí hạn chế diện mạo tạo sẵn), thông tin, nút CTA. Bạn sẽ mất một chút thời gian cho việc này.

Một điểm quan trọng trong quá trình tạo bảng là URL của ảnh sản phẩm. Nếu bạn làm affiliate Amazon thì chỉ cần "fetch" link sản phẩm là ảnh tự động thêm vào. Tuy nhiên, nếu bạn dùng cho sản phẩm affiliate khác thì cần làm thêm một bước nhỏ.

Dùng chính ghost để tạo URL cho file ảnh, bạn upload ảnh lên Ghost bằng cách tạo một Post mới dưới chế độ Draft và upload ảnh lên.

File ảnh trong Ghost sẽ có cấu trúc URL như sau:

https://domain.com/content/images/<năm>/<tháng>/<tên-file>

Giả sử ảnh bạn tải lên là anh-1.png và ngày tải lên là 20/12/2020 thì ảnh sẽ có URL sau:

https://domain.com/content/images/2020/12/anh-1.png

Sau khi đã có URL ảnh thì mọi việc còn lại khá đơn giản, bạn chỉ dán URL vào và bắt đầu thiết kế màu sắc và thông tin như ý.

Ngoài hướng dẫn trên, nếu bạn cảm thấy bất tiện vì thao tác tải ảnh và lấy URL dài dòng. Bạn có thể lựa chọn dùng BunnyCDN Storage hoặc Publitio thay thế. Nhanh và tuyệt vời hơn!

Chèn bảng affiliate vào Ghost blog

Không thể đơn giản hơn, bạn chỉ cần copy bảng hoàn chỉnh và dán vào HTML block của bài viết hoặc bất kỳ trang nào bạn muốn trên Ghost (dùng HTML block).

Copy HTML code
Copy HTML code
Dùng HTML block
Dùng HTML block

Bảng copy sẽ chính xác như cái mà bạn đã thiết kế.

Có một thủ thuật nhỏ, ghost hỗ trợ chèn Head tag nên ở bước #1 bạn có thể chèn CSS ngay mỗi bài viết, cách này giúp bạn hạn chế các CSS không cần thiết cho toàn site.

Lời kết...

Ưu điểm tuyệt vời của Affiliatable là thiết kế thuần HTML và CSS, vô cùng tuyệt vời cho SEO và tốc độ tải trang.

Bảng sau khi tạo có thể chèn vào mọi nền tảng, mọi landing page không chỉ ghost CMS.

Chưa kể đến, Affiliatable cơ bản là liên kết với Amazon Affiliate, là một công cụ bạn không nên bỏ qua khi bạn đang làm tiếp thị liên kết Amazon.

Với Affilatable Pro, bạn có rất nhiều lựa chọn mẫu thiết kế và hỗ trợ dán vào Sidebar. Cực kỳ hữu dụng nếu bạn đang dùng theme Ghost có sidebar. Rất đáng để bạn cân nhắc nâng cấp 1 lần dùng Affiliatable Pro không giới hạn.

Bảng giá Affiliatable
Bảng giá Affiliatable

Một lưu ý nhỏ, do Affiliatable dùng CSS nên đôi khi theme của bạn có thể "ghi đè" lên CSS của Affiliatable gây lỗi hiển thị không đúng.

Blog

Bạn có thể quan tâm

Ghost CMS bị lỗi font tiếng Việt? Bạn đã lầm to!

Giải thích các vấn đề về font tiếng Việt khi dùng Ghost CMS, bạn cần hiểu đầy đủ.

Ghost CMS bị lỗi font tiếng Việt? Bạn đã lầm to!

Google AMP giờ đây chỉ là một lựa chọn khi dùng Ghost

Bạn có nên dùng Google AMP cho blog Ghost? Bây giờ là quyết định của chính bạn.

Google AMP giờ đây chỉ là một lựa chọn khi dùng Ghost

Giải pháp chống download video khoá học với Bunny Stream HLS

Giải pháp chống download video khoá học giúp bạn an tâm sáng tạo với Bunny Stream HLS. Tài sản số của bạn cần được bảo vệ.

Giải pháp chống download video khoá học với Bunny Stream HLS
Cường Trần

Cường Trần

Cường chuyên viết về giải pháp liên quan đến WordPress và Ghost, là một How-to blogger thực chiến.