Aldolat.it — Post con tag Twitter

Simple Twitter Connect

aldolat@gmail.com (Aldo Latino) — Fri, 07 May 2010 10:29:37 +0000

Ho appena installato nel blog un interessante plugin di @ottodestruct che porta una buona integrazione fra Twitter e WordPress. L’ho conosciuto per caso in questi giorni e, conoscendo lo sviluppatore (profondo conoscitore di WordPress nonché moderatore del forum), immaginavo che fosse di ottima qualità e così è stato. Visto che la mia presenza online passa da Twitter come collettore generale, questo plugin giunge a fagiuolo.

Simple Twitter Connect vi consente di:

collegare il vostro blog come applicazione su Twitter;
permettere ai lettori di commentare col proprio profilo Twitter;
inserire nella sidebar attraverso i widgets o manualmente (per chi non li usa) un pulsante per collegare l’account del lettore all’applicazione-blog;
trasformare in collegamenti le citazioni dei nomi di altri utenti Twitter, come @aldolat, aggiungendo anche l’hovercard;
integrare il login di Twitter con il sistema di autenticazione di WordPress;
twittare i nuovi post sia automaticamente che manualmente;
inserire un pulsante TweetMeme.

Tutte queste funzioni sono separate e possono essere attivate singolarmente a seconda di quelle che si vogliono usare. In questo blog sono attive tutte tranne la 5 e la 7, che non ho ancora provato.

L'articolo Simple Twitter Connect è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Tre pulsanti utility per i vostri post

aldolat@gmail.com (Aldo Latino) — Tue, 02 Mar 2010 05:00:14 +0000

Una delle ultime aggiunte che ho fatto al mio tema riguarda i pulsanti nella barra laterale sinistra, che accompagna ogni articolo: tre pulsanti (di cui uno visibile solo quando si guarda la pagina del post singolo) relativi a Delicious, Twitter e la stampa della pagina o il suo scaricamento in PDF o l’invio tramite email. Per aggiungerli non ho usato plugin perché questi spesso impongono una posizione in una determinata zona, mentre io preferisco inserirlo in quella piccola sidebar. E poi, comunque, presentano un codice molto più lungo di quello che ho usato io. Vediamo come ho fatto, pulsante per pulsante.

Per ognuno di essi ho creato una funzione specifica. Le tre funzioni potrebbero anche essere riunite assieme, ma probabilmente lo farò in seguito, visto che sono nate in tempi diversi. Ovviamente le tre funzioni sono separate l’una dall’altra e quindi utilizzabili per conto proprio.

Delicious

Tra i suoi strumenti, Delicious propone un pezzo di codice in JavaScript per conservare nei segnalibri la pagina che si sta visualizzando. Quel codice, però, non ha le & escaped, per cui il codice non viene validato dal W3C. Approfittando di ciò, ho incorniciato il codice in una semplice funzione richiamabile in modo pulito nel tema.

La funzione per Delicious

Nel functions.php del tema ho inserito:

1// Genera il pulsante Archivialo su Delicious
2function saveToDelicious() {
3    global $wp_query;
4    $stD = '<p><a class="save-delicious" title="Archivialo su Delicious" href="http://delicious.com/save" onclick="window.open(\'http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=\'+encodeURIComponent(\''.get_permalink($wp_query->post->ID).'\')+\'&amp;title=\'+encodeURIComponent(\''.get_the_title().'\'),\'delicious\', \'toolbar=no,width=550,height=550\'); return false;">';
5    $stD .= 'Archivialo su Delicious</a></p>';
6    echo $stD;
7}

Il CSS per Delicious

Questa funzione genera un elemento p con una sua classe e all’interno l’anchor col testo. Con un paio di stili CSS l’ho mutato in pulsante sensibile all’hover del mouse e ho usato uno sprite apposito. Questi gli stili:

.save-delicious {
    background: transparent url('images/delicious-twitter-print.png') no-repeat 0 0;
    display: block;
    height: 21px;
    text-indent: -9999px;
    width: 65px
}

.save-delicious:hover {
    background-position: 0 -21px;
}

Questi due stili faranno sparire il testo e lo sostituiranno con l’immagine del pulsante: l’effetto è nella sidebar di sinistra. Lo sprite, realizzato in Inkscape e utilizzabile liberamente, è il seguente: ~~Sprite pulsanti utility~~

Il richiamo della funzione per Delicious

Nel template del tema, ho poi inserito i pulsanti richiamando la funzione nei punti di interesse così:

if ( function_exists( 'saveToDelicious' ) ) {
    saveToDelicious();
}

Twitter

Anche per Twitter ho seguito un percorso simile, adattando però quanto scrissi tempo fa. Non mi dilungo e vi indico direttamente i punti.

La funzione per Twitter

Ho inserito nel functions.php:

 1// Genera l'HTML per un pulsante Send to Twitter
 2function sendToTwitter() {
 3    global $wp_query;
 4    $mynick = 'mio-nick';
 5    $fulltitle = get_the_title($wp_query->post->ID);
 6    if(function_exists('get_shortlink')) {
 7        $myshortlink = get_shortlink($wp_query->post->ID);
 8    } else {
 9        $myshortlink = get_bloginfo('url').'/?p='.$wp_query->post->ID;
10    }
11    $maxchars = 140-strlen($mynick)-strlen($myshortlink)-9; // 140 = max Twitter chars; 9 = RT + @ + 3 spaces + ...
12    if(strlen($fulltitle) > $maxchars) {
13        $shorttitle = substr($fulltitle, 0, $maxchars).'...';
14    } else {
15        $shorttitle = $fulltitle;
16    }
17    $send2twitter = '<p><a class="send-twitter" title="Condividilo su Twitter" href="http://twitter.com/home?status=RT @'.$mynick.' '.$shorttitle.' '.$myshortlink.'">';
18    $send2twitter .= 'Condividilo su Twitter</a></p>';
19    echo $send2twitter;
20}

Quando si fa clic sul pulsante, la funzione porta alla pagina di Twitter e riempie il campo del tweet con il titolo del post, il link e una citazione del nick dell’autore. La funzione, poi, calcola automaticamente, in base alla lunghezza del nickname, quanto debba essere lungo a sua volta il titolo: se eccede il limite massimo calcolato, lo tronca, aggiungendo tre puntini di sospensione.

L’unica cosa da cambiare prima di salvare è alla riga 4 il nome mio-nick con quello che vi identifica su Twitter.

Il CSS per Twitter

Ecco gli stili CSS usati, molto simili al precedente:

.send-twitter {
    background: transparent url('images/delicious-twitter-print.png') no-repeat 0 -42px;
    display: block;
    height: 21px;
    text-indent: -9999px;
    width: 65px;
}

.send-twitter:hover {
    background-position: 0 -63px;
}

Il richiamo della funzione per Twitter

Questo il modo per richiamarla in safe mode, cioè usando — anche in questo caso — una condizione che verifichi la sua esistenza:

if( function_exists( 'sendToTwitter' ) ) {
    sendToTwitter();
}

Printfriendly

Questo comodo servizio offre la stampa dell’articolo in versione ottimizzata e modificabile dall’utente, il file in PDF dell’articolo e qualcos’altro ancora. Esiste un plugin ufficiale per questo scopo e l’ho utilizzato per parecchio ma, nata l’esigenza di spostarlo nella sidebar di sinistra, ho preferito adattarlo alle mutate condizioni. In più ho ottenuto l’eliminazione di numerose righe di codice.

La funzione per Printfriendly

Eccola, semplicissima e adattata all’uopo: 😀

1// Genera il pulsante Print/PDF con link a printfriendly.com
2function print_pdf_show_link() {
3    $outputPf  = '<p><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script>';
4    $outputPf .= '<a class="print-pdf" title="Stampa una versione ottimizzata di questa pagina" href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;">';
5    $outputPf .= 'Stampa / PDF</a></p>';
6    echo $outputPf;
7}

Il CSS per Printfriendly

Questi gli stili:

.print-pdf {
    background: transparent url('images/delicious-twitter-print.png') no-repeat 0 -84px;
    display: block;
    height: 21px;
    text-indent: -9999px;
    width: 90px;
}

.print-pdf:hover {
    background-position: 0 -105px;
}

Il richiamo della funzione per Printfriendly

Ed infine il richiamo nel template:

if ( function_exists( 'print_pdf_show_link' ) ) {
    print_pdf_show_link();
}

L'articolo Tre pulsanti utility per i vostri post è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Social Network: la struttura della mia rete di feed RSS

aldolat@gmail.com (Aldo Latino) — Fri, 10 Jul 2009 10:19:24 +0000

Leggevo questa mattina un interessante (come di consueto) articolo di Francesco Gavello sul metodo e sui motivi per implementare un sideblog nel proprio diario online, dal titolo “Come (ma Soprattutto Perché) Implementare un Sideblog – 1ª parte”. Nell’articolo l’autore invita ad aggiungere dei mini contenuti aggiuntivi di supporto ai post del blog, che richiamino in modo succinto i temi già trattati più diffusamente nel blog, anche se non necessariamente.

Da tempo volevo scrivere qualcosa di vicino a questo argomento e Francesco col suo post mi ha dato lo stimolo a farlo: vediamo in che modo mi sono organizzato.

I contenuti

Il mio approccio alla questione del sideblog, come si saranno accorti coloro che sfogliano Ubuntu block notes, è stato quello di aggiungere nella mia barra laterale i feed dei servizi più importanti che uso. Fare ciò ha significato snellire la sidebar da tutti i widget per me inutili e riempirla con contenuti aggiuntivi, che – anche se con argomenti non sempre inerenti al tema principale del mio blog – arricchiscono senz’altro questo mio diarietto. I principali servizi che uso sono Google Reader da cui condivido alcune delle mie letture, Tumblr coi suoi mini post e Delicious coi miei segnalibri; a questi si aggiungono anche i miei “statuses” su Twitter e Identi.ca, e qualcos’altro ancora, come la segnalazione degli articoli “speciali” già pubblicati nel mio blog. Usare questi servizi è estremamente semplice: mi basta condividere solo un brano di un articolo che leggo (e magari aggiungerci una nota personale) premendo un pulsante su Google Reader, oppure scrivere un mini post o fare una citazione o segnalazione di link su Tumblr usando il bookmarklet, e così via anche per Delicious. In questo modo si mantiene senz’altro più vivo e ricco il proprio blog con nessuna fatica, anche se sono contenuti che appaiono e man mano scompaiono dal blog stesso.

Il metodo

Con questo approccio non faccio uso del database, che conterrà quindi solo i miei articoli. E ciò causa l’inconveniente che queste “note a margine” non compaiano nel feed principale, quello del blog. Per questo motivo ho ripensato la struttura dei miei feed RSS: ora per tutti c’è un unico feed che fa da collettore, quello di Twitter. Grazie al servizio di Twitterfeed, tutti i feed vengono raccolti e inviati a Twitter, apponendo all’inizio di ciascuno un tag (ad es., [post], [delicious], [gReader], ecc.) per l’identificazione della fonte del messaggio inviato. In altre parole, abbonandosi al mio account Twitter, si riceveranno tutti gli avvisi circa la mia attività online: articoli, mini articoli, letture, segnalibri, statuses. Ecco un diagramma esplicativo:

C’è da dire che, comunque, anche su Friendfeed vengono ripostati tutti gli aggiornamenti: uso Friendfeed però solo per le discussioni in tempo reale (eccezionale da questo punto di vista). Identi.ca, invece, lo uso solo per gli aggiornamenti in inglese e generalmente relativi solo a Linux & Co.

Conclusione

In conclusione, quindi, sono d’accordo con quanto scritto da Francesco nel suo post. Una differenza sostanziale che colgo è che il mio sideblog non viene costruito all’interno di WordPress, ma su servizi esterni. Addirittura è il feed di Twitter a fare la parte principale di contenitore completo.

Ad essere sincero, quando iniziai a pensare a questi contenuti extra, cercai di implementare qualcosa come quello che Filippo “Pollycoke” Pappalardo fa nel suo “Espresso” o come Remo “Mefisto” Quintino fa nel suo Quicklook, ma lasciai perdere per alcune scelte tecniche che avrei dovuto utilizzare. Alla fin fine mi sta bene così e ne sono attualmente soddisfatto. E comunque non è assolutamente detto che il metodo da me scelto sia il migliore: è solo quello che oggi sto usando.

L'articolo Social Network: la struttura della mia rete di feed RSS è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Aggiungere Twitter al feed RSS di WordPress

aldolat@gmail.com (Aldo Latino) — Sat, 27 Jun 2009 20:06:08 +0000

Avrete notato che nella barra laterale di sinistra ho inserito il pulsante per il retweet dei miei articoli, utilizzando il servizio di TweetMeme. Diciamo che ho spostato ormai verso Twitter tutta l’attività dei network che utilizzo: tutto quello che combino nella rete (post sul blog, segnalibri su Delicious, letture condivise da Google Reader, post su Tumblr, ecc.) viene ripostato sempre su Twitter, ad esclusione di Identi.ca dove scrivo quasi esclusivamente in inglese e per questo motivo non ho reindirizzato la copia dei messaggi su Twitter.

Per integrare Twitter nel blog ho utilizzato il plugin di TweetMeme, anche se lo stesso scopo si poteva ottenere senza il suo uso. Questo plugin consente di inserire automaticamente il widget negli articoli (all’inizio o alla fine o in entrambi i posti), nelle pagine statiche e nel feed RSS. Nel mio caso ho dovuto inserirlo manualmente perché lo volevo nella sidebar di sinistra. In questo modo mi sono precluso la possibilità di inserirlo automaticamente quantomeno in coda ad ogni articolo del feed di Ubuntu block notes.

Mi sono quindi dato da fare e ho cominciato col crearmi un pulsante in Inkscape (a sinistra). Ho messo quindi mano al codice modificando il mio attuale functions.php, che già visualizza un box con i crediti all’autore del post,¹ e aggiungendo le righe specifiche per Twitter. Ecco il codice che ho inserito nel file:

// Inserisce nel feed RSS un badge per twitter e un backlink all'articolo originale e al blog
function insertFootNote($content) {
  if(is_feed()) {
    $content.= "<div style=\"margin:30px 0 15px;\">";
    $content.= "<a href=\"http://twitter.com/home?status=sta leggendo ".get_permalink()."\" title=\"Condividilo su Twitter!\" target=\"_blank\">";
    $content.= "<img src=\"".get_bloginfo('template_url')."/images/tweet-this.png\" alt=\"Condividilo su Twitter!\" width=\"100\" height=\"18\" />";
    $content.= "</a></div>";
    $content.= "<p style=\"border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#ddd;border:1px solid #ccc;padding:5px;\">Leggi l'originale: <a href=\"".get_permalink()."\">".get_the_title()."</a><br />";
    $content.= "di <a href=\"".get_bloginfo('url')."\">".get_bloginfo('name')."</a></p>";
  }
  return $content;
}
add_filter ('the_content', 'insertFootNote');

Il pulsante di Twitter in coda ai post nel feed RSS.

Questo codice è l’adattamento di quanto WpRecipes ha pubblicato su un argomento simile: “Come aggiungere automaticamente del contenuto dopo ogni post”. Nel mio caso si trattava invece del feed, per cui l’adattamento è stato facile. Il risultato lo si può vedere qui a sinistra.

In pochissime parole, in quelle righe di codice si dice che WordPress, se sta visualizzando il feed, deve aggiungere al contenuto ($content.=) alcune righe, esposte nel codice su più linee per comodità. Se volete implementarlo anche voi, le righe sono già pronte per essere utilizzate. Considerate che le righe 10 e 11 visualizzano i crediti per l’autore, per cui se non le volete cancellatele. In più vi serve l’immagine del pulsante, che avete visto poco prima o una di vostro gradimento.

Utile nel caso di ripubblicazione del feed altrove. ↩︎

L'articolo Aggiungere Twitter al feed RSS di WordPress è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Twitter in sala operatoria

aldolat@gmail.com (Aldo Latino) — Mon, 16 Feb 2009 18:33:42 +0000

La tecnologia esiste: perché non utilizzarla appieno, anche in contesti che sembrerebbero a prima vista estranei?

Surgeons at Henry Ford Hospital are using Twitter to educate others about a new cancer surgical proceedure in real time. The surgeons told CNN’s Elizabeth Cohen Reports they are trying to get the word out about a way to remove a tumor on a kidney without removing the kidney.

I chirurghi dell’Henry Ford Hospital stanno utilizzando Twitter per istruire in tempo reale altri colleghi su una nuova procedura di intervento chirurgico contro il cancro. I medici hanno detto a Reports di Elizabeth Cohen della CNN che stanno tentando di far conoscere un nuovo metodo per rimuovere un tumore da un rene senza asportare l’organo.¹

La traduzione è mia. Via Pandemia. ↩︎

L'articolo Twitter in sala operatoria è uno scritto di aldolat.it. Rispettane le condizioni di licenza.