Oszd meg, de uralkodj!

Az úgynevezett web 2.0-át már rég elfelejtettük, pedig ezzel indult az a közösségi oldalasdi, ami ma már teljesen beépült a hétköznapjainkba. Bárhová megyünk az interneten, mindenhol like, share, és tweet gombokba botlunk a cikkek és oldalak környékén, amit természetesnek is veszünk, régóta velünk vannak.

Mi sem egyszerűbb az oldaltulajdonosok számára: kész kódrészleteket adnak, csak be kell illeszteni a kívánt helyre, és mint az instant levespor, már is készen van az instant közösségi leves. Ám a technikai hátterébe kevesen gondolnak bele, beillesztik, működik, mindenki boldog. Vagy pont a látogató – aki miatt az egészet csináltuk – nem?

Lassítja az oldalt

Legalább is ami a betöltési időt, és a renderelési folyamatot illeti. Megnöveli az adatforgalmat, aminek a mobilnetről jövők örülnek a legkevésbé.

Forrás: Responsible Social Share Links

A táblázatban összesített adatmennyiség letöltésére EDGE mobilhálózaton akár 7 másodpercet is várni kell. Ez jelentős idő, amit csak a közösségi gombok miatt kell megvárni. Ha az összes közösségi oldal gombját bekötjük, akkor azok 11 fájlt fognak lekérni, ami szintén meghosszabbítja a betöltődési időt.
A Zurb jobban a téma után ment, itt olvasható: Small, Painful Buttons: Why Social Media Buttons Might be Killing Your Mobile Site

De a méret, és az általa generált adatforgalom csak az egyik fele: ismerős lehet az érzés, amikor megnyitsz egy cikket, de nem tudod görgetni az oldalt, a böngésző kvázi belefagy a közösségi gombok megjelenítésébe, majd miután megjelenni látod őket, a görgetés egyszer csak simává válik.

Eredményes-e a Facebook Like egyáltalán?

Miért találta ki a Facebook a like gombot? Ennél egyszerűbb módja aligha akad a tartalom megosztásának. Ám a Facebook rangsorolási algoritmusában – azzal kapcsolatbna, hogy kinek milyen tartalmakat mutat – a like-olt tartalom igen alacsony prioritással rendelkezik. Az illető idővonalán nem is látszanak ezek, csak egy rövid ideig egy eldugott alsó kis dobozban.

Ha rányomsz egy cikknél a like gombra, az az ismerőseidnek csak egy nagyon kis százalékához fog eljutni. Viszont ha nincs like gomb az oldalon, az a releváns olvasókat megosztásra ösztönözheti, ami több új látogatást hozhat a magasabb megjelenési prioritással rendelkező megosztott link miatt.

Ezt igazolják a Smashing Magazine számai is, akik már lassan 3 éve meglépték, és levették a Facebook által kínált instant gombokat. Több, mint egy éve az OWT oldalán sem található semmilyen közösségi gomb. A statisztikák alapján azóta a közösségi forgalom nem hogy visszaesett, jelentősen megnőtt.

Használj megosztó linkeket!

Szerencsére nem csak a kész megoldásokat használhatjuk, hanem megfelelően paraméterezett linkek segítségével megosztó linkeket hozhatunk létre, amelyek az adott közösségi oldal megosztó dialógusát kínálja fel. Előnye, hogy helyben formázható CSS segítségével, ezáltal az oldal megjelenésével konzisztens kinézetet adhatunk neki, ami messze nem elhanyagolható tényező.

A Facebook megosztó linkje így néz ki:

https://www.facebook.com/sharer/sharer.php?u=MEGOSZTANDO_URL

Meghívunk egy sharer.php nevű fájlt, és az u paramétereként a MEGOSZTANDO_URL helyére jön a link. Illetve jönne, de sajnos nem ilyen egyszerű, a linket muszáj elkódolni: a benne található speciális karaktereket, szóközöket, stb. értelmezhető karakterekké kell alakítani.

Egy ilyen kódolt link így néz ki:

https%3A%2F%2Fwebdesigntanfolyam.com%2F

Nem túl szép, de nem kell pánikba esni, van erre egy egyszerű megoldás, mivel ez a dolog nem új keletű A PHP urlencode() funkciója segítségével egy pillanat alatt elkódolt url-t varázsolhatunk. Természetesen ehhez PHP futtatására alkalmas környezetre is szükség van.

<?php echo urlencode('https://webdesigntanfolyam.com/'); ?>

Ez kiírja az elkódolt url-t, de most nézzük meg, hogyan mutat minez egyben:

https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode('https://webdesigntanfolyam.com/'); ?>

Ezzel kész is a link, amit a következőképpen tehetünk kattinthatóvá:

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode('https://webdesigntanfolyam.com/'); ?>" target="_blank">Megosztás Facebookon</a>

Ha WordPress bejegyzés alá akarunk elhelyezni ilyen megosztó linket, akkor a get_the_parmalink() funkcióval tudjuk dinamikusan az adott bejegyzés linkjét lekérdezni, majd ezt kell az urlencode() PHP funkcióval elkódolni:

urlencode(get_the_permalink());

Tehát a teljes link így fog kinézni:

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_the_permalink()); ?>" target="_blank">Megosztás Facebookon</a>

Ha szükséged van rá, akkor találsz online eszközt is az elkódolásra, itt van pl. ez: http://www.url-encode-decode.com/

Több paraméteres megosztó linkek

Míg a Facebook esetében csak egy paramétert, az url-t kell megadni, addig pl. a Twitter esetében már szöveget és felhasználónevet is, ami említésre kerül a tweetben.

<a href="https://twitter.com/intent/tweet/
?text=N%C3%A9zd+meg+a+tanfolyam+weboldal%C3%A1t
&url=https%3A%2F%2Fwebdesigntanfolyam.com%2F
&via=hutchhu" 
target="_blank">Megosztás Twitter</a>

A text paraméterbe ugyanúgy egy elkódolt szöveget tettem: “Nézd meg a tanfolyam weboldalát”, az url paraméterben a Facebook linkhez hasonlóan kerül az url, a via paraméterbe pedig az én saját Twitter azonosítómat írtam be.

A sima szöveghez is használható az urlencode() PHP funkció, a fenti link tehát dinamikusan így fog kinézni:

<a href="https://twitter.com/intent/tweet/
?text=<?php echo urlencode('Nézd meg a tanfolyam weboldalát'); ?>
&url=<?php echo urlencode('https://webdesigntanfolyam.com/'); ?>
&via=hutchhu" 
target="_blank">Megosztás Twitteren</a>

A WordPress verzióban a bejegyzés címét megadhatjuk a szöveg paramétereként:

<a href="https://twitter.com/intent/tweet/
?text=<?php echo urlencode(get_the_title()); ?>
&url=<?php echo urlencode(get_the_permalink()); ?>
&via=hutchhu" 
target="_blank">Megosztás Twitteren</a>

További közösségi oldalak megosztó linkjei

Google+

<a href="https://plus.google.com/share
?url=<?php echo urlencode('https://webdesigntanfolyam.com/'); ?>"
target="_blank">Megosztás Google+-on</a>

WordPress esetében:

<a href="https://plus.google.com/share
?url=<?php echo urlencode(get_the_permalink()); ?>"
target="_blank">Megosztás Google+-on</a>

LinkedIn

<a href="https://www.linkedin.com/shareArticle?mini=true
 &url=<?php echo urlencode('https://webdesigntanfolyam.com/'); ?>"
 target="_blank">Megosztás LinkedIn-en</a>

WordPress esetében:

<a href="https://www.linkedin.com/shareArticle?mini=true
 &url=<?php echo urlencode(get_the_permalink()); ?>"
 target="_blank">Megosztás LinkedIn-en</a>

Összegzés

A módszer alkalmazásával megoldunk egy másik problémát is: a követést. Az oldalakba, a like és megosztás gombokkal ágyazott JS fájlok segítségével a közösségi oldalak nyomon tudnak követni minket, látják, hogy merre járunk a weben, hiszen a böngészőnk sütijéből kiolvasható, hogy kik vagyunk, milyen profillal vagyunk bejelentkezve. Ez sokakat zavar, így ez a megoldás feléjük is egy gesztus lehet.

A bejegyzés a jonsuh.com oldalon megjelent “Responsible Social Share Links” című bejegyzés alapján született. További felhasznált tartalom: “Ki kell-e nyírnunk végre a like gombokat?“

A Oszd meg, de uralkodj! bejegyzés először Webdesign Tanfolyam-én jelent meg.