Twitter mette a disposizione degli sviluppatori un'utile guida sulla creazione e la personalizzazione di un bottone per condividere contenuti su Twitter. Ispirato da questa guida, ho deciso di implementare un semplicissimo plugin per jQuery per la creazione di questo tipo di bottoni.
Gli URL di Twitter
Twitter permette la condivisione di contenuti tramite una struttura di URL i cui parametri andranno a popolare il tweet con cui condivideremo tali contenuti. I parametri più importanti sono:
- URL di base: http://twitter.com/share?
- url: L'URL della risorsa da condividere.
- text: Il contenuto testuale del tweet con cui condividiamo la risorsa (per impostazione predefinita è il titolo della pagina).
- via: Il nome utente su Twitter, se presente, dell'autore della risorsa.
Il plugin jQuery
Il plugin è semplicissimo, in quanto si limita a creare un link HTML usando la concatenazione di stringhe:
(function($) {
$.fn.tweetButton = function(options) {
var that = this;
var settings = {
url: location.href,
via: 'gabromanato',
text: document.title,
linkText: 'Tweet',
linkClass: 'twitter'
};
options = $.extend(settings, options);
return that.each(function() {
var html = '<a class="' + options.linkClass + '"';
html += ' href="http://twitter.com/share?' + 'url=' +
encodeURIComponent(options.url) + '&via=' +
options.via + '&text=' + options.text + '">' + options.linkText + '</a>';
that.html(html);
});
};
})(jQuery);
Per impostazione predefinita, il plugin utilizza l'URL della pagina corrente e il suo titolo per impostare i parametri url e text. Inoltre il parametro url viene passato alla funzione encodeURIComponent() per poter essere convertito in un formato compatibile con lo standard degli URL.
Questo plugin non ha l'opzione del conteggio dei tweet. Per avere quest'opzione occorre usare le API di Twitter tramite i suoi widget. Potete visionare l'esempio finale in questa pagina.