Il modo più semplice (e performante) di offrire link di condivisione per i social media

L’estate scorsa ho scritto The Essential Meta Tags for Social Media su come gli sviluppatori possono preparare le pagine web per ottimizzare il loro aspetto quando vengono condivise sui social media. Ma che dire della creazione dei link per permettere agli utenti di condividere queste pagine web? Facebook, Twitter e LinkedIn offrono numerosi modi per farlo, alcuni con generatori di pulsanti e altri che richiedono JavaScript esterno. Per evitare tutto questo, però, potete creare i vostri link per condividere le pagine web. E la parte migliore è che è semplice da fare da soli. Ecco come fare.

Concetto di base: Solo un link

Quando si condividono pagine web utilizzando i link, si sta essenzialmente inviando una richiesta GET (cioè cliccando un link) a un URL fornito da ogni servizio di social media. Poi, aggiungendo una serie di coppie nome/valore (parametri di query come ?title=Title) alla fine di questo URL, è possibile specificare l’URL della pagina web che si desidera condividere e, a volte, informazioni aggiuntive.

Ora, alcuni simboli nelle richieste GET noti come “caratteri riservati”, devono essere codificati correttamente in modo da non interferire con le normali funzioni del browser. Questi caratteri sono soggetti a “percent-encoding” – cioè, sono rappresentati nei parametri della query con un “%” seguito da un codice esadecimale di due cifre. Questi sono i caratteri riservati e i loro equivalenti codificati in percentuale.

Nota: Uno spazio può essere rappresentato da “%20” o “+”.

Ovviamente, non c’è bisogno di memorizzare questi codici esadecimali. Ci sono molte risorse che forniscono conversioni (Bing ne ha una integrata nel motore di ricerca) e, come si vedrà presto, JavaScript può anche gestire il lavoro pesante in questo senso. Diamo un’occhiata ad alcuni dei più popolari servizi di social media e impariamo come possiamo condividere pagine web attraverso di loro.

Facebook

Per la loro Guida per gli sviluppatori, Facebook specifica il seguente URL per inviare richieste GET quando si condivide una pagina web:

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

Mentre ci sono quattro parametri di query disponibili, solo due sono richiesti: l’URL della pagina web che si vuole condividere e un App ID, che gli sviluppatori possono ottenere registrandosi su Facebook. Se non avete un App ID, il processo di registrazione non è oneroso, ma non c’è bisogno di preoccuparsi quando esiste una soluzione ancora più semplice.

Il metodo originale di Facebook per condividere le pagine web, senza l’App ID richiesto, non è più menzionato in nessuna della loro documentazione, ma è ancora supportato. Infatti, con innumerevoli siti web che utilizzano questo metodo, non posso immaginare che venga deprecato presto. Questo URL è:

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

L’unico parametro disponibile è “u”, che viene utilizzato per specificare l’URL della pagina web che si desidera condividere. Ecco un esempio che condivide la home page di CSS-Tricks su Facebook – vai avanti, taglia e incolla in un browser per vedere il risultato.

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

Come spiegato precedentemente, l’URL condiviso è necessariamente codificato in percentuale. Inoltre, notate come “?” designa l’inizio del primo parametro della query. I parametri di query successivi sono separati da “&” come si vedrà tra poco.

Twitter

Twitter si riferisce alla condivisione di una pagina web via URL come Tweet Web Intent – l’URL da usare è:

https://twitter.com/intent/tweet

A differenza di Facebook, dove solo la pagina web da condividere può essere specificata, Twitter permette di aggiungere del testo e un numero qualsiasi di hashtag. Gli utenti avranno l’opportunità di modificare tutto questo prima di twittare, ma questo dà loro un vantaggio nel caso in cui non possono essere disturbati. Per esempio, diciamo che vuoi twittare le seguenti informazioni:

L’URL per questo, con i parametri della query codificati in percentuale e le interruzioni di riga aggiunte per chiarezza, è:

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

E questo ti dà:

Si noterà che Twitter preseleziona il testo, il che permette una facile modifica da parte dell’utente. E, ricordate, il tweet deve essere sotto i 140 caratteri, quindi meglio non fornire una copia troppo lunga. Nell’interesse della semplicità, ho omesso di discutere tre parametri meno utilizzati, che possono essere trovati descritti in dettaglio nella documentazione per gli sviluppatori di Twitter. Questi parametri aggiuntivi consentono di specificare il nome utente associato al tweet, i nomi utente suggeriti correlati e un ID di un tweet correlato.

LinkedIn

L’URL da utilizzare quando si condivide su LinkedIn è:

https://www.linkedin.com/shareArticle

In totale, ci sono cinque parametri disponibili come dettagliato da questo grafico tratto dalla documentazione degli sviluppatori di LinkedIn:

Oltre all’URL della pagina web che vuoi condividere, è richiesto un altro parametro di query chiamato “mini”. Ma, come potete vedere, il suo valore non cambia mai, quindi possiamo inserirlo nell’URL. Per dimostrarlo, condividiamo quanto segue su LinkedIn:

Questo dà il seguente URL – di nuovo, interruzioni di riga aggiunte per chiarezza:

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

Sebbene non sia menzionato esplicitamente nella loro documentazione, se il parametro “title” è omesso, LinkedIn prenderà questo contenuto dal tag Open Graph <meta property="og:title"> della pagina condivisa. Allo stesso modo, se il parametro “summary” viene omesso, viene utilizzato il tag Open Graph <meta property="og:description">. Per quanto riguarda il parametro “source”, nulla nella documentazione specifica come questo valore viene utilizzato o visualizzato quando si condivide una pagina web – sembra che possa essere tranquillamente ignorato.

Sapendo tutto questo, se la pagina web da condividere ha il giusto complemento di tag Open Graph, sarà sufficiente specificare l’URL perché i parametri “title” e “summary” saranno adeguatamente popolati.

Mettere tutto insieme

Ora che conosciamo la sintassi da usare quando si condividono pagine web sui social media, come possiamo esattamente implementare questo codice? Forse il modo più comune è semplicemente elencare un gruppo di link di condivisione stilizzati in modo appropriato con i 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>

L’aggiunta di target="_blank" nel tag di ancoraggio permette al dialogo di condivisione di apparire in una nuova finestra o scheda, che funziona bene su tutti i dispositivi, dal desktop al mobile.

Ma l’hard-coding di questi link, con la codifica percentuale dei parametri di query, può essere noioso e soggetto a errori. Per qualsiasi pagina web servita dinamicamente da un CMS, questa sarebbe l’opportunità perfetta per avere questa elaborazione dei dati eseguita sul lato server e inserita dove necessario nell’HTML.

Un’altra opzione è quella di utilizzare il Social Media Sharing: HTML Links Generator che ho creato su CodePen. Questo ti permette di inserire qualsiasi o tutti i parametri necessari che abbiamo appena esaminato, e produrrà l’HTML appropriato da inserire nel tuo codice.

Vedi il Pen Social Media Sharing: HTML Links Generator di Adam Coti (@adamcoti) su CodePen.

Come sviluppatore web freelance che lavora quasi esclusivamente sul front-end, ho scelto di utilizzare funzionalità JavaScript/jQuery che, senza personalizzazione, funziona come una soluzione chiavi in mano per i miei progetti. In questo modo, posso essere sicuro che tutti i link di condivisione saranno gestiti correttamente, sia che io stia lavorando su un sito web statico, personalizzando temi WordPress, o consegnando modelli da integrare in un CMS.

Questo è l’HTML che uso, con classi che designano il particolare servizio di condivisione. Nel JavaScript, la funzione setShareLinks(), che attacca gli eventi click ai pulsanti di condivisione, è chiamata quando il Document Object Model (DOM) è pronto:

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

L’URL della pagina web corrente è facilmente acquisito leggendo una proprietà dell’oggetto document. E, per Twitter, il tag Open Graph <meta property="og:description"> fornisce convenientemente il contenuto appropriato per un tweet predefinito.

Ora, su richiesta di alcuni dei miei clienti, lancio l’URL appena formato in una finestra secondaria (pop-up) di dimensioni speciali utilizzando window.open(). Sulla maggior parte dei browser desktop, questa finestra è posizionata orizzontalmente e verticalmente centrata sullo schermo. È interessante notare che se un utente è connesso al suo account di social media, Facebook e LinkedIn ridimensionano questa finestra secondaria alle dimensioni necessarie. Twitter non lo fa, quindi uso una larghezza e un’altezza predefinite che gli forniscono abbastanza spazio. Per quanto riguarda la reattività, i tablet e i dispositivi mobili interpretano la finestra secondaria come una nuova scheda. Una demo di questa funzionalità può essere trovata su CodePen.

Vedi la penna Social Media Sharing: Automated Link Creator di Adam Coti (@adamcoti) su CodePen.

Ma l’uso di una finestra pop-up, anche se una volta era comune, è ora disapprovato per motivi di accessibilità. Una soluzione semplice è quella di impostare la variabile params su una stringa vuota nel JavaScript di cui sopra. Così facendo si lancia l’URL in una nuova finestra o scheda a seconda delle impostazioni del browser dell’utente.

Conclusione

Come dice il macabro detto, ci sono molti modi per spellare un gatto. La tecnica di cui sopra è semplicemente il mio metodo preferito. Potreste avere un modo migliore, più ottimizzato. Forse usando attributi di dati nell’HTML (per specificare gli hashtag, per esempio) che possono essere letti da JavaScript e aggiunti come parametro della query dove necessario. Speriamo che questo possa almeno servire da ispirazione per la vostra implementazione.