Kuinka upottaa Amazon astore facebook-sivulle ilmaiseksi

AStore Facebookissa?

Olet päättänyt, että tytäryhtiömarkkinointi on sinulle. Olet rakentanut Amazon aStore -kaupan. Olet viettänyt aikaa, seulonut ahkerasti tuotteita lisäämällä siihen…

Hyödyntämällä sosiaalisen median voimaa sinulla on jopa Facebook-sivu, joka on omistettu tytäryhtiömarkkinoinnillesi… Loit aikajanan kansikuvan ilmaistaaksesi sivun visuaalisesti… Lähetät tilapäivityksiä tälle Facebook-sivulle ja linkkejä tiettyihin tuotteisiin aStore-kaupassasi…

Mutta eikö olisi mahtavaa, jos voisit esitellä koko aStore-myymälän juuri siinä Facebook-sivulla? No… voit!

Mukautettuja välilehtiä on melko helppo hallita. Voit jopa muokata itse välilehdessä näkyviä kuvia ja otsikkotekstiä.

Esimerkki

Katso esimerkiksi Kommunistisen kaapin Facebook-sivu. Huomaa välilehti "Neuvostoliiton kauppa?"

Neuvostoliiton kauppa on Amazon aStore, joka on upotettu suoraan Facebook-sivulle ja jossa on pieni HTML-koodi ja "Facebook-legal" -sovellus. Ei, emme hakkeroi mitään… vain hyödyntämällä resursseja.

Mitä tarvitset

Järjestelmänvalvojan pääsy Facebook-sivulle (jos olet luonut sen, sinulla on jo järjestelmänvalvojan käyttöoikeudet)
Ilmainen mukautetun välilehden sovellus (haluan käyttää staattista HTML: iframe-välilehtiä)
Amazon aStore ja siihen liittyvä linkki

Tee itsellesi palvelus… anna Facebookin ja Amazon Associate Centralin avata erillisissä selainvälilehdissä (tai jopa erillisissä selaimissa, jos haluat). Näin voit siirtyä edestakaisin näiden kahden välillä, jos tarvetta ilmenee.

Sovelluksen lisääminen

Siirry sovellukseen Facebookissa (yllä olevan linkin avulla) ja napsauta "Asenna" -painiketta lisätäksesi sovelluksen sivullesi. Seuraavassa näytössä sovellus pyytää sinua vahvistamaan asennuskohteen (sivun, jonne asennat sovelluksen), jos ylläpidät useampaa kuin yhtä Facebook-sivua.

Valitse oikea kohdesivu ja vahvista napsauttamalla "Asenna" -painiketta. Kyllä, se on todella niin yksinkertaista.

Muokkaa välilehden sisältöä

Kun sovelluksen asennus on valmis, palaa sivullesi. Löydät uuden välilehden nimeltä "Tervetuloa!" ruudulla. Napsauta sitä ja työskentelemme taikaa!

Älä välitä välilehden otsikosta ja kuvasta vielä, pääsemme niihin pian.

Kun napsautat uutta Tervetuloa-välilehteä, pääset tähän muokkausnäyttöön. Täällä voit:

Isännöi "koodiasi" index.html -osiossa
Järjestä koodi edelleen style.css- ja script.js-osioissa (edistyneemmille käyttäjille)
Muuta välilehden asetuksia
Luo Fan-Gate (teemme sen toisessa keskittimessä)

Oletusarvoisesti laskeudut sovelluksen index.html-osioon (täällä teemme kaiken työn). Poista olemassa oleva teksti kyseisestä osiosta.

Hanki aStore-koodi

Amazonin Associate Centralissa:

Valitse ruudun vasemmassa yläkulmassa olevasta avattavasta valikosta oikea aStore-seurantatunnuksesi. (Tämä on tarpeen vain, jos sinulla on useita aStores-palveluja samalla tilillä… jos sinulla on vain yksi aStore, älä huoli tästä vaiheesta.)
Napsauta "Hae linkki" vasemmassa valikossa.
Sivulla näkyy uusi näyttö nimeltä "Kauppa on julkaistu!" Suoraan ilmoituksen alapuolella näet useita versioita aStore-linkistäsi.
Valitse "Upota myymälä käyttämällä sisäistä kehystä" -vaihtoehto. Muutamme tätä koodia hieman optimoidaksemme sen Facebook-integraatiota varten.
Kopioi kaikki tekstikentän koodi ja liitä se sovellukseen (index.html-osioon) Facebookissa.

Koodin, jonka kanssa työskentelemme, tulisi olla jotain:

Suojattu URL-osoite

Kun liität linkkikoodin ensin sovellukseen, näet viestin, joka varoittaa aStore-URL-osoitteesi epävarmuudesta. Ei, linkki ei kysy, saako sen lähdekoodi näyttää paksulta. Jotkin selaimet eivät välttämättä näytä aStore-kauppasi kunnolla, koska ne eivät "ajattele", että myymälä isännöi suojatulla palvelimella. Tämä on erityisen tärkeää tässä, koska emme loppujen lopuksi halua tehdä potentiaalisista asiakkaistasi paranoidia ostoksilla.

Joten ensimmäinen asia on ensimmäinen… Vaihda koodissasi oleva http: // asetukseksi http s: //

Säädä näytön mitat

Nyt muutamme aStoreesi näkyviä mittoja Facebook-sivulla.

Huomaa, että leveydeksi on asetettu 90%? No, se on 90% siitä, mitä selain laskee nykyiseksi sivun kooksi. Tämä on ehdottomasti epätarkkaa… Määritämme leveydeksi 815 pikseliä sopimaan iframe-sovellukseen.

Muuta leveys = "90%" leveydeksi = "815px"

Suosittelen myös lyhentämään korkeutta (merkittävästi) 1000 tai jopa 1200 pikseliin. Se tekee sisällöstäsi hieman sisältävämmän…

Muuta korkeus = "4000" korkeudeksi = "1200px"

Salli vieritys

AStore-kauppa voi olla melko pitkä (jopa pidempi kuin alkuperäiset määritetyt 4000 pikseliä). Näin tapahtuu yleensä, jos tuotekuvaukset ovat pitkiä ja myös useita tuotearvioita on lähetetty. Oletuksena vieritys on poistettu käytöstä… ja se katkaisee sisällön määritetyn korkeuden yli. Koska emme halua rajoittaa aStore-kauppaa, otamme vierityksen käyttöön.

Muuta vieritys = "ei" vierittämiseksi = "kyllä"

Valmis koodisi pitäisi nyt näyttää tältä:

Älä unohda painaa "Tallenna ja julkaise" -painiketta oikeassa yläkulmassa. Voit myös esikatsella työtäsi milloin tahansa viereisellä "Esikatselu" -painikkeella…

Nirso, nirso…

OK, nipun… Meillä on iframe-koodi iframe-sovelluksessa. Kyllä, se on tarpeeton. Kyllä, se pitäisi korjata. Mutta tämän aloittelijan tason oppaan käytön helpottamiseksi aion jättää sen sellaisenaan. Älä tuomitse minua.

Mukautettu painike

Nyt kun aStore-integraatiosi on valmis, haluat sen ärsyttävän pienen "Tervetuloa!" -painiketta etusivulla näyttämään hieman merkityksellisemmältä, eikö?

Palaa Facebook-sivusi "käyttöliittymään".
Napsauta pientä painiketta (jossa on alaspäin terävä kolmio) kaikkien sivun välilehtien oikealla puolella.
Kun sivu laajenee, vie hiiri uuden "Tervetuloa" -kohdan päälle. välilehti.
Huomaat, että välilehden yläpuolelle ilmestyy uusi kuvake (lyijykynä). Napsauta tätä kuvaketta saadaksesi uuden avattavan valikon.

Valitse avattavasta valikosta Muokkaa asetuksia.
Näkyviin tulee ponnahdusikkuna, jossa voit vaihtaa välilehden nimen ja lisätä mukautetun kuvan painikkeeksi.
Muokkaa välilehteä haluamallasi tavalla.