Yksinkertaisin (ja toimivin) tapa tarjota jakolinkkejä sosiaaliseen mediaan

Kesällä kirjoitin The Essential Meta Tags for Social Media -kirjan siitä, miten kehittäjät voivat valmistella verkkosivuja niin, että ne näkyvät optimaalisesti, kun niitä jaetaan sosiaalisessa mediassa. Mutta entä sellaisten linkkien luominen, joiden avulla käyttäjät voivat jakaa näitä verkkosivuja? Facebook, Twitter ja LinkedIn tarjoavat tähän lukuisia tapoja, joista osa sisältää painikegeneraattoreita ja osa vaatii ulkoista JavaScriptiä. Voit kuitenkin välttää kaiken tämän luomalla omia linkkejä verkkosivujen jakamiseen. Ja mikä parasta, se on helppo tehdä itse. Näin se onnistuu.

Peruskonsepti: Vain linkki

Jakaessasi verkkosivuja linkkien avulla lähetät pohjimmiltaan GET-pyynnön (eli klikkaat linkkiä) kunkin sosiaalisen median palvelun tarjoamaan URL-osoitteeseen. Lisäämällä tämän URL-osoitteen loppuun sarjan nimi/arvopareja (kyselyparametreja, kuten ?title=Title) voit määrittää jaettavan verkkosivun URL-osoitteen ja joskus lisätietoja.

Tietyt GET-pyynnöissä esiintyvät symbolit, joita kutsutaan varatuiksi merkeiksi, on koodattava oikein, jotta ne eivät häiritse selaimen normaaleja toimintoja. Näihin merkkeihin sovelletaan ”prosenttikoodausta” eli ne esitetään kyselyparametreissa ”%”-merkillä, jota seuraa kaksinumeroinen heksakoodi. Nämä ovat varatut merkit ja niiden prosenttikoodatut vastineet.

Huom: Välilyönti voidaan esittää muodossa ”%20” tai ”+”.

Ei näitä heksakoodeja tietenkään tarvitse opetella ulkoa. On monia resursseja, jotka tarjoavat muunnoksia (Bingin hakukoneessa on sellainen sisäänrakennettuna), ja kuten pian huomaat, JavaScript voi myös hoitaa raskaan työn tässä suhteessa. Katsotaanpa muutamia suosituimpia sosiaalisen median palveluita ja opitaan, miten voimme jakaa verkkosivuja niiden kautta.

Facebook

Kehittäjän oppaassaan Facebook määrittelee seuraavan URL-osoitteen GET-pyyntöjen lähettämiseen verkkosivun jakamisen yhteydessä:

https://www.facebook.com/dialog/share

Vaikka kyselyparametreja on käytettävissä neljä, vain kaksi vaaditaan: jaettavan verkkosivun URL-osoite ja sovellustunniste (App ID), jonka sovelluskehittäjät saavat rekisteröitymällä Facebookissa. Jos sinulla ei ole App ID:tä, rekisteröintiprosessi ei ole vaivalloinen, mutta ei ole syytä vaivautua, kun on olemassa vieläkin yksinkertaisempi ratkaisu.

Facebookin alkuperäistä tapaa jakaa verkkosivuja ilman vaadittua App ID:tä ei enää mainita missään heidän dokumentaatiossaan, mutta sitä tuetaan edelleen. Itse asiassa lukemattomat verkkosivut käyttävät tätä menetelmää, joten en voi kuvitella, että se poistettaisiin käytöstä lähiaikoina. Tämä URL-osoite on:

https://www.facebook.com/sharer.php

Ainoa käytettävissä oleva parametri on ”u”, jota käytetään jaettavan verkkosivun URL-osoitteen määrittämiseen. Tässä on esimerkki, joka jakaa CSS-Tricksin kotisivun Facebookissa – mene ja leikkaa ja liitä selaimeen nähdäksesi tuloksen.

https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F

Kuten aiemmin selitettiin, jaettu URL-osoite on välttämättä prosenttikoodattu. Huomaa myös, miten ”?” tarkoittaa ensimmäisen kyselyparametrin alkua. Seuraavat kyselyparametrit erotetaan toisistaan ”&”:lla, kuten pian nähdään.

Twitter

Twitter viittaa verkkosivun jakamiseen URL-osoitteella Tweet Web Intent – URL-osoite, jota käytetään, on:

https://twitter.com/intent/tweet

Ei toisin kuin Facebookissa, jossa voidaan määritellä vain jaettava verkkosivu, Twitterissä voit liittää mukaan jonkin verran tekstiä ja minkä tahansa määrän hashtageja. Käyttäjillä on mahdollisuus muokata kaikkea tätä ennen twiittaamista, mutta se antaa heille etumatkaa siltä varalta, etteivät he viitsi vaivautua. Oletetaan esimerkiksi, että haluat twiitata seuraavat tiedot:

Tämän URL-osoite, jossa kyselyparametrit on prosenttikoodattu ja rivinvaihdot lisätty selkeyden vuoksi, on:

https://twitter.com/intent/tweet?url=http%3A%2F%2Fcss-tricks.com%2F&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&hashtags=css,html

Ja tuloksena on:

Huomaa, että Twitter valitsee tekstin valmiiksi, jolloin käyttäjän on helppo muokata sitä. Ja muista, että twiitin on oltava alle 140 merkkiä, joten älä anna liian pitkää tekstiä. Yksinkertaisuuden vuoksi jätin käsittelemättä kolme vähemmän käytettyä parametria, jotka on kuvattu yksityiskohtaisesti Twitterin kehittäjien dokumentaatiossa. Näiden lisäparametrien avulla voit määrittää twiittiin liittyvän käyttäjätunnuksen, ehdotetut aiheeseen liittyvät käyttäjätunnukset ja aiheeseen liittyvän twiitin tunnuksen.

LinkedIn

LinkedInissä jaettaessa käytettävä URL-osoite on:

https://www.linkedin.com/shareArticle

Kokonaisuudessaan käytettävissä on viisi parametria, jotka on esitetty yksityiskohtaisesti tässä LinkedInin kehittäjien dokumentaatiosta otetussa kaaviossa:

Jaettavan verkkosivun URL-osoitteen lisäksi tarvitaan toinen kyselyparametri nimeltä ”mini”. Mutta kuten näet, sen arvo ei koskaan muutu, joten voimme koodata sen kiinteästi URL-osoitteeseen. Havainnollistamiseksi jaetaan seuraava LinkedInissä:

Tästä saadaan seuraava URL-osoite – jälleen kerran rivinvaihdot lisätty selkeyden vuoksi:

https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.css-tricks.com%2F&title=CSS-Tricks&summary=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&source=CSS-Tricks

Vaikkakaan sitä ei mainita eksplisiittisesti heidän dokumentaatiossaan, mutta jos ”title”-parametrin jättäminen pois jätetään pois, LinkedIn poimii sisällön jaetulta sivulta avoimen grafiikan tagista (Open Graph tagista) <meta property="og:title">. Vastaavasti, jos ”summary”-parametri jätetään pois, käytetään Open Graph -tunnistetta <meta property="og:description">. Mitä tulee ”source”-parametriin, mikään dokumentaatiossa ei määrittele, miten tätä arvoa käytetään tai näytetään jaettaessa verkkosivua – näyttää siltä, että sen voi huoletta jättää huomiotta.

Kun tämä kaikki tiedetään, jos jaettavalla verkkosivulla on asianmukaiset Open Graph -tunnisteet, pelkkä URL-osoitteen määrittäminen riittää, sillä ”title”- ja ”summary”-parametrit täyttyvät sopivasti.

Kaiken yhdistäminen

Nyt kun tiedämme, mitä syntaksia tulee käyttää jaettaessa verkkosivuja sosiaalisessa mediassa, miten tarkalleen ottaen voimme toteuttaa tämän koodin? Ehkä yleisin tapa on yksinkertaisesti listata joukko jakamislinkkejä, jotka on muotoiltu sopivasti CSS:llä:

<ul> <li><a href="https://www.facebook.com/sharer.php?..." target="blank" rel="noopener noreferrer"><img src="facebook-icon.png" alt="Share Page on Facebook" /></a></li> <li><a href="https://twitter.com/intent/tweet?..." target="blank" rel="noopener noreferrer"><img src="twitter-icon.png" alt="Share Page on Twitter" /></a></li> <li><a href="https://www.linkedin.com/shareArticle?..." target="blank" rel="noopener noreferrer"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li></ul>

target="_blank":n lisääminen ankkuritunnisteeseen mahdollistaa jakamisvalintaikkunan näkymisen uudessa ikkunassa tai välilehdessä, mikä toimii hyvin kaikilla laitteilla työpöydästä mobiililaitteisiin.

Mutta näiden linkkien kovakoodaaminen kyselyparametrien prosenttikoodauksineen voi olla työlästä ja virhealtista. Mille tahansa CMS:n dynaamisesti tarjoamalle verkkosivulle tämä olisi täydellinen tilaisuus saada tämä tietojen murskaus suoritettua palvelinpuolella ja lisättyä tarvittaessa HTML:ään.

Toinen vaihtoehto on käyttää sosiaalisen median jakamista: HTML Links Generator, jonka olen luonut CodePenissä. Sen avulla voit syöttää minkä tahansa tai kaikki äsken tarkastelemamme tarvittavat parametrit, ja se tulostaa sopivan HTML:n, jonka voit lisätä omaan koodiisi.

Katso Pen Social Media Sharing: HTML Links Generator by Adam Coti (@adamcoti) on CodePen.

Vapaaehtoisena web-kehittäjänä, joka työskentelee lähes yksinomaan front-endissä, olen valinnut JavaScript/jQuery-toiminnallisuuden, joka ilman räätälöintiä toimii avaimet käteen -ratkaisuna projekteissani. Näin voin olla varma, että kaikki jakolinkit käsitellään asianmukaisesti, riippumatta siitä, työstänkö staattista verkkosivustoa, muokkaan WordPress-teemoja tai luovutan malleja integroitavaksi CMS-järjestelmään.

Tässä on käyttämäni HTML-koodi, jossa luokat osoittavat tietyn jakopalvelun. JavaScriptissä kutsutaan funktiota setShareLinks(), joka liittää click-tapahtumia jakopainikkeisiin, kun DOM (Document Object Model) on valmis:

<ul> <li class="social-share facebook"><img src="facebook-icon.png" alt="Share Page on Facebook" /></li> <li class="social-share twitter"><img src="twitter-icon.png" alt="Share Page on Twitter" /></li> <li class="social-share linkedin"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></li></ul>

function socialWindow(url) { var left = (screen.width - 570) / 2; var top = (screen.height - 570) / 2; var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left; window.open(url,"NewWindow",params);}function setShareLinks() { var pageUrl = encodeURIComponent(document.URL); var tweet = encodeURIComponent(jQuery("meta").attr("content")); jQuery(".social-share.facebook").on("click", function() { url = "https://www.facebook.com/sharer.php?u=" + pageUrl; socialWindow(url); }); jQuery(".social-share.twitter").on("click", function() { url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet; socialWindow(url); }); jQuery(".social-share.linkedin").on("click", function() { url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl; socialWindow(url); })}

Nykyisen verkkosivun URL-osoite saadaan helposti lukemalla document-objektin ominaisuus. Ja Twitterin osalta Open Graph -tunniste <meta property="og:description"> tarjoaa kätevästi sopivan sisällön oletustwiitille.

Nyt joidenkin asiakkaideni pyynnöstä käynnistän juuri muodostetun URL-osoitteen erikoiskokoisessa toissijaisessa (ponnahdusikkunassa) hyödyntämällä window.open(). Useimmissa työpöytäselaimissa tämä ikkuna on sijoitettu vaaka- ja pystysuunnassa näytön keskelle. Mielenkiintoista on, että jos käyttäjä on kirjautunut sosiaalisen median tililleen, Facebook ja LinkedIn muuttavat tämän toissijaisen ikkunan koon tarvittaviin mittoihin. Twitter ei tee niin, joten käytän oletusleveyttä ja -korkeutta, jotka antavat sille riittävästi tilaa. Mitä tulee responsiivisuuteen, tabletit ja mobiililaitteet tulkitsevat toissijaisen ikkunan uudeksi välilehdeksi. Demo tästä toiminnallisuudesta löytyy CodePenistä.

Katso Kynän sosiaalisen median jakaminen: Automated Link Creator by Adam Coti (@adamcoti) on CodePen.

Mutta ponnahdusikkunan käyttämistä, vaikka se oli aikoinaan yleistä, paheksutaan nykyään saavutettavuussyistä. Yksinkertainen ratkaisu on asettaa muuttuja params tyhjäksi merkkijonoksi yllä olevassa JavaScriptissä. Näin URL-osoite käynnistyy uudessa ikkunassa tai välilehdessä käyttäjän selaimen asetuksista riippuen.

Johtopäätös

Kuten karmea sanonta kuuluu, kissan voi nylkeä monella tavalla. Yllä oleva tekniikka on yksinkertaisesti minun suosikkimenetelmäni. Sinulla saattaa olla parempi, optimoidumpi tapa. Ehkäpä käyttämällä HTML:ssä data-attribuutteja (esimerkiksi hashtagien määrittämiseksi), jotka JavaScript voi lukea ja liittää kyselyparametrina tarvittaessa. Toivottavasti tämä voi ainakin toimia inspiraationa omalle toteutuksellesi.