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).
Slug del post
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=’&nbsp;’;

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.

[diggita] [informazione] [OkNotizie] [Segnalo] [SEOTribu] [technotizie] [wikio] [YahooMyWeb] [Technorati]

31 Risposte a “Social bookmarking su WordPress.com”

  1. Illuminato Dice:

    Salve,
    io inizialmente usavo questo programma gratuito http://www.socialbookmarksmanager.com/index.shtml , ora però ho realizzato un file testo col bloc note di windows, e faccio trova e sostituisci. Con pochi click ho fatto tutto, copio e incollo nel post. prima di chiudere il file non salvo le modifiche, così ho sempre pronto il file originale. Per il titolo gli do questo comando: trova =9 e sostituisci con =esempio…; mentre per l’url faccio così: trova =http e sostituisci con =http://… Potete vedere nel mio blog.

  2. Isadora Dice:

    Sì, Illuminato, certo. Io trovo più comoda la bookmarklet, ma ognuno è libero di fare come crede.

  3. Illuminato Dice:

    Colgo l’occasione per ringraziarti perché nel tuo blog ho trovato idee utili, ad esempio diversi codici come quello per il form, il nextpage, e i riferimenti in basso alla pagina.

  4. Isadora Dice:

    Lieta di esserti stata utile!

  5. Antonio Vergara Dice:

    sinceramente io uso windows live writer per postare. poi ho installato il plugin social bookmar e funziona benissimo. unico difetto non ci sono i servizi italiani.

  6. Isadora Dice:

    Ragazzi, io non sto facendo un sondaggio sui metodi disponibili, ma suggerendo una delle tante possibilità, secondo me la più comoda nei limiti delle restrizioni, ma sono al corrente di diversi metodi, che però, per svariate ragioni, non mi convincono e non mi sentirei quindi di consigliare, sia per la scarsa praticità d’uso (come il copiaincolla o link a pagine esterne) che per il fatto che quasi ovunque manchino i servizi di aggregazione in lingua italiana, che sono quelli del mio target.

  7. Social Bookmarking « Alberto La Rocca Dice:

    [...] Febbraio 27, 2008 di Alberto La Rocca Qui in basso potete trovare i link ai siti di social bookmarking più conosciuti, per segnalare il blog, realizzati grazie alle indicazioni di Isadora. [...]

  8. Alberto La Rocca Dice:

    Ciao Isadora, io ho provato a seguire le tue istruzioni, ed ho ottenuto un risultato che puoi vedere nel mio blog, però ho dovuto cancellare alcune voci che continuavano ad apparire dopo la pubblicazione.
    Lo so che sono poco chiaro, non sono un esperto di codici, però credo che il risultato sia corretto.
    Magari può dipendere dal tipo di schema del blog?
    Comunque grazie mille per le tue continua informazioni.
    Ho ripreso a scrivere sul blog da poco ed i tuoi consigli mi sono venuti utilissimi!
    A presto, Alberto.

  9. Isadora Dice:

    Alberto, non so che cosa hai cambiato o cancellato, ma nel tuo risultato url del post e titolo non sono stati inseriti, quindi non ha funzionato. Non ci sono restrizioni od incompatibilità legate al tema, ma il browser è fondamentale. Tu cosa usi?
    Che voci apparivano dopo la pubblicazione?

  10. Isadora Dice:

    Ci ho pensato un po’… non è che hai copiaincollato il codice della bookmarklet nel post? 8-O

  11. Alberto Dice:

    Allora ricapitolando, a casa uso Firefox oppure Flock, al lavoro IE6, di conseguenza ciò che compariva doveva essere causa di IE6.
    Visto che non ho molto tempo per capire bene come funziona il tutto preferisco rimuovere il codice.
    No, non l’ho copiato nel post!
    Sono sicuro di aver seguito tutte le tue indicazioni!!!
    Comunque ci riproverò!
    Grazie ancora!
    A presto,
    Alberto.

  12. Alberto La Rocca Dice:

    Ciao Isadora, forse ho capito dove sbagliavo e forse sono riuscito anche a crearne uno correttamente.
    Sono troppo invadente se ti chiedo ancora di darci un occhiata?
    Grazie mille e ciao.

  13. Isadora Dice:

    Alberto, perfetto! Purtroppo IE6 ha un limite di 508 (!) caratteri per la lunghezza delle bookmarklet, quindi questa è definitivamente troppo lunga. Magari condensando il codice ancora un po’ si potrebbero mettere due o tre servizi…
    Grazie del feedback e se hai bisogno di una mano ne possiamo anche parlare per mail.

  14. Alberto Dice:

    Ecco quello che cerco, dei servizi per rendere interessante i post che scrivo!
    Ti contatterò sicuramente
    E grazie ancora per i tuoi consigli!
    A presto,
    Alberto.

  15. nikima82 Dice:

    Mi sfugge una cosa (magari perchè sono le 23.15 e sono rinco….), qual’è il codice che devo mettere nel mio post per vedere le icone?

  16. Isadora Dice:

    Non devi mettere nessun codice, devi fare un bookmark con il codice di cui sopra al posto dell’indirizzo. Quando clicchi sul bookmark (che sarebbe poi una bookmarklet) ti chiede nome del post e slug, tu li inserisci e lei ti crea tutto il codice bell’e pronto in fondo al post.

  17. nikima82 Dice:

    Ok, metto il codice nella casella dell’indirizzo, mi chiede slug e post, li inserisco ma non ottengo nulla!!
    Uso Firefox

  18. Isadora Dice:

    nikima, sei in modalità “codice” dell’editor? Qui c’è uno screenshot:
    Tabelle su WordPress.com

  19. giorgio1977 Dice:

    ciao Isadora,

    scusami se “rompo” … ma ho
    inserito così com’è (senza spazi aggiuntivi) nel campo “indirizzo” di un nuovo bookmark nel vostro browser.
    poi clicco sul nuovo segnalibro e mi appare una finestra dove mi chiedo lo slug e poi il titolo del post (e non il permalink come mi aspettavo). Una volta inseriti questi, non succede nulla… mi dovrei aspettare una riga di codice da copiare e incollare nel codice dell’articolo, vero?

  20. Isadora Dice:

    giorgio, be’, lo slug viene usato per generare automaticamente il permalink, ma se non ti piace puoi modificare il codice come preferisci. Se lavori in modalità codice come descritto sul post per le tabelle vedrai che t’inserirà il codice automaticamente nella finestrella dell’editor.

  21. nikima82 Dice:

    Si, sono in modalità codice…ma non fa niente…..sarà stordito il mio pc!!

  22. Isadora Dice:

    nikima, che browser usi? Hai cambiato qualcosa nel codice? Se vuoi testo da copiaincollare a mano basta che cambi
    document.getElementById(‘content’).value+=
    in
    prompt=(‘copia da qui:’, ‘diggIta+e così via’)

  23. nikima82 Dice:

    RISOLTO!!!
    Sono stato pirla io!!!
    Per incollare il codice nella barra indirizzi aprivo una nuova scheda….per questo non mi faceva niente!
    Scusa se ti ha fatto perdere tempo!

  24. Isadora Dice:

    Di nulla, mi fa piacere che ora funzioni!

  25. giorgio1977 Dice:

    anche io ho pirlato…
    bisogna fare tutto nella pagina (versione codice) del post

    grazie Isa, quanta pazienza hai !!!!!!!!!!!!!!

  26. Isadora Dice:

    Giorgio, mah, non so se sono così paziente come dici tu… :-) mi fa piacere che sia andato tutto a buon fine, ma a quanto sembra il post non è abbastanza esplicativo e questo mi preoccupa.

  27. odiamore Dice:

    Grazie, questo qui funziona benissimo. Ho un po’ di problemi, invece, con il bookmarklet per spedire il post via mail – ma non ci ho ancora perso abbastanza tempo, probabilmente ;)
    Utilissime segnalazioni, come sempre :)

  28. Isadora Dice:

    Che problema? Hai attivato l’opzione su feedburner? Grazie del complimento e fammi sapere se hai bisogno d’aiuto.

  29. MondoFree Dice:

    Salve: Io ho creato un servizio che permette di fare qualcosa di molto simile ma in maniera del tutto automatica. Maggiori info le trovare qui: http://mondolibero.wordpress.com/2008/02/15/condividere-post-articolo-social-network-wordpress-com/

    Il servizio lo trovate qui: http://www.galileonews.it/Condividi/condividi.php

  30. Isadora Dice:

    Ciao, conosco il tuo servizio, ma fa esattamente quello che io non voglio, ovvero porta il lettore su una pagina esterna per poi fargli scegliere su quale servizio segnalare il post in questione. Troppi clic, per i miei gusti, il che di solito ha come conseguenza che il lettore lasci perdere e non segnali nulla.

  31. xxiamfreexx Dice:

    io non so fare niente di tutto ciò :( ho internet explorer… non sono capace neanche di usare il sito addthis…non riesco a capire dove devo inserire i codici…


Lascia un commento