Social bookmarking su WordPress.com

Le restrizioni di norma per i blog ospitati sulla piattaforma WordPress.com rendono l’inserimento di link per il social bookmarking a fine post un’operazione manuale e quindi, in quanto tale, soggetta ad errori e comunque scomoda. In analogia al sistema per generare il codice per le tabelle di cui ho parlato nel post Tabelle su WordPress.com anche questa operazione può essere automatizzata con l’aiuto di una bookmarklet.

L’idea non è nuova, un esempio “prominente” dell’utilizzo di bookmarklet a questo proposito (e anche la mia fonte d’ispirazione) è in questo post di Lorelle: Social Bookmarking Submit Links on WordPress Blogs. Io ho cercato di aumentare il grado di automazione a spese della portabilità: l’esempio che vi propongo in questo post è utilizzabile esclusivamente su blog WordPress.com e solo in modalità codice.

In questo caso, però, la cosa non è così semplice come generare una tabella: i link ai servizi di social bookmarking, infatti, richiedono solitamente due informazioni: il titolo del post ed il permalink (il link permanente al post). La prima, il titolo, è quello che viene inserito nel campo apposito al momento di scrivere il post; la seconda è una stringa che viene generata dal sistema tenendo conto della data di pubblicazione del post e del cosiddetto slug dell’articolo.
Quest’ultimo può essere inserito a piacere nel campo “Slug dell’articolo” e di solito è il titolo del post senza caratteri speciali (accenti, apostrofi e così via) e con trattini al posto degli spazi (vedi immagine).

Titolo del post e slug sono le uniche due informazioni che occorrono per inserire link ai servizi di social bookmarking che preferite utilizzando la bookmarklet che vi propongo qui; per utilizzarla copiate questo codice javascript (utilizzando il link “copy to clipboard”):

javascript:(function(){var oggi=new Date();var anno=oggi.getFullYear();var mese=oggi.getMonth()+1;if (mese < 10){mese='0'+mese};var giorno=oggi.getDate();if (giorno < 10){giorno='0'+giorno};var tkns=location.href.split('/');var bhome='';for(var i=0;i<3;i++){bhome+=(tkns[i]+'/');}var slug=prompt('Slug del post:','');var perml=encodeURI(bhome+anno+'/'+mese+'/'+giorno+'/'+slug+'/');var titolo=encodeURI(prompt('Titolo del post',''));var sep='&nbsp;';var oKNotizie='<a href="http://oknotizie.alice.it/post.html.php?url='+perml+'&title='+titolo+'" title="OkNotizie!"><img src="http://oknotizie.alice.it/favicon.ico" height="16" width="16" alt="[OkNotizie]" /></a>';var diggIta='<a href="http://www.diggita.it/submit.php?url='+perml+'&title='+titolo+'" title="diggita!"><img src="http://www.diggita.it/favicon.ico" height="16" width="16" alt="[diggita]" /></a>';var segnalo='<a href="http://segnalo.alice.it/post.html.php?url='+perml+'&title='+titolo+'" title="Segnalo!"><img src="http://segnalo.alice.it/favicon.ico" height="16" width="16" alt="[Segnalo]" /></a>';var faiInfo='<a href="http://fai.informazione.it/submit.aspx?url='+perml+'&title='+titolo+'" title="fai informazione!"><img src="http://fai.informazione.it/favicon.ico" height="16" width="16" alt="[informazione]" /></a>';var techNotizie='<a href="http://www.technotizie.it/posta_ok?action=f2&url='+perml+'&title='+titolo+'" title="segnala su technotizie.it"><img src="http://www.technotizie.it/icotech2.ico" height="16" width="16" alt="[technotizie]" /></a>';var wikio='<a href="http://www.wikio.it/vote?url='+perml+'&title='+titolo+'" title="vota questo post su wikio"><img src="http://www.wikio.it/favicon.ico" height="16" width="16" alt="[wikio]" /></a>';var seoTribu='<a href="http://www.seotribu.com/submit.php?url='+perml+'&title='+titolo+'" title="SEOTribu"><img src="http://www.seotribu.com/favicon.ico" height="16" width="16" alt="[SEOTribu]" /></a>';var technorati='<a href="http://technorati.com/faves?add='+perml+'" title="Add to my Technorati Favorites"><img src="http://technorati.com/favicon.ico" width="16" height="16" alt="[Technorati]" /></a>';var yahooMyWeb='<a href="http://it.myweb2.search.yahoo.com/myresults/bookmarklet?u='+perml+'&t='+titolo+'" title="YahooMyWeb"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/myweb_favicon.ico" width="16" height="16" alt="[YahooMyWeb]" /></a>';document.getElementById('content').value+=(diggIta+sep+faiInfo+sep+oKNotizie+sep+segnalo+sep+seoTribu+sep+techNotizie+sep+wikio+sep+yahooMyWeb+sep+technorati);}())

ed inseritelo così com’è (senza spazi aggiuntivi) nel campo “indirizzo” di un nuovo bookmark nel vostro browser.

La bookmarklet “così com’è” provvede i link ai servizi che vedete in fondo a questo post e probabilmente non funzionerà con IE, in quanto la lunghezza del codice è superiore al limite massimo supportato da Internet Explorer. Personalmente l’ho testata con successo con i seguenti browser: Firefox 2.0.0.12, Opera 9.25, Safari 3 e Camino 1.5.5 su Leopard.

La logica secondo la quale è “costruita” dovrebbe facilitare la personalizzazione della lista dei servizi: ogni servizio, infatti, è definito in una variabile omonima. Le variabili vengono assemblate in una stringa nella parte finale della bookmarklet:

(diggIta+sep+faiInfo+sep+oKNotizie+sep+segnalo+sep+seoTribu
+sep+techNotizie+sep+wikio+sep+yahooMyWeb+sep+technorati)

se non si desidera, per esempio, un link a seoTribù, basterà cancellare il pezzettino “+sep+seoTribu” dalla riga di codice mostrata sopra.
La variabile “sep” è un separatore, al momento definita come uno spazio; volendo utilizzare un altro tipo di separazione, basterà inserire il codice html desiderato tra gli apici nella definizione della variabile:

var sep=’ ’;

Se non si desidera una separazione delle icone, basta cancellare tutti i “+sep” nella stringa finale mostrata sopra.

Aggiungere servizi diversi, invece, è un’operazione più complessa, in quanto bisogna “costruire” il codice html in base alla sintassi richiesta dal servizio, specificare una variabile apposta ed aggiungerla alla stringa finale. In caso di interesse ne possiamo discutere nei commenti o in un post apposito.

Il risultato di tutto questo lavoro lo potete vedere in fondo a questo post.