A közösségi portálok gyors és egyszerű kódokkal segítik a szolgáltatásaik beágyazását weboldalunkba. Egyszerű copy-paste (másolás-beillesztés) az egész. De ezzel van egy aprócska probléma. Minden ilyen közösségi oldal JavaScript kódot használ, ennek a "gördülékeny" megoldásához. Persze van lehetőség iframeben beilleszteni vagy egyéb finomságokkal játszani, de vegyük az átlagos esetet, mikor egyszerűen a Facebook HTML5 kódját használjuk. Tehát ehhez mindenképp kelleni fog egy JS kód is.
A JavaScript használata egyetlen gondot fog nekünk okozni, mégpedig, újabb lekéréseket fog indítani a céloldal felé. Ezzel növeli a betöltési időt, még több HTTP lekérést indít. Tehát egyetlen szóval: rossz.
Mi a jó megoldás? Használjuk helyette a megosztás linkeket.
Miért jó ez nekem? Most persze szintén a Facebookból indulok ki, és a saját megfigyeléseimből. Tehát, ha megosztasz valamit a Facere, akkor az a hírfolyamodban egyből megjelenik, hogy "XY shared a link". Végig görgetem a hírfolyamot és sehol sem látok olyat, hogy "XY liked a link", ez persze a chat felett jelenik meg a Tickerben. Arra nagyjából hetente 1x nézek rá, amikor az online ismerőseim között keresem azt, akire rá szeretnék írni.
Ezt már régóta tudjuk, de azért leírom. Az oldal betöltési ideje nagyban függ a felhasznált források méretétől és betöltési idejétől. Ez pedig, hogy a mobilok és tabletek egyre nagyobb mértékben veszik át a hatalmat a webezésben, kiemelten fontos. Annak, akinek okos telefonja van, az esetek nagy részében van mobilinternet előfizetése is. Tehát, ha mi több adatot töltünk be az oldalunkon - tök egyszerű - a felhasználóinknak nagyobb lesz az adatforgalma.
Számolgassunk:
Közösségi oldal | Fájlok száma | Fájlméret |
---|---|---|
3 | 73,3KB | |
Google+ | 1 | 15,1KB |
4 | 52,7KB | |
2 | 47,7KB | |
3 | 12,9KB | |
Tumblr | 1 | 1,5KB |
Összesen | 14 | 203,2KB |
Ez tehát összesen 14 lekérést indít a külső szolgáltatók felé. Egy átlagos internet kapcsolat esetén ez olyan 1-4 másodperc plusz a betöltési időben. Ha developer toolsban átállítjuk a kapcsolatot EDGE hálózatra, akkor ez már 7-8 másodperc a betöltésnél.
Nem hangzik túl jól. Erre szintén egy személyes példám van. A DicsakBuksi, amit nemrég zártam be, 4 közösségi portál összes elérhető gombját helyezte ki. Egy oldalon 10 bejegyzés, ezekhez Google+, Facebook, Twitter és Pinterest gombokat töltött be. Az oldal volt, hogy 10 másodperc alatt sem tudott felállni, mert még mindig a gombokat töltögette a háttérben. Persze a teljes letöltésig az oldal szinte be volt fagyva. Se görgetni, se kattintani nem tudtak a felhasználók. Ez így nem jó.
Másik fontos kérdés, amit ma egyre többször hoznak fel a felhasználók, a személyes adatok védelme. Azzal, hogy a fent is említett közösségi portálok felé - beágyazható gombok által - kéréseket küld az oldalunk, a közösségi portálok képesek követni a felhasználókat. Erről volt is vita például a Facebook esetében.
Tehát, a megosztással - ami elérhető minden portál esetében egy egyszerű linken keresztül - nem csak az oldalunk betöltését tudjuk felgyorsítani, de a felhasználóink követését is megakadályozhatjuk. Ez szerintem - bár nem mintha a legtöbb magyar netező ezzel tisztában lenne - egy jó pont a számunkra.
Tehát elérkeztünk a fő célunkhoz. Mint már említettem, minden közösségi portál biztosít egy egyedi linket, amin keresztül a megadott paraméterek alapján, a felhasználóink meg tudják osztani a tartalmat. És ami a legfontosabb, mivel ezek linkek, nem használnak JavaScriptet.
Az egyik legfontosabb dolog a megosztási linkek használatakor, hogy a paraméterben átadott URL mindig encode-olva legyenek.
Egy encode-olt URL így néz ki az oldalamnál:
http%3A%2F%2Fwww.leoamros.com%2F
PHP-ban ez baromi egyszerű:
<?php echo urlencode('http://www.leoamros.com/'); ?>
Vagy mivel sokáig Smartyt használtam:
<a href="?xy={$shareLink|escape:'url'}">Share</a>
Tehát ez mondjuk egy Facebook megosztásnál valahogy így nézne ki a weboldal HTML kódjában:
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.leoamros.com%2F"
target="_blank">Megosztás a Facebookon</a>
Így már lehet szépen formázgatni saját kódba illő gombokkal:
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.leoamros.com%2F"
target="_blank" class="btn btn-facebook btn-md">
<i class="fa fa-facebook"></i> Megosztás</a>
Jajj, de szép.
A Facebook nem gatyázott, egyetlen paramétert kér, az u
-t, ami a megosztandó linket tartalmazza. Ezzel szemben például a Twitter 3 paramétert fogad, text
, url
és via
.
text
: megosztandó szöveg
url
: megosztandó link
via
: Twitter felhasználónév
Tehát a fenti példa átültetve Twitter linkre:
<a href="https://twitter.com/intent/tweet/
?text=Ezt%20az%20oldalt%20mindenképp%20meg%20kell%20nézned!
&url=http%3A%2F%2Fwww.leoamros.com%2F
&via=Leoamros"
target="_blank">Megosztás a Twitteren</a>
És ezt is formázhatjuk:
Miután kizártuk az oldalunkról a közösségi portálok JavaScript fájljait, azért a saját JS kódunkba még írhatunk néhány sort. Ennek lényege, hogy nem új ablakban fogjuk megnyitni a megosztást, hanem egy popup ablakban. Ezzel kicsit pofásabbá tehetjük a megosztást. Körülbelül hasonló képernyőt dobálnak fel a közösségi oldalak is, tehát a felhasználó nagyjából a megszokott módon oszthatja meg a tartalmat.
function socialPopup(url, width, height) {
//meghatározzuk, hogy a képernyő közepére kerüljön a felugró ablak
var left = ((screen.width - width)/2),
top = ((screen.height - height) / 2);
window.open(
url,
"",
"menubar=no,toolbar=no,resizable=yes,scrollbars=yes, \
width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
);
}
Mi az a \ jel a JavaScript kódban?
Ezzel létrehoztunk egy függvényt, amit minden linkhez hozzá kell csatolnunk, amin keresztül megosztást végzünk. Erre a legegyszerűbb, ha egy új CSS osztályt hozunk létre, mondjuk popup-social-share
néven és ehhez kötjük hozzá a felugró ablakot.
jQuery-ben ez így néz ki:
$('.popup-social-share').on('click', function(e) {
e.preventDefault();
socialPopup($(this).attr('href'), 600, 400);
});
A gombunk pedig kibővül a popup-social-share
osztállyal:
<a href="https://twitter.com/intent/tweet/
?text=Ezt%20az%20oldalt%20mindenképp%20meg%20kell%20nézned!
&url=http%3A%2F%2Fwww.leoamros.com%2F
&via=Leoamros"
target="_blank"
class="popup-social-share">Megosztás a Twitteren</a>
Persze ezt nem kötelező jQueryvel megoldani, simán natív JavaScriptben is megoldható, csak így rövidebb és általában a legtöbb oldalon használunk jQueryt.
És a végeredmény:
A kódot kénytelen vagyok több sorba törni a könnyebb olvashatóság kedvéért. Ha a minta kódokat kimásolod és beilleszted a saját kódodba, töröld a felesleges szóközöket és új sorokat!
Minden paraméternek
urlencode
-olva kell lennie!Oda írhatnám minden link alá, de nincs értelme!
<a href="https://www.facebook.com/sharer/sharer.php
?u=http%3A%2F%2Fwww.leoamros.com%2F"
target="_blank">Facebook megosztás</a>
A Facebooknak egyetlen paramétere van:
u
, ami kötelező és a linket kell tartalmaznia.<a href="https://plus.google.com/share
?url=http%3A%2F%2Fwww.leoamros.com%2F"
target="_blank">Google+ megosztás</a>
A Google Plusnak két paramétere van:
url
, ami kötelező és a linket kell tartalmaznia.hl
paraméter, ami nem kötelező és a felugró ablak nyelvét tudjuk vele kiválasztani.Google Plus megosztás dokumentációja
<a href="https://www.linkedin.com/shareArticle
?mini=true
&url=http%3A%2F%2Fwww.leoamros.com%2F
&title=Leoamros.com
&source=http%3A%2F%2Fwww.leoamros.com%2F
&summary=Rövid%20leírás"
target="_blank">LinkedIn megosztás</a>
A LinkedIn-nek összesen öt paramétere van:
mini
, ami kötelező és az értéke mindig true
.url
, ami kötelező és a linket kell tartalmaznia.title
, ami természetesen a megosztás címe lesz, nem kötelező.source
, ami a weboldal vagy applikáció címét, nevét tartalmazza, nem kötelező.summary
, ami a megosztás leírása, nem kötelező.LinkedIn megosztás dokumentációja
<a href="https://www.pinterest.com/pin/create/button/
?url=http%3A%2F%2Fwww.leoamros.com%2F
&media=http%3A%2F%2Fwww.leoamros.com%2Ficon.png
&description=Rövid%20leírás"
target="_blank">Pinterest megosztás</a>
A Pinterestnek összesen három paramétere van:
url
, ami kötelező és a linket kell tartalmaznia.media
, ami a megosztandó képre mutat, ha jól tudom nem kötelező, de ajánlott, máskülönben az oldalon található összes képet felajánlja választásra a Pinterestdescription
, ami a megosztott tartalom rövid leírása, nem kötelező.Pinterest megosztás dokumentációja
<a href="https://twitter.com/intent/tweet/
?text=Ezt%20az%20oldalt%20mindenképp%20meg%20kell%20nézned!
&url=http%3A%2F%2Fwww.leoamros.com%2F
&via=Leoamros
&hashtags=weblapkészítés,programozás"
target="_blank">Twitter megosztás</a>
A Twitternek összesen hat paramétere van, ebből általánosságban a fenti négyet használjuk:
text
, ami a megosztandó rövid szöveg, opcionális, maximum 140 karakterurl
, ami a megosztandó link, opcionálisvia
, ami a megosztandó szöveghez kapcsolható Twitter felhasználó, mondjuk az oldal tulajdonosa, opcionálishashtags
, ami a szöveg kulcsszavait tartalmazhatja, opcionálisAmi a fenti példában nincs
related
, további Twitter felhasználókat köthetünk az adott témához, opcionálisin-reply-to
, egy korábbi beszélgetés azonosítója, mondjuk egy vita indításakor, az első Twitt azonosítója, opcionálisTwitter megosztás dokumentációja
<a href="https://www.tumblr.com/share
?posttype=link
&tags=weblapkészítés,programozás
&title=Ezt%20az%20oldalt%20mindenképp%20meg%20kell%20nézned!
&content=http%3A%2F%2Fwww.leoamros.com%2F
&caption=Rövid%20leírás
&show-via=Leoamros"
target="_blank">Tumblr megosztás</a>
A Tumblr-nek összesen hat paramétere van. Mivel ez egy kicsit bonyolultabb, így itt nem fogom túlságosan elmagyarázni, csak nagyjából, itt hagyatkozz a dokumentációra:
posttype
, a megosztás típusától függően lehet text
, photo
, quote
, link
, chat
vagy video
. Mondtam, hogy bonyolulttags
, a kulcsszavak listája vesszővel elválasztva.title
, a bejegyzéshez tartozó címcontent
, a posttype
függvényében lehet link, kép, beágyazható videó kódja. Nem ismétlem magamcaption
, a posttype
függvényében lehet a link, video vagy kép leírása, idézetnél az idézet tulajdonosa.show-via
, pedig hozzáfűzhetjük a forrást, mondjuk egy nevet.Szóval eddig ez talán a legbonyolultabb, mivel itt a tartalom típusától függően, többféle beállítás létezik. Ha ezt be szeretnéd építeni:
Tumblr megosztás dokumentációja
<a href="http://www.reddit.com/submit/
?url=http%3A%2F%2Fwww.leoamros.com%2F"
target="_blank">Reddit megosztás</a>
A Reddit egyetlen paramétert kér
url
-t, ami a megosztandó link és kötelezőReddit megosztás dokumentációja
Igaz, hogy néhány alap funkciótól elesünk, mivel például a Facebooknál nincs lehetőségünk egyedi leírást vagy képet beállítani, vagy épp nem tudunk számlálókat kitenni az oldalra, hogy lássák a felhasználóink, milyen sokan (vagy épp kevesen) osztották meg a bejegyzésünket/oldalunkat.
De rengeteg plusz dolgot nyerünk vele. Mondjuk jó pár másodperccel rövidebb betöltési időt, így kevesebb elkattintást oldalunkról. Szerintem ez már egy elég jó pont.
Még menet közben kicsit gondolkodtam, hogy a fenti adatvédelemről szóló részbe bele lehet kicsit kötni, így ezt most tisztába rakjuk.
Tehát ezt a "szolgáltatását" oldalunknak főleg azok fogják élvezni, akik nem kattintanak a megosztás linkre. Mivel nem töltünk be külső JavaScriptet a közösségi oldalakról, így míg nem kattintanak rá a gombra, a közösségi oldal nem tudja követni a felhasználóinkat. Amikor rákattint már természetesen tudni fogja a külső oldal - ha mást nem a linkből - hogy épp nálunk tartózkodik a felhasználó. De a további nyomkövetés szintén lehetetlen.
Persze a Google Analytics, a külső CDN oldalak, és egyéb szépségek ettől még továbbra is el tudják helyezni a nyomkövető Cookiekat. Tehát itt most csak a közösségi oldalakat tudjuk kizárni a "versenyből".