Cel mai simplu (și mai performant) mod de a oferi linkuri de partajare pentru social media

În vara anului trecut, am scris The Essential Meta Tags for Social Media despre cum dezvoltatorii pot pregăti paginile web pentru a optimiza aspectul lor atunci când sunt partajate în social media. Dar cum rămâne cu crearea linkurilor care să le permită utilizatorilor să partajeze aceste pagini web? Facebook, Twitter și LinkedIn oferă numeroase modalități de a face acest lucru, unele implicând generatoare de butoane și altele care necesită JavaScript extern. Pentru a evita toate acestea, însă, puteți să vă creați propriile linkuri pentru a partaja pagini web. Iar partea cea mai bună este că este simplu să o faceți singur. Iată cum.

Concept de bază: Doar un link

Când partajați pagini web folosind linkuri, în esență trimiteți o cerere GET (adică faceți clic pe un link) la un URL furnizat de fiecare serviciu de socializare. Apoi, prin adăugarea unei serii de perechi nume/valoare (parametrii de interogare, cum ar fi ?title=Title) la sfârșitul acestui URL, puteți specifica URL-ul paginii web pe care doriți să o partajați și, uneori, informații suplimentare.

Acum, anumite simboluri din cererile GET, cunoscute sub numele de „caractere rezervate”, trebuie să fie codificate corespunzător pentru a nu interfera cu funcțiile normale ale browserului. Aceste caractere sunt supuse „codării în procente” – adică sunt reprezentate în parametrii de interogare cu un „%” urmat de un cod hexagonal din două cifre. Acestea sunt caracterele rezervate și echivalentele lor codificate în procente.

.

Nota: Un spațiu poate fi reprezentat prin „%20” sau „+”.

Desigur, nu este nevoie să memorați aceste coduri hexagonale. Există multe resurse care oferă conversii (Bing are una integrată în motorul de căutare) și, după cum veți vedea în curând, JavaScript se poate ocupa și de munca grea în această privință. Să analizăm câteva dintre cele mai populare servicii de socializare și să aflăm cum putem partaja pagini web prin intermediul acestora.

Facebook

Pe lângă Ghidul lor pentru dezvoltatori, Facebook specifică următorul URL pentru a trimite cereri GET atunci când partajați o pagină web:

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

În timp ce există patru parametri de interogare disponibili, sunt necesari doar doi: URL-ul paginii web pe care doriți să o partajați și un ID al aplicației, pe care dezvoltatorii îl pot obține înregistrându-se la Facebook. Dacă nu aveți un App ID, procesul de înregistrare nu este împovărător, dar nu este nevoie să vă deranjați atunci când există o soluție și mai simplă.

Metoda originală a Facebook de partajare a paginilor web, fără App ID-ul necesar, nu mai este menționată în nici o documentație a acestora, dar este încă susținută. De fapt, având în vedere că nenumărate site-uri web folosesc această metodă, nu-mi pot imagina că va fi depreciată prea curând. Această adresă URL este:

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

Unicul parametru disponibil este „u”, care este utilizat pentru a specifica adresa URL a paginii web pe care doriți să o partajați. Iată un exemplu care partajează pagina principală a CSS-Tricks pe Facebook – dați-i drumul, tăiați și lipiți într-un browser pentru a vedea rezultatul.

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

După cum am explicat anterior, URL-ul partajat este în mod necesar codificat procentual. De asemenea, observați cum „?” desemnează începutul primului parametru de interogare. Parametrii de interogare următori sunt separați de „&”, după cum se va vedea în scurt timp.

Twitter

Twitter se referă la partajarea unei pagini web prin URL ca fiind o intenție web Tweet – URL-ul care trebuie utilizat este:

https://twitter.com/intent/tweet

În comparație cu Facebook, unde se poate specifica doar pagina web care este partajată, Twitter vă permite să adăugați un text și orice număr de hashtag-uri. Utilizatorii vor avea posibilitatea de a edita toate acestea înainte de a trimite un tweet, dar acest lucru le oferă un avantaj în cazul în care nu se pot deranja. De exemplu, să spunem că doriți să trimiteți pe Twitter următoarele informații:

URL-ul pentru aceasta, cu parametrii de interogare codificați procentual și cu pauze de linie adăugate pentru claritate, este

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

Și asta vă dă:

Veți observa că Twitter preselectează textul, ceea ce permite o editare ușoară de către utilizator. Și, nu uitați, tweet-ul trebuie să fie sub 140 de caractere, așa că cel mai bine este să nu furnizați un text prea lung. Din motive de simplitate, am omis să discut trei parametri mai puțin utilizați, care pot fi găsiți descriși în detaliu în documentația pentru dezvoltatori a Twitter. Acești parametri suplimentari vă permit să specificați numele de utilizator asociat cu tweet-ul, nume de utilizator asociate sugerate și un ID al unui tweet asociat.

LinkedIn

Url-ul de utilizat la partajarea pe LinkedIn este:

https://www.linkedin.com/shareArticle

În total, există cinci parametri disponibili, după cum detaliază acest grafic preluat din documentația LinkedIn Developers:

În plus față de URL-ul paginii web pe care doriți să o partajați, este necesar un alt parametru de interogare numit „mini”. Dar, după cum puteți vedea, valoarea sa nu se schimbă niciodată, așa că îl putem codifica în hardcode în URL. Pentru a demonstra, haideți să partajăm următoarele pe LinkedIn:

Aceasta dă următorul URL – din nou, pauze de linie adăugate pentru claritate:

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

Chiar dacă nu este menționat explicit în documentația lor, dacă parametrul „title” este omis, LinkedIn va prelua acest conținut din tag-ul Open Graph <meta property="og:title"> din pagina partajată. În mod similar, dacă parametrul „summary” este omis, se utilizează tag-ul Open Graph <meta property="og:description">. În ceea ce privește parametrul „source”, nimic în documentație nu specifică modul în care această valoare este utilizată sau afișată atunci când se partajează o pagină web – se pare că poate fi ignorată în siguranță.

Cunoscând toate acestea, dacă pagina web care este partajată are complementul corespunzător de etichete Open Graph, simpla specificare a URL-ului va fi suficientă, deoarece parametrii „title” și „summary” vor fi populați corespunzător.

Punând totul cap la cap

Acum că știm sintaxa care trebuie folosită atunci când partajăm pagini web pe rețelele sociale, cum anume putem implementa acest cod? Poate că cel mai comun mod este pur și simplu listarea unui grup de linkuri de partajare stilizate corespunzător cu CSS:

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

Aducerea lui target="_blank" în tag-ul de ancorare permite ca dialogul de partajare să apară într-o fereastră sau tab nou, ceea ce funcționează bine pe toate dispozitivele, de la desktop la mobil.

Dar codificarea dură a acestor linkuri, cu codificarea procentuală a parametrilor de interogare, poate fi plictisitoare și predispusă la erori. Pentru orice pagină web servită în mod dinamic de un CMS, aceasta ar fi oportunitatea perfectă pentru ca această prelucrare a datelor să fie efectuată pe partea serverului și inserată acolo unde este necesar în HTML.

O altă opțiune este de a folosi Social Media Sharing: HTML Links Generator pe care l-am creat pe CodePen. Acesta vă permite să introduceți oricare sau toți parametrii necesari pe care tocmai i-am trecut în revistă, iar acesta va produce HTML-ul corespunzător pentru a fi inserat în propriul cod.

Vezi Pen Social Media Sharing: HTML Links Generator de Adam Coti (@adamcoti) pe CodePen.

În calitate de dezvoltator web independent care lucrează aproape exclusiv pe front-end, am optat să folosesc funcționalitatea JavaScript/jQuery care, fără personalizare, funcționează ca o soluție la cheie pentru proiectele mele. În acest fel, pot fi sigur că toate linkurile de partajare vor fi gestionate corespunzător, indiferent dacă lucrez la un site web static, dacă personalizez teme WordPress sau dacă predau șabloane pentru a fi integrate într-un CMS.

Acesta este HTML-ul pe care îl folosesc, cu clasele care desemnează serviciul de partajare specific. În JavaScript, funcția setShareLinks(), care atașează evenimente click la butoanele de partajare, este apelată atunci când modelul Document Object Model (DOM) este gata:

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

URL-ul paginii web curente este ușor de obținut prin citirea unei proprietăți a obiectului document. Iar, pentru Twitter, eticheta Open Graph <meta property="og:description"> oferă în mod convenabil conținutul adecvat pentru un tweet implicit.

Acum, la cererea unora dintre clienții mei, lansez URL-ul nou format într-o fereastră secundară (pop-up) de dimensiuni speciale, utilizând window.open(). Pe majoritatea browserelor desktop, această fereastră este poziționată orizontal și vertical, centrată pe ecran. Este interesant faptul că, dacă un utilizator este conectat la contul său de social media, Facebook și LinkedIn redimensionează această fereastră secundară la dimensiunile necesare. Twitter nu o face, așa că folosesc o lățime și o înălțime implicite care îi oferă suficient spațiu real. În ceea ce privește capacitatea de reacție, tabletele și dispozitivele mobile interpretează fereastra secundară ca pe o filă nouă. O demonstrație a acestei funcționalități poate fi găsită pe CodePen.

Vezi Pen Social Media Sharing: Automated Link Creator de Adam Coti (@adamcoti) pe CodePen.

Dar utilizarea unei ferestre pop-up, deși cândva obișnuită, este acum dezaprobată din motive de accesibilitate. O soluție simplă este să setați variabila params la un șir gol în JavaScript-ul de mai sus. Procedând astfel, se lansează URL-ul într-o fereastră sau o filă nouă, în funcție de setările browserului utilizatorului.

Concluzie

Cum spune proverbul macabru, există multe moduri de a jupui o pisică. Tehnica de mai sus este pur și simplu metoda mea preferată. S-ar putea să aveți o metodă mai bună, mai optimizată. Poate folosind atribute de date în HTML (pentru a specifica hashtag-uri, de exemplu) care pot fi citite de JavaScript și adăugate ca parametru de interogare acolo unde este necesar. Sperăm că acest lucru poate servi cel puțin ca inspirație pentru propria dvs. implementare.

.