Cách nhúng một trang amazon vào trang facebook miễn phí

Một cửa hàng trên Facebook?

Bạn đã quyết định rằng tiếp thị liên kết là dành cho bạn. Bạn đã xây dựng một Amazon aStore. Bạn đã dành thời gian của mình, chăm chỉ sàng lọc các sản phẩm để thêm vào nó…

Khai thác sức mạnh của phương tiện truyền thông xã hội, bạn thậm chí có một trang Facebook dành riêng cho các nỗ lực tiếp thị liên kết của mình… Bạn đã tạo ảnh bìa dòng thời gian để thể hiện rõ ràng trang đó một cách trực quan… Bạn đăng cập nhật trạng thái lên trang Facebook đó với liên kết đến các sản phẩm cụ thể trong aStore của bạn…

Nhưng sẽ thật tuyệt nếu bạn có thể khoe cả aStore ngay trong trang Facebook đó phải không? Chà… bạn có thể!

Các tab tùy chỉnh khá dễ quản lý. Bạn thậm chí có thể tùy chỉnh hình ảnh và văn bản tiêu đề hiển thị trên chính tab đó.

Một ví dụ

Hãy xem trang Facebook của Tủ quần áo Cộng sản chẳng hạn. Lưu ý tab có tiêu đề "Cửa hàng Xô Viết?"

Soviet Shop là một Amazon aStore được nhúng trực tiếp vào trang Facebook với một chút HTML và một ứng dụng "Facebook hợp pháp". Không, chúng tôi không hack bất cứ thứ gì… chỉ đang tận dụng tài nguyên.

Những gì bạn cần

Quyền truy cập của quản trị viên vào một trang Facebook (nếu bạn tạo nó, bạn đã có quyền truy cập quản trị viên)
Ứng dụng tab tùy chỉnh miễn phí (Tôi thích sử dụng HTML tĩnh: tab iframe)
Amazon aStore và liên kết liên kết của nó

Hãy tự giúp mình… để Facebook và Amazon Associate Central mở trong các tab trình duyệt riêng biệt (hoặc thậm chí các trình duyệt riêng biệt, nếu bạn thích). Bằng cách đó, bạn có thể qua lại giữa hai người nếu có nhu cầu.

Thêm ứng dụng

Điều hướng đến ứng dụng trong Facebook (với liên kết ở trên) và nhấp vào nút "cài đặt" để thêm ứng dụng vào trang của bạn. Trên màn hình tiếp theo, ứng dụng sẽ yêu cầu bạn xác nhận điểm đến cài đặt (trang mà bạn sẽ cài đặt ứng dụng) nếu bạn quản trị nhiều hơn một trang Facebook.

Chọn trang đích thích hợp và nhấp vào nút "cài đặt" để xác nhận. Vâng, nó thực sự đơn giản.

Chỉnh sửa nội dung tab

Sau khi cài đặt xong ứng dụng, hãy quay lại trang của bạn. Bạn sẽ tìm thấy một tab mới có tiêu đề "Chào mừng!" trên màn hình của bạn. Nhấp vào nó và chúng ta hãy làm một số phép thuật!

Đừng lo lắng về tiêu đề tab và hình ảnh, chúng tôi sẽ xem xét chúng ngay sau đây.

Nhấp vào tab Chào mừng mới của bạn sẽ đưa bạn đến màn hình chỉnh sửa này. Tại đây, bạn sẽ có thể:

Lưu trữ "mã" của bạn trong phần index.html
Tổ chức mã sâu hơn trong các phần style.css và script.js (dành cho người dùng nâng cao hơn)
Thay đổi cài đặt tab
Tạo Fan-Gate (chúng tôi sẽ làm điều đó trong một Hub khác)

Theo mặc định, bạn sẽ đến phần index.html của ứng dụng (đây là nơi chúng tôi sẽ thực hiện tất cả công việc của mình). Vui lòng xóa văn bản hiện có trong phần đó.

Nhận mã aStore của bạn

Trong Trung tâm liên kết của Amazon:

Sử dụng menu thả xuống ở phía trên bên trái của màn hình để chọn ID theo dõi thích hợp của aStore của bạn. (Điều này chỉ cần thiết nếu bạn có nhiều Cửa hàng trong cùng một tài khoản… nếu bạn chỉ có một Cửa hàng, đừng lo lắng về bước này.)
Nhấp vào "Nhận liên kết" ở menu bên trái.
Trang sẽ hiển thị một màn hình mới có tiêu đề "Cửa hàng của bạn đã được xuất bản!" Ngay bên dưới thông báo, bạn sẽ thấy một số phiên bản của liên kết aStore của mình.
Chọn tùy chọn "Nhúng cửa hàng của tôi bằng cách sử dụng khung nội tuyến". Chúng tôi sẽ sửa đổi mã này một chút để tối ưu hóa nó cho việc tích hợp Facebook.
Sao chép tất cả mã trong hộp văn bản và dán vào ứng dụng (phần index.html) trong Facebook.

Mã chúng tôi sẽ làm việc với sẽ giống như sau:

URL an toàn

Lần đầu tiên khi dán mã liên kết của bạn vào ứng dụng, bạn sẽ thấy thông báo cảnh báo về việc URL aStore của bạn không an toàn. Không, liên kết sẽ không hỏi bạn liệu mã nguồn của nó có làm cho nó trông mập mạp hay không. Tuy nhiên, một số trình duyệt có thể không hiển thị aStore của bạn đúng cách vì chúng không "nghĩ" rằng cửa hàng được lưu trữ trên một máy chủ an toàn. Điều này đặc biệt quan trọng ở đây vì xét cho cùng, chúng tôi không muốn làm cho khách hàng tiềm năng của bạn hoang tưởng khi mua sắm.

Vì vậy, điều đầu tiên trước tiên là… Thay đổi http: // trong mã của bạn thành http s: //

Điều chỉnh kích thước hiển thị

Bây giờ, chúng tôi sẽ thay đổi kích thước hiển thị của aStore của bạn trong trang Facebook.

Lưu ý rằng chiều rộng được đặt thành 90%? Chà, đó là 90% những gì trình duyệt tính là kích thước trang hiện tại. Điều này sẽ hoàn toàn không chính xác… Chúng tôi sẽ chỉ định chiều rộng là 815 pixel để vừa với ứng dụng iframe.

Thay đổi width = "90%" thành width = "815px"

Tôi cũng khuyên bạn nên rút ngắn chiều cao (đáng kể) xuống 1000 hoặc thậm chí 1200 pixel. Nó sẽ làm cho nội dung của bạn chứa đựng nhiều hơn một chút…

Thay đổi height = "4000" thành height = "1200px"

Cho phép cuộn

AStore của bạn có thể khá dài (thậm chí dài hơn 4000 pixel được chỉ định ban đầu). Điều này thường xảy ra nếu mô tả sản phẩm dài và cũng có một số bài đánh giá sản phẩm được đăng. Theo mặc định, tính năng cuộn bị tắt… và điều đó sẽ cắt nội dung vượt quá chiều cao được chỉ định. Vì chúng tôi không muốn giới hạn aStore của bạn, chúng tôi sẽ bật tính năng cuộn.

Thay đổi scrolling = "no" thành scrolling = "yes"

Mã đã hoàn thành của bạn bây giờ sẽ trông giống như sau:

Đừng quên nhấn vào nút "Lưu & Xuất bản" ở góc trên bên phải. Bạn cũng có thể xem trước tác phẩm của mình bất kỳ lúc nào bằng nút "Xem trước" bên cạnh…

Kén chọn, kén chọn…

OK, tôi đang hiểu… Chúng tôi có mã iframe trong một ứng dụng iframe. Vâng, nó thừa. Có, nó nên được sửa chữa. Tuy nhiên, để dễ sử dụng trong hướng dẫn cấp độ cho người mới bắt đầu này, tôi sẽ để nguyên như vậy. Đừng phán xét tôi.

Nút tùy chỉnh

Bây giờ việc tích hợp aStore của bạn đã hoàn tất, bạn sẽ muốn có câu "Chào mừng!" trên trang nhất để trông có ý nghĩa hơn một chút, phải không?

Quay lại "giao diện người dùng" của trang Facebook của bạn.
Nhấp vào nút nhỏ (có hình tam giác nhọn hướng xuống) ở ngay bên phải của tất cả các tab trang.
Khi trang mở rộng, hãy di chuột qua "Chào mừng!" chuyển hướng.
Bạn sẽ nhận thấy một biểu tượng mới (bút chì) xuất hiện trên tab. Nhấp vào biểu tượng này để có menu thả xuống mới.

Từ menu thả xuống, hãy nhấp vào "Chỉnh sửa cài đặt".
Một cửa sổ bật lên sẽ xuất hiện trong đó bạn có thể thay đổi tên của tab và thêm hình ảnh tùy chỉnh để hiển thị dưới dạng nút.
Tùy chỉnh tab theo ý bạn.