La diffusione di Social Network e CMS ha portato con se nuove e numerose necessità, soprattutto per quanto riguarda la condivisione sociale dei nostri contenuti. Se da un lato questo aspetto sociale ha permesso un’estensione enorme del potenziale bacino delle utenze, dall’altro ci ha resi vincolati e dipendenti da infrastrutture esterne al nostro sito.
Una problematica che ne consegue è, nella sua semplicità, l’inserimento dei pulsanti di condivisione. Talvolta inserire uno di questi semplicissimi strumenti può davvero risultare complicato.
In questo articolo affronteremo l’inserimento, direttamente nel template WordPress, dei pulsanti di condivisione dei 3 principali social network così da evitare malfunzionamenti causati dai plugin esterni, quanto descritto con un po’ di intuito ed esperienza potrà esser facilmente ripetuto anche per altri CMS e fornitori di servizio.
Facebook Like & Share
Il primo che affronteremo è il più grosso Social Network attualmente sul mercato: Facebook.
Il suo strumento di condivisione principale è il pulsante LIKE (“Mi piace”), pulsante che spesso è il principale colpevole dei più diffusi disservizi su molti siti. Colpa, spesso, dello stesso Facebook che aggiorna spesso i propri sistemi e solo raramente ne ha rese note le modifiche al pubblico.
Per inserire un pulsante Like vi basta recarvi a questo indirizzo:
https://developers.facebook.com/docs/plugins/like-button
Vi troverete davanti questa schermata:
Da questo form vi sarà possibile generare un codice che andremo poi a modificare per permetterne l’inserimento sul nostro sito WordPress. E’ consigliabile mantenersi sul semplice, selezionando il Layout button_count, disattivando “Show Friends’ Faces” ed includendo il pulsante di Share senza doverlo generare nuovamente.
Il risultato che ci verrà fornito cliccando su “Get Code” somiglierà molto a quanto segue
|
1 2 3 4 |
<div id="fb-root"></div> <script>// <![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.3&appId=185563031479995"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // ]]></script> |
ed anche
|
1 |
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div> |
Il secondo di questi codici è quello che andremo realmente a manipolare per adattarsi alle nostre necessità. Il pulsante in questione, se venisse inserito così come fornitoci da facebook, andrebbe ad essere applicato sull’url inserito al momento delle generazione (di default https://developers.facebook.com/docs/plugins/), ma dato che la nostra piattaforma WordPress genera dinamicamente i permalink, dovremo modificarli inserendoci il valore della variabile che conterrà il permalink dell’articolo.
Per fare ciò andremo a chiudere la funzione the_permalink() tra tag php al posto dell’url, in modo tale che al suo posto venga stampato il permalink dell’articolo restituito dalla funzione.
Esempio:
Con Twitter le cose sono più semplici, non c’è alcun generatore da dover interrogare ma una semplice guida che trovate sul sito ufficiale Twitter.com
Twitter non richiede modifiche da parte vostra al sorgente, il permalink viene calcolato automaticamente.
|
1 2 3 |
<a class="twitter-share-button" href="https://twitter.com/share" data-lang="it">Tweet</a><script>// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]></script> |
Google Plus
Per Google+ il discorso è una perfetta miscelatura di entrambi i sistemi. Il social network fornisce sia un comodo form tramite il quale creare il pulsante, sia dei codici già pronti. A nessuno di questi andrà modificato alcunché per riferirsi al permalink. Il codice generico più efficace, asincrono, è il seguente:
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> |
A questo punto non vi resta che aggiungere il codice in questione al vostro template, scaricate i file single.php e header.php dal vostro template ed apritelo con un editor adeguato, Notepad++ o blocco note su Windows, Gedit su Ubuntu, non usate Word processor come OpenOffice o Microsoft Office Word in quanto andrebbero a modificare il codice sorgente.
Il codice varierà da template a template, ma solitamente l’inserimento del primo dei codici di facebook può essere posizionato in qualunque punto del file header.php, quindi vi consigliamo di inserirlo alla fine del sorgente, per quanto riguarda il codice dei 3 pulsanti è sufficiente identificare la stringa di codice <?php comments_template(); ?> o il div che la contiene e farla precedere dal codice rispettando il div.
In conclusione:
Il codice che andrete ad inserire dovrebbe quindi somigliare ad una cosa del genere (sostituendo vostronome con il vostro account twitter):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- PULSANTI DI CONDIVISIONE --> <div class="social-buttons"> <div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"> </div> <a class="twitter-share-button" href="https://twitter.com/share" data-via="vostronome" data-lang="it">Tweet</a> <script>// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]></script><!-- Inserisci questo tag nel punto in cui vuoi che sia visualizzato l'elemento pulsante +1. --> <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300"></div> <!-- Inserisci questo tag dopo l'ultimo tag di pulsante +1. --><script type="text/javascript">// <![CDATA[ window.___gcfg = {lang: 'it'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); // ]]> </script> </div> <!-- FINE PULSANTI DI CONDIVISIONE --> |
Come mai questi problemi?
Per evitare tecniche di forzatura della condivisione, come l’ormai famoso LikeJacking e per uniformare l’aspetto degli stessi, i fornitori del servizio mettono a disposizione degli strumenti per la generazione di quest’ultimi, come ad esempio dei CSS o delle funzionalità che vanno solo richiamate.
Questa metodologia seppur consenta di ottenere numerosi vantaggi, porta con se alcuni svantaggi. Il problema principale si viene a verificare quando ci appoggiamo a dei plugin nei nostri CMS per l’inserimento dei pulsanti di condivisione, perché magari non vogliamo metter mano al codice sorgente del template o perché preferiamo gestire il tutto dal back end.
Purtroppo se la piattaforma finale cambia qualcosa, difficilmente il nostro plugin riuscirà a stare immediatamente al passo e, talvolta, la modifica non solo non sarà segnalata ma non andrà ad invalidare il funzionamento del plugin stesso, con effetti secondari che ad una prima occhiata non saranno osservabili.
Per poter evitare queste problematiche è consigliabile affidarsi sempre ai generatori di codici originali forniti dai vari social network, andando a lavorare “a crudo” sul template, come abbiamo fatto noi, così da evitare side-effect e non temere gli aggiornamenti.
