Kaverillani on firmalleen nettisivut, mihin tahtoi Facebookin Messenger liitännäisen toimimaan etuohjelmasta kertovalle sivulleen. Yrityksistä huolimatta hän ei saanut tuota liitännäistä näkyviin sivulleen ja pyysi minulta apua, josko onnistuisin tulkitsemaan ongelmaa paremmin.

Lähtökohta

Joitain Facebook liitännäisiä olen joskus lisäillyt sivuille, mutta Messenger-liitännäinen oli itselle vielä kokeilematta. Ensin siis piti vähän tutustua että minkälaisesta liitännäisestä on kyse. Kyseinen liitännäinen siis tarjoaa pienen Messenger-pallukan sivun alanurkkaan, mistä voi alkaa suoraan chattaamaan sivustolla toimivan vastaajan kanssa käyttäen Facebookin Messenger-keskusteluohjelmaa, keskustelua voi jatkaa sivulla tai halutessaan voi keskustelun vaihtaa myös suoraan Facebookin puolelle.

Lähdekoodiin tutustuminen

Kirjauduin kaverin sivujen ylläpitoon ja etsin käsiini tuon kyseisen sivun html-tiedoston. Lueskelin aikani ensin koodia ja koitin tulkita onko mitään näkyvää ongelmaa havaittavissa. Koodi vaikutti oikealle, mutta mietin josko koodin sijoituspaikka koodissa olisi huono ja tein sivusta kopion ja lähdin tällä koittamaan josko sijoittelulla olisi merkitystä koodin toimivuuden kannalta. Muutaman yrityksen jälkeen totesin, ettei tämä ainakaan vaikuta ja päätin jatkaa ongelman selvittämistä toisesta näkökulmasta.

Sivun lähdekoodin tulkitseminen livenä

Siirryin tutkimaan josko sivun liveversiosta selviäisi ongelman juurisyy paremmin. Otin siis sivun auki selaimessa ja avasin lähdekoodin rinnalle, Googlen Chrome selaimessa tämä on helppoa tehdä painamalla F12 näppäintä. Hetken sivuston koodia livenä tutkittuani huomasin että sivusto muodostaa virheilmoituksia koodista. Virheilmoitus oli:

Refused to display '[URL]'
in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Tuossa [URL] kentässä oli Facebookin sivulle viittaava URL, eli ongelmana oli Facebookin rajapintaan käsiksi pääseminen. Pikaisella googletuksella virheilmoituksen pohjalta totesin, että ongelma liittynee Facebookin puolella oleviin määrityksiin. Liitännäistä ei siis annetulla koodin pätkällä voi laittaa mihin vain, vaan tämä tulee olla sallittuna Facebookin puolelta.

Avasin Elektronikkarin Facebook sivun hallinnan ja kävin tutkimassa miten tällainen vastaava liitännäinen luotaisiin sieltä. Samalla myös tarkistin että minkälaisia säätömahdollisuuksia tähän liittyy ja löysin paikan, missä liitännäiselle voi white-listata eli sallia sivustot joissa liitännäistä haluaa käyttää.

Lopuksi piti vielä selvittää kaverin nettisivujen todellinen osoite webhotellin puolelta, pelkkä .fi päätteisen osoitteen lisääminen ei todennäköisesti mahdollistaisi liitännäistä vaan tämän tarkistus mennee sivuston todellisen osoitteen mukaisesti. Nuo .fi päätteiset osoitteet ovat siis vain maskeja, joilla luodaan sivulle helpompi ja tunnistettavampi osoite.

Selvittelin tuon todellisen osoitteen sivulle, jonka jälkeen neuvoin kaverille mihin hänen tulee lisätä oman sivunsa hallinnassa jotta liitännäinen alkaa toimia.

Lopputulos ja analyysi omasta toiminnasta

Lopputulos oli toivottu, eli nyt tuo liitännäinen toimii kuten kuuluu ja samalla tuli opittua senkin lisääminen sekä hallinta Facebookin liitännäiskirjosta :)

Omaan toimintaani olen suhteellisen tyytyväinen, toiminta oli tehokasta ja määrätietoista. Vähän ehkä liian pitkäksi aikaa jäin tulkitsemaan sivuston lähdekoodia ja koittamaan tähän muokkauksia, tämä on kuitenkin perusteltavissa sillä etten hetkeen aikaan ole ollut taas tekeimisissä sivustojen lähdekoodien kanssa sen enempää.

Ja ennen kuin lopetan

Toki osaa lukijoista voi kiinnostaa mikä sivu oli kyseessä :) Sivustolle pääset https://ansaitsetparasta.fi/ linkistä ja mikäli haluat tukea minua etuohjelmassa, on oma linkkini tämä. Kyseessä ei ole maksettu mainos ja varmistin kaverilta, että on OK kertoa tämä linkkien kera blogissa esimerkiksi ongelman ratkomisesta.

 

Koodikuiskaaja,

Elektronikkari