Creazione di bottoni Twitter personalizzati per condividere pagine web

Twitter non ha certo bisogno di presentazioni, è infatti uno dei social network più celebri ed utilizzati; dopo un breve periodo di flessione infatti è tornato a crescere, sia per quando riguarda il volume di “tweet” prodotti che per numero di iscritti. In questo articolo vedremo come costruire bottoni personalizzati per condividere pagine web.

Una soluzione “facile & veloce”, ma non molto leggera

Creare un pulsante per condividere le pagine su Twitter è davvero molto semplice, Twitter stesso infatti mette a disposizione uno strumento apposito per la creazione facilitata del codice HTML da incorporare nel proprio sito web. Questo strumento ufficiale è molto comodo, perché ci mette a disposizione in un attimo tutte le funzionalità di cui abbiamo bisogno: URL della pagina in automatico, menzioni, hashtag. Purtroppo però appesantisce la pagina, per diversi motivi:

inserisce del codice Javascript;
il Javascript stesso fa partire una richiesta HTTP per scaricare il file widget.js. Questo file, nonostante sia minimizzato, occupa quasi 50kb ed è ricco di funzioni: un po’ troppo per un semplice link!
il pulsante che viene generato è un <iframe>, questo vuol dire che al suo interno c’è una pagina HTML completa. Ciò infierisce ulteriormente sul “peso” della pagina, soprattutto per quanto riguarda l’occupazione di RAM nel computer dell’utente.

Generare il link

Se esaminiamo la pagina Twitter Buttons con uno strumento di sviluppo (come Firebug o il debugger incluso in Google Chrome) ci accorgiamo che il bottone di condivisione non è altro che un normalissimo link, stilizzato opportunamente e ri-generato ogni volta che cambiamo uno dei parametri del form.

È quindi possibile generare da sè questo link, soprattutto se il nostro sito è composto da pagine dinamiche: PHP, ma anche Content Management System (CMS) come Drupal, Joomla, WordPress, eccetera. Sul sito dedicato agli sviluppatori c’è la documentazione specifica per creare i Tweet Buttons, contiene la descrizione di tutti i parametri da inviare per condividere pagine su questa piattaforma. Ecco un breve riassunto con i parametri più importanti:

la URL da chiamare deve essere https://twitter.com/share;
parametro url: è la URL della pagina da condividere. Per risparmiare spazio nel tweet è possibile accorciarla tramite uno dei molti servizi di URL shortening;
parametro counturl: se avete utilizzato lo URL shortening, conviene inserire in questo parametro il link esteso della pagina, in questo modo la piattaforma attribuirà correttamente i conteggi;
parametro via: è il twitter name a cui attribuire il tweet;
parametro text: testo del tweet;
parametro related: con questo parametro è possibile proporre all’utente alcuni account twitter da seguire (follow);
parametro hashtags: lista di hashtag correlati.

Armati di questa conoscenza, è stato facile ricreare un Twitter Link Builder semplicemente utilizzando HTML e jQuery:

Ecco il codice sorgente della pagina:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Twitter Link Builder</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
  function reset() {
    $("#form").each(function() {
      this.reset();
    });
    $('#output').html('<em>clicca su "Crea link" per generare la URL del bottone</em>');
  }

  function create_twitter_link() {

    link = 'https://twitter.com/share?' + $('#form').serialize();
    output = $('#output');
    output.empty();

    anchor = document.createElement('a');
    anchor.setAttribute('target', '_blank');
    anchor.setAttribute('href', link);
    anchor.appendChild(document.createTextNode(link));

    output.append(anchor);
  }

  $(document).ready(function() {

    reset();

    $("#bt_reset").click(function(e) {
      e.preventDefault();
      reset();
    });

    $("#bt_create").click(function(e) {
      e.preventDefault();
      create_twitter_link();
    });
  });
 </script>
 <style type="text/css">
body {
  color: #333;
  font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
  font-size:90%;
}
 </style>
</head>
<body>

<h1>Twitter Link Builder</h1>

<form id="form" action="https://twitter.com/share">

  <label for="url">url</label><br />
  <input id="url" name="url" type="text" />
  <span class="input_help">#</span><br />

  <label for="via">via</label><br />
  <input id="via" name="via" type="text" />
  <span class="input_help">#</span><br />

  <label for="text">text</label><br />
  <input id="text" name="text" type="text" />
  <span class="input_help">#</span><br />

  <label for="related">related</label><br />
  <input id="related" name="related" type="text" />
  <span class="input_help">#</span><br />

  <label for="counturl">counturl</label><br />
  <input id="counturl" name="counturl" type="text" />
  <span class="input_help">#</span><br />

  <label for="hashtags">hashtags</label><br />
  <input id="hashtags" name="hashtags" type="text" />
  <span class="input_help">#</span><br />

  <button id="bt_reset">Reset</button>
  <button id="bt_create">Crea link</button>
</form>

<h3>Link risultante</h3>
<div id="output">
</div>

</body>
</html>

Una soluzione “facile & veloce”, ma non molto leggera

Generare il link

Links