Huomautus 1.8.2012 – Artikkelissa kuvatulla tavalla tehty kilpailu nähtävissä Keinutuolien kokoontumisajojen Facebook-sivulla. Artikkelin lopussa mainittu Liskogallerian kilpailu ei ole enää voimassa.

Facebookista tutut Tykkää ja jaa  -kilpailut ovat kiellettyjä Facebookin sääntöjen mukaan ja säännöissä kerrotaan kuinka kaikki kilpailut tulisi järjestää Facebook-sovelluksien kautta. Facebook-sovellus taasen kuulostaa terminä ja konseptina joltain isolta, hankalalta, kalliilta ja muutenkin vastenmieliseltä tietojen kalastajalta. Käytännössä kilpailussa hyödynnettävä Facebook-sovellus voi olla yksinkertainen www-sivu, jossa lomakkeen avulla kysytään nimi ja sähköpostiosoite. Hitusen täytyy siis nähdä vaivaa sen suhteen, että tekee lomakkeen, pistää sen verkkoon ja miekkailee pienen tovin Facebookin Developer-osion kanssa.

Google ja tarkemmin Google Docs tarjoaa erinomaisen ilmaisen työkalun web-lomakkeiden luomiseen. Sen sijaan, että jokaisesta osallistujasta tulisi sähköpostia kilpailun järjestäjälle, siirtyy lomakkeiden kautta syötetyt tiedot suoraan excelmäiseeen taulukkoon. Docs-lomakkeita voi Googlen omien toimintojen avulla upottaa omille verkkosivuilleenkin iframe-elementtejä käyttäen, mutta tämä vaihtoehto ei toimi Facebookin kanssa kunnolla ja toisaalta se ei tarjoa mahdollisuutta lomakkeen ulkoasulliseen hienosäätöön.

Pureutumalla hieman enemmän Google Docsin tuottaman lomakkeen syvyyksiin on helppo irrottaa lomake omalle www-sivulleen, jonka pystyy myös näyttämään Facebookissa ja tätä kautta käyttämään Facebook-kilpailun tai yhteydenottolomakkeen taustamekanismina. Siispä pureudutaan asiaan hieman syvemmin!

Esitieto-, esitaito- ja esivaatimukset

• Google/Gmail-tunnus Docs-lomakkeen luomiseksi
• HTML/CSS -ymmärrystä ja muokkaustaitoa
• Levytilaa verkosta sivun sijoittamista varten (Facebook edellyttää suojatun https-yhteyden käyttämistä)

Mikäli edellä mainittuja vaatimuksia ei pystytä täyttämään, tarvitaan vain tarpeeksi paksu lompakko, jota hyödynnetään Clienteltä lomakkeen tekemistä tilatessa (yhteydenotot täältä).

Huomioitakoon myös, että alla olevalla tavalla toteutettava lomake mahdollistaa oman Kiitos-sivun näyttämisen, mutta poistaa pakotettujen kenttien tarkistuksen lomaketta lähetettäessä.

Google Docs -työkalun ja lomakkeiden luomiseen ei tässä kirjoituksessa pureuduta, mutta siihen löytyy ohjeet esim. Googlelta itseltään.

Esimerkkinä tulemme käyttämään oikeasti käytössä olevaa lomaketta, jota hyödynnetään Facebook-arvonnassa. Lämmin kiitos Liskogallerian Thereselle, joka suostui lähtemään tämän lähestymistavan kokeilemiseen ja antoi vielä luvan käyttää heitä esimerkkinä tässä kirjoituksessa.

Liskogallerialla on Facebook-sivuillaan arvonta, jossa voi voittaa 500 euron tatuointilahjakortin ja tätä arvontaa varten kerätään osallistujilta perustietoa tyyliin nimi, paikkakunta, ikä ja yhteystiedot. Oikealla näkyvä lomake on Google Docsin tuottamaa jälkeä, joka ei täysin istunut Liskogallerian ilmeeseen.

Jotta lomakkeen ulkoasua ja asettelua pääsee muokkaamaan, erotettiin lomake Googlen sivulta ja se upotettiin uudelle html-sivulle seuraavasti:

1. Luo arvonnassa käytettävä www-sivu esimerkiksi html-editorilla ja lisää siihen tarvittavat ulkoasuelementit, jotta sivu näyttää brändiisi sopivalta.
2. Luo tietojen lähettämisen jälkeen näytettävä Kiitos osallistumisesta www-sivu.
3. Luo Google Docs -lomake
4. Avaa tallennettu lomake selaimessa
5. Avaa selaimesta lomakesivun html-lähdekoodi (esim. Chromessa hiiren kakkospainike ja View Page Source)
6. Etsi html-lähdekoodista lomakkeen alku- ja lopetustagit <form> ja </form>, ja kopioi näiden tagien välissä oleva teksti mukaan lukien tagit <form> ja </form> leikepöydälle.
7. Liitä kopioitu teksti kohdassa 1. luomaasi www-sivuun siihen kohtaan lähdekoodia, jossa haluat arvontalomakkeen näkyvän.
8. Tallenna www-sivusi.

Käytännössä näillä toimenpiteillä meillä on jo toimiva lomake, jonka voisi ottaa Facebookissa käyttöön, mutta lomake ei ulkoasullisesti hivele silmää. Www-sivulla liitetyssä lomakkeessa on Google Docsin tyylimäärittelyt.

Mikäli olet tyytyväinen Google Docsin määrittelyihin lomakkeen kirjasimista yms. lisää www-sivusi <head> -osioon linkki Google Docsien tyylisivuun

<link href='https://docs.google.com/static/spreadsheets/client/css/779923916-published_form_compiled.css' type='text/css' rel='stylesheet'>

Mikäli et ole tyytyväinen Google Docsin määrittelyihin, voit  ladata tyylisivun omalle koneellesi muokattavaksi esimerkiksi pistämällä selaimeen osoitteeksi https://docs.google.com/static/spreadsheets/client/css/779923916-published_form_compiled.css, joka lataa css-tiedoston. Muokkaa css-tiedostoa tarpeidesi mukaisesti, tallenna tämä tiedosto samaan kansioon, jossa www-sivusi sijaitsee ja lisää <head> -osioon linkki tyylisivuusi

<link href='779923916-published_form_compiled.css' type='text/css' rel='stylesheet'>

Vaihtoehtoisesti voit myös toki siivota html-koodista pois kaikki tyylimäärittelyt ja tehdä muotoilut jo olemassa olevia tyylikirjastoja käyttäen, mikäli sivuun on ennestään liitetty tyylisivu.

Docs-lomake on normaali html-lomake, eli voit muokata lomakkeen rakennetta kuten mitä tahansa lomaketta www-sivuilla. Mikäli Google Docsin alkuperäinen tapa lisätä kentät allekkain vie liikaa tilaa, voit luonnollisesti sijoittaa kenttiä vierekkäin joko taulukkorakenteita tai div-rakenteita hyödyntäen.

Kiitos osallistumisesta -sivu on Google Docsilla äärettömän tylsä, mutta tämäkin ongelma on kierrettävissä pienellä virittämisellä. Ensinnäkin sinulla tulee olla valmiina uusi www-sivu, johon käyttäjä ohjataan tietojen lähettämisen jälkeen. Toiseksi tulee jo tässä aiemmin muokattua arvontasivun lomaketta viritellä eteenpäin siten, että se ei ohjaa lomakkeen lähettämisen jälkeen omalle sivulleen vaan meidän itse määrittelemälle sivulle.

1. Etsi arvontasivun html-koodista <form> -tagi
2. Lisää <form> -tagin loppuun, ennen sulkevaa >-merkkiä alla olevan esimerkin mukaiset kaksi parametria, jonka jälkeen rivin tulisi näyttää seuraavalta (alla olevan koodin XXX on sinun lomakkeesi yksilöivä koodi, jota ei tule muuttaa XXX:ksi)

Lisättävät parametrit: target="hidden_iframe" onsubmit="submitted=true;"

Esimerkki: <form action="https://docs.google.com/spreadsheet/formResponse?formkey=XXX;ifq" method="POST" target="hidden_iframe" onsubmit="submitted=true;" id="ss-form">

Edellä oleva muutos ohjaa lomakkeen lähettämään tietonsa Google Docsille, jonka jälkeen Googlen vastaussivu ohjataan käyttäjältä näkymättömiin piilotettuun iframe-elementtiin. Iframe-elementti tulee luoda html-koodiin ja samalla kertoa, mikä sivu käyttäjälle näytetään sen jälkeen, kun hän lähettänyt vastauksensa.

1. Etsi arvontasivun html-koodista <form> -tagi
2. Lisää ennen <form> -tagia alla oleva koodi ja korvaa kiitos.php sillä sivulla tai osoitteella, jolle käyttäjä tulisi ohjata.

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='kiitos.php';}"></iframe>

Yllä oleva toteutus Googlen oman vastaussivun poistamiseksi on poimittu verkon syövereistä.

Yksinkertaisimmillaan toimiva, sähköpostiosoitetta pyytävä lomake ei ole tämän ihmeellisempi. Google Docsin puolella on luotu lomake, jossa on vain sähköpostikenttä ja alla olevassa esimerkissä on poistettu Googlen omat muotoilut lomakkeelta ja käytetään tyylisivu.css:n antamia muotoiluja.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel='stylesheet' href='tyylisivu.css' type='text/css' media='all' />
</head>
<body>
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='thanks.php';}"></iframe>
<form action="https://docs.google.com/spreadsheet/formResponse?formkey=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX;ifq" method="POST" target="hidden_iframe" onsubmit="submitted=true;" id="ss-form">
 Sähköpostiosoite: <input type="text" name="entry.0.single" value="" id="entry_0">
 <input type="hidden" name="pageNumber" value="0">
 <input type="hidden" name="backupCache" value="">
 <input type="submit" name="submit"value="Lähetä">
 </form>
</body></html>

Ennen Facebookissa hyödyntämistä toteutetut sivut siirretään www-palvelimelle jakelua varten.

Lomakkeiden hyödyntäminen Facebookissa on sinänsä suoraviivaista, mutta vaatii Developers-osion käyttämistä.  Ohessa on kuvailtu perusaskeleet, jotka tulee suorittaa sovelluksen lisäämiseksi, mutta suosittelen lämpimästi tutustumaan myös Facebookin omiin ohjedokumentteihin.

1. Siirry osoitteeseen https://developers.facebook.com/apps
2. Valitse oikeasta yläreunasta + Luo uusi sovellus
3. Syötä Create New App -lomakkeen Sovelluksen nimi -kenttään nimi, josta tunnistat sovelluksesi, esim. Cliente arvonta.
4. Napsauta Jatka

Liskogallerian kilpailulomake muokkausten jälkeen.

Kiitos osallistumisesta -sivu