Як безкоштовно вбудувати магазин Amazon на сторінку facebook

Магазин у Facebook?

Ви вирішили, що афілійований маркетинг для вас. Ви створили магазин Amazon aStore. Ви витратили свій час, старанно перебираючи продукти, щоб додати до них…

Використовуючи потужність соціальних мереж, у вас є навіть сторінка у Facebook, присвячена вашим маркетинговим зусиллям… Ви створили обкладинку часової шкали, щоб чітко виразити сторінку візуально… Ви публікуєте оновлення статусу на цій сторінці у Facebook із посиланнями на конкретні продукти у вашому магазині…

Але чи не було б чудово, якби ви могли показати весь aStore прямо на цій сторінці у Facebook? Ну… можна!

Користувацькими вкладками досить просто керувати. Ви навіть можете налаштувати зображення та текст заголовка, які відображаються на самій вкладці.

Приклад

Наприклад, загляньте на сторінку Комуністичної шафи у Facebook. Зверніть увагу на вкладку "Радянський магазин?"

Радянський магазин - це магазин Amazon Amazon, вбудований безпосередньо у сторінку Facebook з невеликим HTML-кодом та додатком "Legal-Legal". Ні, ми нічого не зламуємо… просто використовуємо ресурси.

Що вам знадобиться

Доступ адміністратора до сторінки Facebook (якщо ви створили її, ви вже маєте доступ адміністратора)
Безкоштовна спеціальна програма для вкладки (мені подобається використовувати статичний HTML: вкладки iframe)
Amazon aStore та пов'язане з ним посилання

Зробіть собі послугу… відкрийте Facebook та Amazon Associate Central на окремих вкладках браузера (або навіть окремих браузерів, якщо хочете). Таким чином, ви можете переходити між ними, якщо виникне необхідність.

Додавання програми

Перейдіть до програми у Facebook (із посиланням вище) і натисніть кнопку "встановити", щоб додати програму на свою сторінку. На наступному екрані програма попросить вас підтвердити пункт встановлення (сторінку, на якій ви встановите програму), якщо ви адмініструєте більше однієї сторінки Facebook.

Виберіть відповідну сторінку призначення та натисніть кнопку "встановити" для підтвердження. Так, насправді все так просто.

Редагуйте вміст вкладки

Після завершення встановлення програми поверніться на свою сторінку. Ви знайдете нову вкладку "Ласкаво просимо!" на екрані. Клацніть на неї, і давайте творити магію!

Не хвилюйтеся про назву та зображення вкладки, поки що, ми швидко до них дійдемо.

Натиснувши нову вкладку "Привітання", ви перейдете на цей екран редагування. Тут ви зможете:

Розмістіть свій "код" у розділі index.html
Організуйте код далі в розділах style.css та script.js (для більш досвідчених користувачів)
Змінити налаштування вкладки
Створіть Fan-Gate (ми зробимо це в іншому центрі)

За замовчуванням ви потрапите на розділ index.html програми (саме тут ми виконаємо всю свою роботу). Видаліть наявний текст у цьому розділі.

Отримайте свій код aStore

В асоційованому центрі Amazon:

За допомогою випадаючого меню у верхньому лівому куті екрана виберіть правильний ідентифікатор відстеження вашого магазину. (Це потрібно лише у тому випадку, якщо у вас є кілька магазинів в одному обліковому записі… якщо у вас є лише один магазин, не хвилюйтеся про цей крок.)
Натисніть "Отримати посилання" в меню ліворуч.
На сторінці з’явиться новий екран під назвою "Ваш магазин опублікований!" Безпосередньо під оголошенням ви побачите кілька версій вашого посилання на aStore.
Виберіть опцію «Вбудувати мій магазин за допомогою вбудованого кадру». Ми трохи змінимо цей код, щоб оптимізувати його для інтеграції з Facebook.
Скопіюйте весь код у текстове поле та вставте його в додаток (розділ index.html) у Facebook.

Код, з яким ми працюватимемо, повинен бути приблизно таким:

Захищена URL-адреса

Під час першого вставлення коду посилання в програму ви побачите повідомлення із попередженням про те, що URL-адреса вашого aStore є небезпечною. Ні, посилання не запитає вас, якщо його вихідний код робить його жирним. Але деякі браузери можуть не відображати ваш aStore належним чином, оскільки вони не "думають", що магазин розміщений на захищеному сервері. Це особливо важливо тут, адже, зрештою, ми не хочемо робити ваших потенційних клієнтів параноїчними під час покупок.

Отже, спочатку перше… Змініть http: // у коді на http s: //

Відрегулюйте розміри дисплея

Тепер ми змінимо відображені розміри вашого магазину на сторінці Facebook.

Зверніть увагу, що ширина встановлена на 90%? Ну, це 90% від того, що браузер обчислює як поточний розмір сторінки. Це буде абсолютно неточно… Ми вкажемо ширину як 815 пікселів, щоб вміститися в програму iframe.

Змінити width = "90%" на width = "815px"

Я також рекомендую скоротити висоту (значно) до 1000 або навіть 1200 пікселів. Це зробить ваш вміст трохи більш стриманим…

Змінити висоту = "4000" на висоту = "1200 пікселів"

Дозволити прокрутку

Ваш aStore може стати досить довгим (навіть довшим, ніж початкові 4000 пікселів). Зазвичай це трапляється, якщо описи товарів довгі, а також опубліковано кілька відгуків про товари. За замовчуванням прокрутка вимкнена… і це призведе до відсікання вмісту понад вказану висоту. Оскільки ми не хочемо обмежувати ваш магазин, ми ввімкнемо прокрутку.

Змінити прокрутку = "ні" на прокрутку = "так"

Ваш готовий код тепер повинен виглядати приблизно так:

Не забудьте натиснути кнопку "Зберегти та опублікувати" у верхньому правому куті. Ви також можете в будь-який час переглянути свою роботу за допомогою сусідньої кнопки "Попередній перегляд"…

Вибагливий, вибагливий…

Добре, я нікчемний… У нас є iframe-код у додатку iframe. Так, це зайве. Так, це слід виправити. Але для зручності використання в цьому посібнику для початківців я збираюся залишити його як є. Не засуджуй мене.

Індивідуальна кнопка

Тепер, коли ваша інтеграція з aStore завершена, вам захочеться це надоїдливе маленьке "Ласкаво просимо!" на першій сторінці, щоб виглядати трохи змістовніше, правда?

Поверніться до "переднього краю" вашої сторінки у Facebook.
Клацніть на маленьку кнопку (із загостреним трикутником вниз) безпосередньо праворуч на всіх вкладках сторінки.
У міру розширення сторінки наведіть курсор миші на нове повідомлення "Ласкаво просимо!" вкладку.
Ви помітите, що над вкладкою з’являється новий значок (олівець). Клацніть на цю піктограму для нового випадаючого меню.

У спадному меню натисніть "Редагувати налаштування".
З'явиться спливаюче вікно, в якому ви можете змінити назву вкладки та додати власне зображення, яке відображатиметься як кнопка.
Налаштуйте вкладку як завгодно.