Sadržaj:
- Trgovina na Facebooku?
- Primjer
- Što će vam trebati
- Dodavanje aplikacije
- Uredite sadržaj kartice
- Nabavite svoj aStore kod
- Sigurni URL
- Prilagodite dimenzije zaslona
- Dopusti pomicanje
- Izbirljiv, izbirljiv ...
- Prilagođeni gumb
- I gotovi ste!
Trgovina na Facebooku?
Odlučili ste da je udruženi marketing za vas. Izgradili ste Amazon aStore. Potrošili ste svoje vrijeme, marljivo probirući proizvode da biste ih dodali…
Iskorištavajući snagu društvenih medija, imate čak i Facebook stranicu posvećenu vašim udruženim marketinškim naporima… Stvorili ste naslovnu fotografiju vremenske trake kako biste vizualno jasno izrazili stranicu… Na toj Facebook stranici objavljujete ažuriranja statusa s vezama na određene proizvode u vašoj trgovini…
Ali ne bi li bilo sjajno kad biste mogli pokazati cijelu aStore upravo na toj Facebook stranici? Pa… možeš!
Prilagođenim karticama prilično je jednostavno upravljati. Možete čak prilagoditi slike i tekst naslova koji se prikazuju na samoj kartici.
Primjer
Pogledajte, na primjer, Facebook stranicu Komunistički ormar. Primijetite karticu pod naslovom "Sovjetska trgovina?"
Sovjetska trgovina Amazon Amazon trgovina ugrađena je izravno u Facebook stranicu s malo HTML-a i "Facebook-legalnom" aplikacijom. Ne, ne hakiramo ništa… samo koristimo resurse.
Što će vam trebati
- Administratorski pristup Facebook stranici (ako ste je stvorili, već imate administratorski pristup)
- Besplatna aplikacija prilagođenih kartica (volim koristiti statički HTML: iframe kartice)
- Amazon aStore i pridružena poveznica
Učinite si uslugu… otvorite Facebook i Amazon Associate Central na odvojenim karticama preglednika (ili čak zasebnim preglednicima, ako želite). Na taj se način možete kretati naprijed-natrag između njih dvoje ako se ukaže potreba.
Dodavanje aplikacije
Dođite do aplikacije unutar Facebooka (s gornjom vezom) i kliknite gumb "instaliraj" da biste dodali aplikaciju na svoju stranicu. Na sljedećem zaslonu aplikacija će tražiti da potvrdite odredište instalacije (stranica na koju ćete instalirati aplikaciju) ako administrirate više od jedne Facebook stranice.
Odaberite odgovarajuću odredišnu stranicu i kliknite gumb "instaliraj" za potvrdu. Da, stvarno je tako jednostavno.
Uredite sadržaj kartice
Nakon dovršetka instalacije aplikacije, vratite se na svoju stranicu. Pronaći ćete novu karticu pod nazivom "Dobro došli!" na zaslonu. Kliknite ga i napravimo čaroliju!
Ne brinite još samo oko naslova kartice i slike, uskoro ćemo doći do njih.
Klikom na novu karticu dobrodošlice doći ćete do ovog zaslona za uređivanje. Ovdje ćete moći:
- Smjestite svoj "kôd" u odjeljak index.html
- Dalje organizirajte kod u odjeljcima style.css i script.js (za naprednije korisnike)
- Promijenite postavke kartice
- Stvorite Fan-Gate (to ćemo učiniti u drugom čvorištu)
Prema zadanim postavkama slijećete u odjeljak aplikacije index.html (ovdje ćemo obaviti sav posao). Izbrišite postojeći tekst u tom odjeljku.
Nabavite svoj aStore kod
U Amazonovom suradničkom centru:
- Pomoću padajućeg izbornika u gornjem lijevom dijelu zaslona odaberite odgovarajući ID praćenja vaše trgovine. (To je potrebno samo ako imate više aStores na istom računu… ako imate samo jednu aStore, ne brinite zbog ovog koraka.)
- Kliknite "Dohvati vezu" u lijevom izborniku.
- Na stranici će se prikazati novi zaslon pod nazivom "Vaša je trgovina objavljena!" Neposredno ispod najave vidjet ćete nekoliko verzija veze na aStore.
- Odaberite opciju "Ugradi moju trgovinu pomoću umetnutog okvira". Neznatno ćemo izmijeniti ovaj kôd kako bismo ga optimizirali za integraciju s Facebookom.
- Kopirajte sav kôd u okvir za tekst i zalijepite ga u aplikaciju (odjeljak index.html) na Facebooku.
Kôd s kojim ćemo raditi trebao bi biti otprilike:
Sigurni URL
Pri prvom lijepljenju koda veze u aplikaciju, vidjet ćete poruku s upozorenjem o tome da vaš aStore URL nije siguran. Ne, veza vas neće pitati čini li se zbog izvornog koda debelom. Ali, neki preglednici možda neće pravilno prikazati vašu aStore jer ne "misle" da je trgovina smještena na sigurnom poslužitelju. Ovo je ovdje posebno važno jer, na kraju krajeva, ne želimo učiniti vaše potencijalne kupce paranoičnima tijekom kupnje.
Dakle, prvo je prvo… Promijenite http: // unutar vašeg koda u http s: //
Prilagodite dimenzije zaslona
Sada ćemo promijeniti prikazane dimenzije vaše trgovine u Facebook stranici.
Primijetite da je širina postavljena na 90%? Pa, to je 90% onoga što preglednik izračunava kao trenutnu veličinu stranice. To će biti apsolutno netočno… Odredit ćemo širinu kao 815 piksela kako bi se uklopila u iframe aplikaciju.
Promijenite width = "90%" u width = "815px"
Također preporučujem skraćivanje visine (značajno) na 1000 ili čak 1200 piksela. To će vaš sadržaj učiniti malo sadržajnijim…
Promijeni visinu = "4000" u visinu = "1200px"
Dopusti pomicanje
Vaša aStore može postati prilično dugačka (čak i dulja od originalnih 4000 piksela). To se obično događa ako su opisi proizvoda dugi, a objavljeno je i nekoliko recenzija proizvoda. Prema zadanim postavkama pomicanje je onemogućeno… i to će odsjeći sadržaj iznad navedene visine. Budući da ne želimo ograničiti vašu trgovinu, omogućit ćemo pomicanje.
Promijenite pomicanje = "ne" u pomicanje = "da"
Vaš gotov kod sada bi trebao izgledati otprilike ovako:
Ne zaboravite pritisnuti gumb "Spremi i objavi" u gornjem desnom kutu. Svoj rad možete pregledati u bilo kojem trenutku pomoću susjednog gumba "Pregled"…
Izbirljiv, izbirljiv…
U redu, zajebavam se… Imamo iframe kôd unutar iframe aplikacije. Da, suvišan je. Da, to bi trebalo popraviti. Ali, radi lakšeg korištenja u ovom vodiču za početnike, ostavit ću ga takvog kakav jest. Ne osuđuj me.
Prilagođeni gumb
Sad kad je vaša integracija aStore dovršena, poželjet ćete onaj dosadni mali "Dobrodošli!" gumb na naslovnoj stranici kako bi izgledao malo smislenije, zar ne?
- Vratite se na "prednji kraj" vaše Facebook stranice.
- Kliknite mali gumb (sa zašiljenim trokutom prema dolje) s desne strane svih kartica svih stranica.
- Kako se stranica širi, zadržite pokazivač iznad novog "Dobrodošli!" tab.
- Primijetit ćete da se iznad kartice pojavljuje nova ikona (olovka). Kliknite ovu ikonu za novi padajući izbornik.
- Na padajućem izborniku kliknite "Uredi postavke".
- Pojavit će se skočni prozor u kojem možete promijeniti naziv kartice i dodati prilagođenu sliku koja će se prikazati kao gumb.
- Prilagodite karticu kako želite.