كيفية تضمين متجر أمازون في صفحة فيسبوك مجانًا

متجر في الفيسبوك؟

لقد قررت أن التسويق بالعمولة يناسبك. لقد قمت ببناء Amazon aStore. لقد قضيت وقتك في غربلة المنتجات بجد لإضافتها إليها…

من خلال تسخير قوة وسائل التواصل الاجتماعي ، لديك حتى صفحة Facebook مخصصة لجهود التسويق التابعة لك… لقد أنشأت صورة غلاف للجدول الزمني للتعبير بوضوح عن الصفحة بصريًا… تنشر تحديثات الحالة على صفحة Facebook تلك مع روابط لمنتجات معينة في متجرك…

لكن ألن يكون رائعًا إذا كان بإمكانك التباهي بالمتجر بأكمله في صفحة Facebook هذه؟ حسنًا… يمكنك ذلك!

من السهل جدًا إدارة علامات التبويب المخصصة. يمكنك أيضًا تخصيص الصور ونص العنوان الذي يظهر على علامة التبويب نفسها.

مثال

قم بإلقاء نظرة على صفحة Communist Closet على Facebook ، على سبيل المثال. لاحظ علامة التبويب بعنوان "متجر سوفييتي؟"

المتجر السوفيتي هو متجر أمازون مدمج مباشرة في صفحة Facebook مع القليل من HTML وتطبيق "Facebook-legal". لا ، نحن لا نخترق أي شيء… فقط نستخدم الموارد.

ماذا ستحتاج

• وصول المسؤول إلى صفحة Facebook (إذا قمت بإنشائها ، فلديك بالفعل حق وصول المسؤول)
• تطبيق علامة تبويب مخصص مجاني (أحب استخدام Static HTML: علامات تبويب iframe)
• Amazon aStore والرابط المرتبط به

تفضل لنفسك… اجعل Facebook و Amazon Associate Central مفتوحين في علامات تبويب متصفح منفصلة (أو حتى متصفحات منفصلة ، إذا كنت تفضل ذلك). بهذه الطريقة ، يمكنك الانتقال ذهابًا وإيابًا بين الاثنين إذا دعت الحاجة.

إضافة التطبيق

انتقل إلى التطبيق داخل Facebook (مع الرابط أعلاه) وانقر فوق الزر "تثبيت" لإضافة التطبيق إلى صفحتك. في الشاشة التالية ، سيطلب منك التطبيق تأكيد وجهة التثبيت (الصفحة التي ستقوم بتثبيت التطبيق فيها) إذا كنت تدير أكثر من صفحة على Facebook.

حدد صفحة الوجهة المناسبة وانقر فوق الزر "تثبيت" للتأكيد. نعم، هو حقا بهذه البساطة.

تحرير محتوى علامة التبويب

بعد اكتمال تثبيت التطبيق ، ارجع إلى صفحتك. ستجد علامة تبويب جديدة بعنوان "مرحبًا!" على شاشتك. انقر فوقه ودعنا نعمل بعض السحر!

لا تقلق بشأن عنوان علامة التبويب والصورة الآن ، فسنصل إليهم قريبًا.

سيؤدي النقر فوق علامة تبويب الترحيب الجديدة إلى نقلك إلى شاشة التحرير هذه. هنا ، ستتمكن من:

• استضف "الشفرة" في قسم index.html
• قم بتنظيم المزيد من التعليمات البرمجية في أقسام style.css و script.js (للمستخدمين الأكثر تقدمًا)
• تغيير إعدادات علامة التبويب
• قم بإنشاء بوابة مروحة (سنفعل ذلك في مركز آخر)

بشكل افتراضي ، ستنتقل إلى قسم index.html في التطبيق (هذا هو المكان الذي سنقوم فيه بجميع أعمالنا). يرجى حذف النص الموجود في هذا القسم.

احصل على كود المتجر الخاص بك

في مركز شركاء أمازون:

• استخدم القائمة المنسدلة في الجزء العلوي الأيسر من الشاشة لتحديد معرف التتبع المناسب لمتجرك. (هذا ضروري فقط إذا كان لديك عدة متاجر في نفس الحساب… إذا كان لديك متجر واحد فقط ، فلا تقلق بشأن هذه الخطوة.)
• انقر على "Get Link" في القائمة اليسرى.
• ستعرض الصفحة شاشة جديدة بعنوان "تم نشر متجرك!" أسفل الإعلان مباشرة ، سترى عدة إصدارات من رابط aStore الخاص بك.
• حدد الخيار "تضمين متجري باستخدام إطار مضمّن". سنقوم بتعديل هذا الرمز قليلاً لتحسينه للتكامل مع Facebook.
• انسخ كل الشفرة في مربع النص والصقها في التطبيق (قسم index.html) داخل Facebook.

يجب أن يكون الرمز الذي سنعمل معه شيئًا مثل:

عنوان URL آمن

عند لصق رمز الارتباط لأول مرة في التطبيق ، سترى رسالة تحذير حول أن عنوان URL الخاص بـ aStore غير آمن. لا ، لن يسألك الرابط عما إذا كانت شفرة المصدر الخاصة به تجعله يبدو سمينًا. ولكن ، قد لا تعرض بعض المتصفحات aStore الخاص بك بشكل صحيح لأنها "تعتقد" أن المتجر مستضاف على خادم آمن. هذا مهم بشكل خاص هنا لأننا ، بعد كل شيء ، لا نريد جعل عملائك المحتملين مرتابين عند التسوق.

لذا ، أول شيء أولاً… قم بتغيير http: // داخل الكود إلى http s: //

ضبط أبعاد العرض

الآن ، سنقوم بتغيير الأبعاد المعروضة لمتجر الخاص بك داخل صفحة Facebook.

لاحظ أن العرض مضبوط على 90٪؟ حسنًا ، هذا 90٪ مما يحسبه المتصفح كحجم الصفحة الحالية. سيكون هذا غير دقيق على الإطلاق… سنحدد العرض على أنه 815 بكسل ليناسب تطبيق iframe.

تغيير العرض = "90٪" إلى العرض = "815 بكسل"

أوصي أيضًا بتقصير الارتفاع (بشكل ملحوظ) إلى 1000 أو حتى 1200 بكسل. ستجعل المحتوى الخاص بك أكثر احتواءًا قليلاً…

تغيير الارتفاع = "4000" إلى الارتفاع = "1200 بكسل"

السماح بالتمرير

يمكن أن يصبح aStore الخاص بك طويلاً جدًا (حتى أطول من 4000 بكسل الأصلية المحددة). يحدث هذا بشكل عام إذا كانت أوصاف المنتج طويلة وهناك العديد من مراجعات المنتج المنشورة أيضًا. بشكل افتراضي ، يتم تعطيل التمرير… وسيؤدي ذلك إلى قطع المحتوى عن الارتفاع المحدد. نظرًا لأننا لا نريد تقييد aStore الخاص بك ، فسنعمل على تمكين التمرير.

تغيير التمرير = "لا" إلى التمرير = "نعم"

يجب أن تبدو الكود النهائي الآن كما يلي:

لا تنس الضغط على زر "حفظ ونشر" في الزاوية اليمنى العليا. يمكنك أيضًا معاينة عملك في أي وقت باستخدام الزر "معاينة" المجاور…

صعب الإرضاء ، صعب الإرضاء…

حسنًا ، أنا أختار… لدينا كود iframe داخل تطبيق iframe. نعم ، إنها زائدة عن الحاجة. نعم ، يجب إصلاحه. ولكن لسهولة الاستخدام في دليل مستوى المبتدئين هذا ، سأتركه كما هو. لا تحكم علي.

زر مخصص

الآن وبعد اكتمال تكامل aStore الخاص بك ، سترغب في ذلك "مرحبًا" الصغير المزعج! على الصفحة الأولى لتبدو أكثر جدوى ، أليس كذلك؟

• ارجع إلى "الواجهة الأمامية" لصفحتك على Facebook.
• انقر فوق الزر الصغير (بمثلث مدبب لأسفل) الموجود على يمين جميع علامات تبويب الصفحات.
• أثناء توسيع الصفحة ، مرر مؤشر الماوس فوق "مرحبًا!" الجديد. التبويب.
• ستلاحظ ظهور رمز جديد (قلم رصاص) فوق علامة التبويب. انقر فوق هذا الرمز للحصول على قائمة منسدلة جديدة.

• من القائمة المنسدلة ، انقر على "تعديل الإعدادات".
• ستظهر نافذة منبثقة يمكنك من خلالها تغيير اسم علامة التبويب وإضافة صورة مخصصة لعرضها كزر.
• تخصيص علامة التبويب كما يحلو لك.

إنتهيت!