Spisu treści:
- Sklep na Facebooku?
- Przykład
- Co będziesz potrzebował
- Dodawanie aplikacji
- Edytuj zawartość zakładki
- Uzyskaj swój kod sklepu
- Bezpieczny adres URL
- Dostosuj wymiary wyświetlacza
- Zezwalaj na przewijanie
- Wybredny, wybredny ...
- Dostosowany przycisk
- I jesteś skończony!
Sklep na Facebooku?
Zdecydowałeś, że marketing afiliacyjny jest dla Ciebie. Zbudowałeś Amazon aStore. Spędziłeś czas, pilnie przesiewając produkty, aby je dodać…
Wykorzystując siłę mediów społecznościowych, masz nawet stronę na Facebooku poświęconą Twoim działaniom w zakresie marketingu afiliacyjnego… Utworzyłeś zdjęcie na okładkę osi czasu, aby wyraźnie przedstawić stronę wizualnie… Publikujesz aktualizacje statusu na tej stronie na Facebooku z linkami do konkretnych produktów w Twoim aStore…
Ale czy nie byłoby wspaniale, gdybyś mógł pochwalić się całym aStore bezpośrednio na tej stronie na Facebooku? Cóż… możesz!
Niestandardowe zakładki są dość łatwe w zarządzaniu. Możesz nawet dostosować obrazy i tekst tytułu, które są wyświetlane na samej karcie.
Przykład
Spójrz na przykład na stronę Communist Closet na Facebooku. Zwróć uwagę na zakładkę „Radziecki sklep?”
The Soviet Shop to sklep Amazon aStore osadzony bezpośrednio na stronie na Facebooku z niewielkim kodem HTML i aplikacją „legalną dla Facebooka”. Nie, niczego nie hakujemy… tylko wykorzystujemy zasoby.
Co będziesz potrzebował
- Dostęp administracyjny do strony na Facebooku (jeśli ją utworzyłeś, masz już dostęp administratora)
- Darmowa aplikacja z niestandardowymi kartami (lubię używać statycznego HTML: karty iframe)
- Amazon aStore i powiązany z nim link
Zrób sobie przysługę… miej Facebook i Amazon Associate Central otwarte w osobnych kartach przeglądarki (lub nawet w oddzielnych przeglądarkach, jeśli wolisz). W ten sposób możesz przechodzić między nimi, jeśli zajdzie taka potrzeba.
Dodawanie aplikacji
Przejdź do aplikacji na Facebooku (z linkiem powyżej) i kliknij przycisk „Zainstaluj”, aby dodać aplikację do swojej strony. Na następnym ekranie aplikacja poprosi Cię o potwierdzenie miejsca docelowego instalacji (strony, na której zainstalujesz aplikację), jeśli administrujesz więcej niż jedną stroną na Facebooku.
Wybierz właściwą stronę docelową i kliknij przycisk „Instaluj”, aby potwierdzić. Tak, to naprawdę jest takie proste.
Edytuj zawartość zakładki
Po zakończeniu instalacji aplikacji wróć do swojej strony. Znajdziesz nową kartę zatytułowaną „Witamy!” na ekranie. Kliknij i zróbmy trochę magii!
Nie martw się jeszcze o tytuł i obraz karty, wkrótce do nich dojdziemy.
Kliknięcie nowej karty Witamy przeniesie Cię do tego ekranu edycji. Tutaj będziesz mógł:
- Umieść swój „kod” w sekcji index.html
- Porządkuj kod dalej w sekcjach style.css i script.js (dla bardziej zaawansowanych użytkowników)
- Zmień ustawienia karty
- Utwórz bramkę dla fanów (zrobimy to w innym centrum)
Domyślnie wylądujesz w sekcji index.html aplikacji (tam będziemy wykonywać całą naszą pracę). Usuń istniejący tekst w tej sekcji.
Uzyskaj swój kod sklepu
W witrynie Associate Central firmy Amazon:
- Skorzystaj z rozwijanego menu w lewym górnym rogu ekranu, aby wybrać właściwy identyfikator śledzenia Twojego Sklepu. (Jest to konieczne tylko wtedy, gdy masz wiele Sklepów na tym samym koncie… jeśli masz tylko jeden Sklep, nie przejmuj się tym krokiem.)
- Kliknij „Uzyskaj link” w menu po lewej stronie.
- Strona wyświetli nowy ekran zatytułowany „Twój sklep został opublikowany!” Bezpośrednio pod ogłoszeniem zobaczysz kilka wersji linku do Sklepu.
- Wybierz opcję „Umieść mój sklep przy użyciu wbudowanej ramki”. Nieznacznie zmodyfikujemy ten kod, aby zoptymalizować go pod kątem integracji z Facebookiem.
- Skopiuj cały kod z pola tekstowego i wklej go do aplikacji (sekcja index.html) na Facebooku.
Kod, z którym będziemy pracować, powinien wyglądać następująco:
Bezpieczny adres URL
Podczas pierwszego wklejania kodu linku do aplikacji zobaczysz komunikat ostrzegający o niezabezpieczonym adresie URL aStore. Nie, odsyłacz nie zapyta Cię, czy jego kod źródłowy sprawia, że wygląda grubo. Jednak niektóre przeglądarki mogą nieprawidłowo wyświetlać Twój Sklep, ponieważ nie „myślą”, że sklep jest hostowany na bezpiecznym serwerze. Jest to szczególnie ważne, bo przecież nie chcemy, żeby Twoi potencjalni klienci byli paranoikami podczas zakupów.
Po pierwsze… Zmień http: // w swoim kodzie na http s: //
Dostosuj wymiary wyświetlacza
Teraz zmienimy wyświetlane wymiary Twojego Sklepu na stronie na Facebooku.
Zauważ, że szerokość jest ustawiona na 90%? Cóż, to 90% tego, co przeglądarka oblicza jako bieżący rozmiar strony. To będzie absolutnie niedokładne… Określimy szerokość na 815 pikseli, aby zmieścić się w aplikacji iframe.
Zmień szerokość = „90%” na szerokość = „815px”
Polecam też skrócenie wysokości (znacznie) do 1000 lub nawet 1200 pikseli. Dzięki temu Twoje treści będą bardziej ograniczone…
Zmień wysokość = „4000” na wysokość = „1200 pikseli”
Zezwalaj na przewijanie
Twój aStore może stać się dość długi (nawet dłuższy niż określone pierwotne 4000 pikseli). Zwykle dzieje się tak, jeśli opisy produktów są długie i opublikowano również kilka recenzji produktów. Domyślnie przewijanie jest wyłączone… a to spowoduje odcięcie treści powyżej określonej wysokości. Ponieważ nie chcemy ograniczać Twojego sklepu, umożliwimy przewijanie.
Zmień scrolling = „nie” na przewijanie = „tak”
Twój gotowy kod powinien teraz wyglądać mniej więcej tak:
Nie zapomnij nacisnąć przycisku „Zapisz i opublikuj” w prawym górnym rogu. W każdej chwili możesz też wyświetlić podgląd swojej pracy za pomocą sąsiedniego przycisku „Podgląd”…
Wybredny, wybredny…
OK, czepiam się… Mamy kod iframe w aplikacji iframe. Tak, to jest zbędne. Tak, należy to naprawić. Ale dla ułatwienia korzystania z tego przewodnika dla początkujących zostawię go tak, jak jest. Nie oceniaj mnie.
Dostosowany przycisk
Teraz, gdy integracja z aStore została zakończona, będziesz potrzebować tego nieznośnego „Witamy!” na pierwszej stronie, aby wyglądać bardziej sensownie, prawda?
- Wróć do „interfejsu” swojej strony na Facebooku.
- Kliknij mały przycisk (z trójkątem skierowanym w dół) znajdujący się bezpośrednio po prawej stronie wszystkich kart strony.
- W miarę jak strona się rozwija, najedź kursorem myszy na nowe „Witamy!” patka.
- Zauważysz, że nad kartą pojawi się nowa ikona (ołówek). Kliknij tę ikonę, aby wyświetlić nowe menu rozwijane.
- W menu rozwijanym kliknij „Edytuj ustawienia”.
- Pojawi się wyskakujące okienko, w którym możesz zmienić nazwę karty i dodać niestandardowy obraz, który będzie wyświetlany jako przycisk.
- Dostosuj kartę, jak chcesz.