วิธีฝัง amazon Astore ลงในหน้า Facebook ฟรี

ร้านค้าใน Facebook?

คุณได้ตัดสินใจแล้วว่า Affiliate Marketing เหมาะสำหรับคุณ คุณได้สร้าง Amazon aStore แล้ว คุณได้ใช้เวลาของคุณอย่างขยันขันแข็งในการกลั่นกรองผลิตภัณฑ์เพื่อเพิ่ม…

ด้วยการควบคุมพลังของโซเชียลมีเดียคุณยังมีเพจ Facebook ที่ทุ่มเทให้กับการทำการตลาดในเครือของคุณ… คุณสร้างรูปภาพหน้าปกไทม์ไลน์เพื่อแสดงหน้าเพจอย่างชัดเจน… คุณโพสต์การอัปเดตสถานะไปยังเพจ Facebook พร้อมลิงก์ไปยังผลิตภัณฑ์เฉพาะ ใน aStore ของคุณ…

แต่มันจะไม่ยอดเยี่ยมถ้าคุณสามารถอวด aStore ทั้งหมดได้ในหน้า Facebook นั้น? ดี… คุณทำได้!

แท็บที่กำหนดเองนั้นค่อนข้างง่ายในการจัดการ คุณสามารถปรับแต่งรูปภาพและข้อความชื่อเรื่องที่แสดงบนแท็บเองได้

ตัวอย่าง

ลองดูที่หน้า Facebook ของ Communist Closet เช่น สังเกตแท็บที่ชื่อว่า "Soviet Shop?"

Soviet Shop คือ Amazon aStore ที่ฝังอยู่ในหน้า Facebook โดยตรงด้วย HTML เล็กน้อยและแอป "Facebook-legal" ไม่เราไม่ได้แฮ็กอะไร… แค่ใช้ทรัพยากร

สิ่งที่คุณต้องการ

• ผู้ดูแลระบบเข้าถึงเพจ Facebook (หากคุณสร้างขึ้นแสดงว่าคุณมีสิทธิ์เข้าถึงผู้ดูแลระบบแล้ว)
• แอพแท็บที่กำหนดเองฟรี (ฉันชอบใช้ Static HTML: iframe tabs)
• Amazon aStore และลิงก์ที่เกี่ยวข้อง

ให้ความสำคัญกับตัวเอง… เปิด Facebook และ Amazon Associate Central ในแท็บเบราว์เซอร์แยกกัน (หรือแม้แต่เบราว์เซอร์แยกกันก็ได้ ด้วยวิธีนี้คุณสามารถย้อนกลับไปมาระหว่างทั้งสองได้หากมีความจำเป็นเกิดขึ้น

การเพิ่มแอป

ไปที่แอพภายใน Facebook (พร้อมลิงค์ด้านบน) แล้วคลิกปุ่ม "ติดตั้ง" เพื่อเพิ่มแอพลงในเพจของคุณ ในหน้าจอถัดไปแอพจะขอให้คุณยืนยันปลายทางการติดตั้ง (หน้าที่คุณจะติดตั้งแอพ) หากคุณดูแลเพจ Facebook มากกว่าหนึ่งเพจ

เลือกหน้าปลายทางที่เหมาะสมและคลิกปุ่ม "ติดตั้ง" เพื่อยืนยัน ใช่มันเป็นเรื่องง่ายจริงๆ

แก้ไขเนื้อหาของแท็บ

หลังจากติดตั้งแอพเสร็จแล้วให้กลับไปที่เพจของคุณ คุณจะพบแท็บใหม่ชื่อ "ยินดีต้อนรับ!" บนหน้าจอของคุณ คลิกและมาใช้เวทมนตร์กันเถอะ!

ไม่ต้องกังวลเรื่องชื่อแท็บและรูปภาพเราจะไปถึงในไม่ช้า

การคลิกที่แท็บยินดีต้อนรับใหม่ของคุณจะนำคุณไปยังหน้าจอการแก้ไขนี้ ที่นี่คุณจะสามารถ:

• โฮสต์ "รหัส" ของคุณในส่วน index.html
• จัดระเบียบโค้ดเพิ่มเติมในส่วน style.css และ script.js (สำหรับผู้ใช้ขั้นสูง)
• เปลี่ยนการตั้งค่าแท็บ
• สร้าง Fan-Gate (เราจะทำใน Hub อื่น)

โดยค่าเริ่มต้นคุณจะเข้าสู่ส่วน index.html ของแอป (นี่คือที่ที่เราจะทำงานทั้งหมดของเรา) โปรดลบข้อความที่มีอยู่ในส่วนนั้น

รับรหัสร้านค้าของคุณ

ใน Associate Central ของ Amazon:

• ใช้เมนูแบบเลื่อนลงที่ด้านซ้ายบนของหน้าจอเพื่อเลือกรหัสติดตามที่เหมาะสมของ aStore ของคุณ (สิ่งนี้จำเป็นเฉพาะในกรณีที่คุณมีหลาย aStores ในบัญชีเดียวกัน… หากคุณมี aStore เพียงแห่งเดียวอย่ากังวลกับขั้นตอนนี้)
• คลิก "รับลิงก์" ในเมนูด้านซ้าย
• หน้านี้จะแสดงหน้าจอใหม่ที่ชื่อว่า "ร้านค้าของคุณได้รับการเผยแพร่แล้ว!" ใต้ประกาศคุณจะเห็นลิงก์ aStore หลายเวอร์ชัน
• เลือกตัวเลือก "ฝังร้านค้าของฉันโดยใช้กรอบในบรรทัด" เราจะแก้ไขโค้ดนี้เล็กน้อยเพื่อเพิ่มประสิทธิภาพสำหรับการรวม Facebook
• คัดลอกโค้ดทั้งหมดในกล่องข้อความแล้ววางลงในแอพ (ส่วน index.html) ใน Facebook

รหัสที่เราจะใช้ควรเป็นดังนี้:

URL ที่ปลอดภัย

เมื่อวางโค้ดลิงก์ของคุณลงในแอปเป็นครั้งแรกคุณจะเห็นข้อความเตือนเกี่ยวกับ URL aStore ของคุณว่าไม่ปลอดภัย ไม่ลิงก์จะไม่ถามคุณว่าซอร์สโค้ดทำให้ดูอ้วนหรือไม่ แต่บางเบราว์เซอร์อาจไม่แสดง aStore ของคุณอย่างถูกต้องเนื่องจากไม่ "คิด" ว่าร้านค้านั้นโฮสต์บนเซิร์ฟเวอร์ที่ปลอดภัย นี่เป็นสิ่งสำคัญอย่างยิ่งที่นี่เพราะเราไม่ต้องการทำให้ผู้มีโอกาสเป็นลูกค้าของคุณหวาดระแวงเมื่อซื้อ

ก่อนอื่นสิ่งแรก… เปลี่ยน http: // ภายในรหัสของคุณเป็น http s: //

ปรับขนาดการแสดงผล

ตอนนี้เราจะเปลี่ยนขนาดที่แสดงของ aStore ของคุณภายในเพจ Facebook

สังเกตว่าความกว้างตั้งไว้ที่ 90%? นั่นคือ 90% ของสิ่งที่เบราว์เซอร์คำนวณเป็นขนาดหน้าปัจจุบัน สิ่งนี้จะไม่ถูกต้องอย่างแน่นอน… เราจะระบุความกว้างเป็น 815 พิกเซลเพื่อให้พอดีกับแอป iframe

เปลี่ยน width = "90%" เป็น width = "815px"

ฉันขอแนะนำให้ย่อความสูง (อย่างมาก) ให้สั้นลงเหลือ 1,000 หรือ 1200 พิกเซล จะทำให้เนื้อหาของคุณมีอยู่มากขึ้น…

เปลี่ยน height = "4000" เป็น height = "1200px"

อนุญาตให้เลื่อน

aStore ของคุณอาจมีความยาวมาก (แม้จะยาวกว่า 4000 พิกเซลดั้งเดิมที่ระบุไว้ก็ตาม) โดยทั่วไปจะเกิดขึ้นหากคำอธิบายผลิตภัณฑ์มีความยาวและมีการโพสต์บทวิจารณ์ผลิตภัณฑ์หลายรายการเช่นกัน โดยค่าเริ่มต้นการเลื่อนจะถูกปิดใช้งาน… และจะตัดเนื้อหาที่เกินความสูงที่กำหนด เนื่องจากเราไม่ต้องการ จำกัด aStore ของคุณเราจึงเปิดใช้งานการเลื่อน

เปลี่ยนการเลื่อน = "ไม่" เป็นเลื่อน = "ใช่"

โค้ดสำเร็จรูปของคุณควรมีลักษณะดังนี้:

อย่าลืมกดปุ่ม "บันทึกและเผยแพร่" ที่มุมขวาบน คุณยังสามารถดูตัวอย่างงานของคุณได้ตลอดเวลาด้วยปุ่ม "ดูตัวอย่าง" ที่อยู่ติดกัน…

ปิ๊กมี่ปิ๊กมี่…

โอเคฉันกำลังคิด… เรามีโค้ด iframe ในแอพ iframe ใช่มันซ้ำซ้อน ใช่มันควรได้รับการแก้ไข แต่เพื่อความสะดวกในการใช้งานในคู่มือระดับเริ่มต้นนี้ฉันจะปล่อยให้มันเป็นเช่นนั้น อย่าตัดสินฉัน

ปุ่มที่กำหนดเอง

ตอนนี้การรวม aStore ของคุณเสร็จสมบูรณ์คุณจะต้อง "ยินดีต้อนรับ!" ที่น่ารำคาญเล็กน้อย ปุ่มหน้าให้ดูมีความหมายขึ้นมาหน่อยใช่ไหม?

• กลับไปที่ "ส่วนหน้า" ของหน้า Facebook ของคุณ
• คลิกปุ่มเล็ก ๆ (ที่มีรูปสามเหลี่ยมชี้ลง) ทางด้านขวาของแท็บหน้าทั้งหมด
• เมื่อเพจขยายขึ้นให้วางเมาส์เหนือ "ยินดีต้อนรับ!" ใหม่ แท็บ
• คุณจะสังเกตเห็นไอคอนใหม่ (ดินสอ) ปรากฏขึ้นเหนือแท็บ คลิกไอคอนนี้เพื่อดูเมนูแบบเลื่อนลงใหม่

• จากเมนูแบบเลื่อนลงคลิก "แก้ไขการตั้งค่า"
• หน้าต่างป๊อปอัปจะปรากฏขึ้นซึ่งคุณสามารถเปลี่ยนชื่อแท็บและเพิ่มรูปภาพที่กำหนดเองเพื่อแสดงเป็นปุ่ม
• ปรับแต่งแท็บตามที่คุณต้องการ

เสร็จแล้ว!