MyCashflow blogi

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.

Kommentoi

Emme julkaise sähköpostiasi.