A legegyszerűbb (és leghatékonyabb) módja annak, hogy megosztási linkeket kínáljunk a közösségi médiában

Tavaly nyáron írtam A közösségi média alapvető metatagjai című cikket arról, hogyan készíthetik elő a fejlesztők a weboldalakat, hogy optimalizálják megjelenésüket a közösségi médiában való megosztáskor. De mi a helyzet a linkek létrehozásával, hogy a felhasználók megoszthassák ezeket a weboldalakat? A Facebook, a Twitter és a LinkedIn számos lehetőséget kínál erre, némelyik gombgenerátorral, mások külső JavaScriptet igényelnek. Mindezek elkerülése érdekében azonban létrehozhatja saját linkjeit a weboldalak megosztásához. És a legjobb az egészben az, hogy ezt egyszerűen maga is megteheti. Íme, hogyan.

Alapkoncepció: Csak egy link

A weboldalak linkek segítségével történő megosztásakor lényegében egy GET-kérést küld (azaz egy linkre kattint) az egyes közösségi médiaszolgáltatások által megadott URL-címre. Ezután egy sor név/érték pár (lekérdezési paraméterek, például ?title=Title) hozzáadásával ennek az URL-címnek a végéhez megadhatja a megosztani kívánt weboldal URL-címét és néha további információkat.

A GET-kérésekben szereplő bizonyos szimbólumokat, az úgynevezett “fenntartott karaktereket” megfelelően kell kódolni, hogy ne zavarják a böngésző normál funkcióit. Ezekre a karakterekre “százalékos kódolás” vonatkozik – azaz a lekérdezési paraméterekben egy “%” és egy kétjegyű hexakód követi őket. Ezek a fenntartott karakterek és százalékos kódolású megfelelőik:

Megjegyzés: A szóközt “%20” vagy “+” jelekkel lehet ábrázolni.

Ezeket a hexakódokat természetesen nem kell megjegyezni. Számos forrás kínál konverziókat (a Bing keresőmotorjába is be van építve egy), és mint hamarosan látni fogod, a JavaScript is képes elvégezni a nehéz munkát ebben a tekintetben. Nézzünk meg néhány népszerűbb közösségi médiaszolgáltatást, és tanuljuk meg, hogyan oszthatunk meg rajtuk keresztül weboldalakat.

Facebook

A fejlesztői útmutatójuk szerint a Facebook a következő URL-t adja meg a GET-kérések elküldéséhez egy weboldal megosztásakor:

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

Míg négy lekérdezési paraméter áll rendelkezésre, csak kettő szükséges: a megosztani kívánt weboldal URL címe és egy App ID, amelyet a fejlesztők a Facebookon történő regisztrációval kaphatnak meg. Ha nincs App ID-nk, a regisztrációs folyamat nem megterhelő, de nem kell ezzel bajlódni, amikor létezik egy még egyszerűbb megoldás is.

A Facebook eredeti, a szükséges App ID nélküli weblap-megosztási módszerét már nem említi egyik dokumentációjuk sem, de még mindig támogatják. Sőt, mivel számtalan weboldal használja ezt a módszert, nem tudom elképzelni, hogy egyhamar elavulttá válna. Ez az URL:

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

Az egyetlen rendelkezésre álló paraméter az “u”, amely a megosztani kívánt weboldal URL-jének megadására szolgál. Íme egy példa, amely a CSS-Tricks honlapját osztja meg a Facebookon – csak rajta, vágja ki és illessze be egy böngészőbe, hogy megnézze az eredményt.

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

Amint korábban már kifejtettük, a megosztott URL szükségszerűen százalékos kódolású. Figyeljük meg azt is, hogy a “?” az első lekérdezési paraméter kezdetét jelöli. A további lekérdezési paramétereket “&” választja el egymástól, amint azt rövidesen látni fogjuk.

Twitter

A Twitter egy weboldal URL-en keresztül történő megosztására Tweet Web Intentként utal – a használandó URL a következő:

https://twitter.com/intent/tweet

A Facebookkal ellentétben, ahol csak a megosztandó weboldalt lehet megadni, a Twitter lehetővé teszi néhány szöveg és tetszőleges számú hashtag hozzáadását. A felhasználóknak lehetőségük lesz mindezt szerkeszteni a tweetelés előtt, de ez ad nekik egy kis előnyt arra az esetre, ha nem tudnának ráérni. Tegyük fel például, hogy a következő információt szeretné tweetelni:

Az URL ehhez, a lekérdezési paraméterek százalékos kódolásával és az áttekinthetőség érdekében hozzáadott sortörésekkel a következő:

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

Az eredmény:

Megfigyelheted, hogy a Twitter előre kiválasztja a szöveget, ami lehetővé teszi a felhasználó számára a könnyű szerkesztést. És ne feledd, a tweetnek 140 karakter alatt kell maradnia, ezért jobb, ha nem adsz meg túl hosszú szöveget. Az egyszerűség kedvéért kihagytam három kevésbé használt paraméter tárgyalását, amelyek részletes leírása megtalálható a Twitter fejlesztői dokumentációjában. Ezek a további paraméterek lehetővé teszik a tweethez tartozó felhasználónév, a javasolt kapcsolódó felhasználónevek és egy kapcsolódó tweet azonosítójának megadását.

LinkedIn

A LinkedIn-en történő megosztáskor használandó URL:

https://www.linkedin.com/shareArticle

Összesen öt paraméter áll rendelkezésre, amint azt a LinkedIn fejlesztői dokumentációjából vett táblázat részletezi:

A megosztani kívánt weboldal URL-jén kívül egy másik, “mini” nevű lekérdezési paraméter is szükséges. De, mint láthatjuk, az értéke soha nem változik, így ezt keményen be tudjuk kódolni az URL-be. A demonstrációhoz osszuk meg a következőt a LinkedIn-en:

Ez a következő URL-t adja – ismét sorváltásokkal kiegészítve az egyértelműség kedvéért:

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

Míg a dokumentációjukban nem említik kifejezetten, ha a “title” paramétert elhagyják, a LinkedIn ezt a tartalmat az Open Graph tagből <meta property="og:title"> a megosztott oldalról fogja átvenni. Hasonlóképpen, ha az “summary” paramétert elhagyjuk, az Open Graph <meta property="og:description"> taget használjuk. Ami a “source” paramétert illeti, a dokumentációban semmi sem határozza meg, hogy ez az érték hogyan kerül felhasználásra vagy megjelenítésre egy weboldal megosztásakor – úgy tűnik, nyugodtan figyelmen kívül lehet hagyni.

Mindezek ismeretében, ha a megosztandó weblap rendelkezik az Open Graph tagek megfelelő kiegészítésével, elegendő az URL egyszerű megadása, mivel a “title” és az “summary” paraméterek megfelelően ki lesznek töltve.

Összeillesztés

Most, hogy már tudjuk a weblapok közösségi médiában történő megosztásakor használandó szintaxist, hogyan tudjuk pontosan implementálni ezt a kódot? Talán a leggyakoribb módszer egyszerűen a CSS-szel megfelelően stilizált megosztási linkek csoportjának felsorolása:

<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>

A horgonycímke target="_blank" hozzáadása lehetővé teszi, hogy a megosztási párbeszédpanel egy új ablakban vagy fülön jelenjen meg, ami minden eszközön jól működik, az asztali számítógépektől a mobilokig.

Az ilyen linkek kemény kódolása azonban a lekérdezési paraméterek százalékos kódolásával együtt fárasztó és hibakényes lehet. Bármely CMS által dinamikusan kiszolgált weboldal esetében ez tökéletes lehetőség lenne arra, hogy ezt az adatfeldolgozást a szerveroldalon végezzük el, és ott illesszük be a HTML-be, ahol szükséges.

Egy másik lehetőség a közösségi média megosztás használata: HTML Links Generator, amelyet a CodePen-en hoztam létre. Ez lehetővé teszi, hogy az imént áttekintett szükséges paraméterek bármelyikét vagy mindegyikét megadja, és a megfelelő HTML-t kimeneti, amelyet beilleszthet a saját kódjába.

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

Szabadúszó webfejlesztőként, aki szinte kizárólag front-endben dolgozik, úgy döntöttem, hogy olyan JavaScript/jQuery funkciókat használok, amelyek testreszabás nélkül, kulcsrakész megoldásként működnek a projektjeimhez. Így biztos lehetek abban, hogy minden megosztási linket megfelelően kezelnek, akár statikus webhelyen dolgozom, akár WordPress-témákat szabok testre, akár CMS-be integrálandó sablonokat adok át.

Ez az általam használt HTML, az adott megosztási szolgáltatást jelölő osztályokkal. A JavaScriptben a setShareLinks() függvényt, amely click eseményeket csatol a megosztás gombokhoz, akkor hívjuk meg, amikor a Document Object Model (DOM) készen áll:

<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); })}

Az aktuális weboldal URL-je könnyen megszerezhető a document objektum egyik tulajdonságának kiolvasásával. A Twitter esetében pedig az Open Graph tag <meta property="og:description"> kényelmesen biztosítja a megfelelő tartalmat egy alapértelmezett tweethez.

Most néhány ügyfelem kérésére az újonnan kialakított URL-t egy speciális méretű másodlagos (felugró) ablakban indítom el a window.open() felhasználásával. A legtöbb asztali böngészőben ez az ablak vízszintesen és függőlegesen a képernyő közepén helyezkedik el. Érdekes módon, ha a felhasználó be van jelentkezve a közösségi média fiókjába, a Facebook és a LinkedIn átméretezi ezt a másodlagos ablakot a szükséges méretre. A Twitter nem, ezért olyan alapértelmezett szélességet és magasságot használok, amely elegendő területet biztosít számára. Ami a reszponzivitást illeti, a táblagépek és a mobileszközök a másodlagos ablakot új lapként értelmezik. Ennek a funkciónak a bemutatója megtalálható a CodePen oldalon.

Lásd a Pen közösségi média megosztását: Automated Link Creator by Adam Coti (@adamcoti) on CodePen.

A felugró ablak használata azonban, bár egykor elterjedt volt, ma már elérhetőségi okokból elítélendő. Egyszerű megoldás, ha a fenti JavaScriptben a params változót üres karakterláncra állítjuk. Ezáltal az URL egy új ablakban vagy fülön jelenik meg, a felhasználó böngészőjének beállításaitól függően.

Következtetés

Ahogy a borzalmas mondás tartja, a macskát sokféleképpen lehet megnyúzni. A fenti technika egyszerűen az általam preferált módszer. Lehet, hogy neked van egy jobb, optimalizáltabb módszered. Esetleg adatattribútumok használata a HTML-ben (például hashtagek megadására), amelyeket a JavaScript beolvashat és szükség esetén lekérdezési paraméterként csatolhat. Remélhetőleg ez legalább inspirációként szolgálhat a saját megvalósításához.