MyCashflow blogi

Miska kirjoitti 9.5.2011 kategoriaan Interface-merkkaus Yleinen avainsanoilla Facebook Ladattavat teemat: 3

MyCashflow verkkokauppa Facebookiin

Meiltä on useamman kerran kyselty Facebookiin omalle sivulle lisättävän kaupan perään ja tähän päivään asti ainoa tapa MyCashflow’n lisäämiseksi omalle sivulle olisi ollut palkata suunnittelija suunnittelemaan omalle kaupalle teema, joka toimii Facebook-sivun välilehdellä. Olemme kuitenkin helpottaneet tätä prosessia suunnittelemalla valmiiksi Facebook-ystävällisen teeman, joka on mahdollista lisätä omalle sivulle tekemällä Facebookiin oma sovellus, jonka voi lisätä sivulleen.

Prosessi ei ole aivan mutkaton, mutta lopputulos on vaivan arvoinen ja lopputulosta pääset katsomaan MyCashflow’n Facebook-sivulta. Mikäli ohjeet tuntuvat vaikeilta ymmärtää, niin kannattaa kääntyä asiakaspalvelumme puoleen tai ottaa yhteys omaan ulkoasun suunnittelijaan.

Teeman lataaminen ja asentaminen kauppaan

Koko prosessi lähtee siitä, että kauppaan on lisättävä teema Facebookia varten. Olemme luoneet tällaisen teeman valmiiksi ja se on ladattavissa sivuiltamme. Teeman asennusohjeet löytyvät täältä.

Päivitys 8.9.2011: Ladattavaa teemaa on päivitetty kassojen, Facebookin APIn osalta, sekä teeman toimintavarmuutta eri tilanteissa paranneltu.

Kaupan version luominen

Facebookissa toimiva kauppa tarvitsee oman osoitteensa ja oman teemansa, eli sille täytyy tehdä oma versio. Version voit luoda Ulkoasu -> Versiot sivulta ja prosessin tarkemmat ohjeet löydät täältä. Tälle versiolle teemaksi asetetaan edellä ladattu teema ja osoite voi olla esimerkiksi fb.verkkokauppasi.mycashflow.fi tai voit tilata tälle versiolle oman verkkotunnuksen tai aliverkkotunnuksen ohjauksen.

Facebook-sovelluksen luominen

Tämän jälkeen luodaan kaupalle sovellus Facebookiin. Tämä onnistuu helposti Facebookin kehittäjäsivustolta. Sovelluksen tekemisen edellytyksenä on, että käyttäjätunnuksesi on varmistettu, mutta tämä onnistuu näppärästi yhdellä tekstiviestillä.

Sovelluksen tärkeimmät asetukset

Alla on listattuna sovelluksen toiminnan kannalta tärkeimmät sovelluksen asetukset. Lisäksi tietysti sovelluksella on muita asetuksia, kuten nimi, kuvaus ja logot, joita emme tässä käy erikseen läpi.

Yksityisyystiedot ja käyttöehdot
Sovelluksella olisi hyvä olla yksityisyystiedot, sekä käyttöehdot. Nämä eivät siis ole vastaavat kuin kaupan toimitusehdot, mutta yksityisyystietoina on periaatteessa mahdollista käyttää kaupan rekisteriselostetta.

Sivuston url ja verkkotunnus
Tähän tulevat kauppasi osoite ja verkkotunnus, eivät siis Facebook-version osoitteet. Meidän demokaupassamme esimerkiksi asetukset olisivat http://demo.mycashflow.fi/ ja demo.mycashflow.fi

Facebook-integrointi
Tämä on tärkein osuus kaupan integroinnissa. Alla listattuna mitä asetuksia mihinkin kenttiin tulee, muut voit jättää tyhjäksi:

• Canvas -> IFrame-koko: Auto-Resize, teema pitää sisällään valmiiksi skriptit, jotka muuttavat Facebook-sivun koon kaupan sivua vastaavaksi
• Page Tabs -> Välilehtinimi: Tähän tulee esimerkiksi teksti “Verkkokauppa”. Näkyy sivuillasi välilehden nimenä.
• Page Tabs -> Välilehden URL: Aiemmin luomasi uuden version osoite
• Page Tabs -> Secure Tab URL: Pakollinen 1.10.2011 alkaen. Mikäli käytät .mycashflow.fi päätteistä osoitetta, voit käyttää tässä https://verkkokauppasi.mycashflow.fi osoitetta, jolloin liikenne kaupasta on salattua. Jos käytössäsi on oma verkko-osoite, SSL-sertifikaatti pitää tilata erikseen esimerkiksi asiakaspalvelumme kautta.
  

Tarvittavat muokkaukset teemaan

Teema ei ole suoraan käyttövalmis, vaan siihen täytyy tehdä vielä pieniä muutoksia, jotta esimerkiksi kommentit ja tykkäykset menevät oikeaan paikkaan ja jotta kaupan ylläpitäjä pystyy hallitsemaan kaupan kommentteja ja seuraamaan tilastoja. Alla listattuna tiedostot, joihin muutoksia pitää tehdä ja mitkä ovat tarvittavat muutokset. Kaikki paikat joihin muutoksia täytyy tehdä on teemassa merkitty selkeästi isoilla kirjaimilla.

• helpers/footer.html -> Lisää edellä luomasi sovelluksen tunniste (ID), jonka löydät kehittäjäsivustolta sovelluksesi hallintasivulta.
• helpers/opengraph.html
  • fb:admins -> Tänne tulee pilkulla erotettuna niiden käyttäjien ID:t jotka ovat oikeutettuja hallitsemaan sivuja. Käyttäjä-ID:n näet esimerkiksi käyttäjän nimessä olevasta linkistä.
  • fb:app_id -> Edellä luomasi sovelluksen tunniste (ID).
  • og:url -> Kaupan osoite.
• helpers/og-product.html-> og:image -> Kaupan osoite.
• product.html -> Kaksi kohtaa, joihin tulee kaupan osoite.

Kaupan lisääminen Facebook-sivulle

Tässä vaiheessa, kun kaikki alkaa olla valmista, kannattaa vierailla kaupan versiolle antamassasi osoitteessa ja testata, että kaikki teemassa toimii oikein ja käydä tilausprosessi kertaalleen läpi. Mikäli kaikki näyttää hyvältä, olet valmis julkaisemaan kauppasi Facebook-sivullasi.

Kaupan saat lisättyä sivuillesi menemällä sovelluksesi profiilisivulle, jonka linkin löydät tekemäsi sovelluksen kehittäjäsivulta. Tältä sivulta löydät vasemmasta palstasta linkin “Lisää sivulleni”, joka kysyy mille sivulle haluat sovelluksen lisätä ja olet valmis.

Mikäli haluat seurata sovelluksesi Facebook-tykkäämisiä ja kommentointeja, voit ottaa käyttöön Facebook Insights seurantaohjelman valitsemalla seurattavaksi lähteeksi luomasi sovelluksen.

Jos artikkeli herätti enemmän kysymyksiä kuin tarjosi vastauksia, jätä rohkeasti kommenttia tähän artikkeliin tai lähesty asialla reipasta asiakaspalveluamme.

Miska kirjoitti 10.3.2011 kategoriaan Markkinointi avainsanoilla Facebook Interface-merkkaus Sosiaalinen media: 0

Facebookin integroiminen osaksi verkkokauppaa

Tämä lähinnä verkkokaupan ulkoasun suunnittelijoille tarkoitettu postaus käsittelee Facebookin integroimista tiiviimmin osaksi verkkokauppaa.

Jos olet kauppias ja haluat nämä toiminnot kauppaasi, ota yhteys ulkoasun suunnittelijaasi ja pyydä häntä lisäämään OpenGraph tiedot kauppaasi. Mikäli käytät MyCashflow’n oletusulkoasua, tulemme lisäämään osan näistä ominaisuuksista oletusulkoasun seuraavaan päivitykseen.

OpenGraphin hyödyt

OpenGraph protokolla mahdollistaa verkkokaupan sivujen integroimisen tiiviiksi osaksi Facebookia. Kun sisällytät OpenGraph tiedot verkkokauppaan, sivun tykkääminen tekee kyseisestä verkkokaupan sivusta Facebook-sivun ja luo yhteyden käyttäjän ja kaupan sivun välille. Tuote näkyy nyt kävijän kiinnostuksen kohteissa ja kauppiaan on mahdollista julkaista päivityksiä näiden käyttäjien profiileissa tuotteen nimissä. Tämän lisäksi tykätyt tuotteet löytyvät nyt Facebookin haulla ja esimerkiksi mainonnan kohdistaminen tuotteesta tykkääville on mahdollista.

Miten lisään OpenGraph tiedot verkkokauppaan?

OpenGraph lisätään html-tiedoston head-tagin sisälle seuraavasti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
  <meta property="og:title" content="{Title}"/>
  <meta property="og:url" content="{CurrentUrl(before:'http://www.KAUPANOSOITE.fi')}"/>
  <meta property="og:site_name" content="{ShopName}"/>
  <meta property="og:type" content="product"/>
  <meta property="og:image" content="{ProductImageUrl(before:'http://www.KAUPANOSOITE.fi')}"/>
  <meta property="fb:admins" content="KAUPPIAAN FACEBOOK-KÄYTTÄJÄID"/>
  <!-- Valinnaiset sivun ja sovelluksen ID:t
    <meta property="fb:page_id" content="KAUPAN FB-SIVUN ID"/>
    <meta property="fb:app_id" content="KAUPAN FB-SOVELLUKSEN ID"/>
  -->
  <meta property="og:description" content="{MetaDescription}"/>
  ...
</head>

Huomaa myös html-tagille lisätyt xmlns-attribuutit, jotka laajentavat merkkauksen käsittämään myös OpenGraphin tarvitsemat tagit. Kaupan Facebook-sivun ID tai sovelluksen ID ei ole pakollinen, mutta kauppiaan Facebook käyttäjä-ID täytyy löytyä, jotta kauppias voi julkaista päivityksiä tuotteille ja muokata tuotteiden Facebook-sivuja.

Tässä vielä ladattavana pakettina Facebook OpenGraph esimerkki, joka on tehty oletusulkoasun header.html tiedoston päälle. Esimerkissä OpenGraph tiedot tulostetaan verkkokaupan tuotteille, tuoteryhmille, tuotemerkeille, uutisille ja infosivuille hieman eri tavoin, jotta kaikille saadaan asetettua asianmukainen kuva ja tyyppi.

Tykkääminen OpenGraphin avulla

Nyt kun tiedot on saatu lisättyä kauppaan, itse tykkäämisen lisääminen on todella simppeliä:

<script src="http://connect.facebook.net/fi_FI/all.js#xfbml=1"></script>
<fb:like href="{CurrentUrl(before:'http://www.KAUPANOSOITE.fi')}" show_faces="true" width="450" action="recommend"></fb:like>

Voit tehdä haluamasi napin myös Facebookin kehittäjätyökalulla, kunhan vaihdat vain href-attribuutiksi Interface-tagin {CurrentUrl(before:’http://www.KAUPANOSOITE.fi’)} ja vaihdat tarvittaessa kielen suomeksi, hakemalla skriptit “fi_FI” kielikoodilla.

Suosittelen käyttämään aina XFBML-versiota koodista, jotta tykkäyksen kommentointi on kaikissa tilanteissa mahdollista.

Seuraa verkkokaupan tykkäämisiä ja muita Facebook-tapahtumia

Facebook on vasta julkaissut uuden version analytiikkatyökalustaan, jolla verkkokaupan Facebook-tapahtumia voidaan seurata. Kunhan verkkokaupasta löytyy joko kauppiaan Facebook-ID, kaupan Facebook-sivun ID tai kaupan sovelluksen ID, voit yhdistää verkkokaupan tapahtumat Facebook Insights sovellukseen ja seurata kaupan tykkäämisiä ja muita tapahtumia reaaliaikaisesti.

Tykkääminen on vasta alkua

Nyt kun kauppaan on lisätty OpenGraph tiedot, erilaisten Facebook-vimpaimien käyttö helpottuu kummasti. Voit esimerkiksi tehdä kaupan tuotteiden kommentoinnin Facebookin avulla, kunhan perustat kaupalle oman sovelluksen tai voit lisätä kauppaan Facebookin oman suosittelulaatikon, joka suosittelee kävijöille tuotteita, joista kävijän kaverit ja muut FB-käyttäjät ovat tykänneet.

Seuraavassa sosiaalisia vimpaimia käsittelevässä postauksessa käymmekin läpi pari vaihtoehtoa kaupan kommentoinnin toteuttamiseksi.