Considerate il traffico generato dalle  varie condivisione di link su network che ospitano fino a 500 milioni di utenti (aka vedi Facebook)… e il bello che questo bacino di utenza è raggiungibile ora, facilmente e aggratis!

Nota: strategie, tecniche di marketing e social network se ne contano a centinaia… questo articolo ne prende in considerazione solo alcune!

1. Facebook social plugins

Il re dei social networks (sopratutto per dimensioni) offre una serie di strumenti per rendere più social friendly i propri siti.

Il sito dedicato agli sviluppatori offre una sezione con dei “social plugins”, ovvero dei piccoli strumenti pronti da semplicemente copiare e incollare per includere nuove funzionalità faccialibrose al vostro sito:

• Like button: è un grande classico, un pulsante che permette agli utenti di esprimere un “mi piace” sul sito, che apparirà poi sulle loro bacheche.
• Comments: un casella generata con il look and feel di Facebook che permette agli utenti loggati di lasciare un commento, anche questo apparirà sulle loro bacheche.
• Like box: se abbiamo una pagina (le vecchie fan page) di un prodotto o servizio, possiamo includere un box che mostra un riassunto della nostra pagina con tanto di numero di “like” e possibilità di esprimere l’apprezzamento.
• Activity feed: permette di inserire un box che mostra il flusso delle attività di una nostra pagina su Facebook, l’equivalente di un feed RSS!

E questi non sono neanche tutti!

2. Tweet button(s)

Anche Twitter si è dato da fare a riguardo… il Tweet button in modo simile al like button di Facebook permette di inserire con una configurazione minima un pulsante che permette di cinguettare il nostro sito o blog agli utenti, qui un esempio live:

Tweet
Oltre ovviamente al gia trattato mini-framework Twitter Anywhere, che però richiede un minimo di conoscenze di linguaggi web.

3. WordPress ti da una mano

Se siete possessori di un blog su WordPress.com o utilizzate il suo motore per gestire il vostro sito, troverete una valanga di plugin per aggiungere funzionalità social alle vostre pagine web:

• AddToAny: permette di inserire alla fine dei post o delle pagine una barra con le funzionalità di condivisione per i più noti social network
• TweetThis: se siete pigri e non volete mettere i Tweet buttons a mano, eccovi un plugin che ripropone una funzionalità simile in modo automatico!
• Socialize: inserisce dei pulsanti (graficamente ben fatti) per la condivisione sui social network, l’elenco è gestibile dalle impostazioni del plugin.

e anche qui, questi sono solo alcuni… godetevi tutta la lista!

4. RSS a manetta!

Se il vostro sito utilizza linguaggi dinamici  non è mai una cattiva idea implementare un sistema di feed RSS per i contenuti, anche senza doverlo fare a manina, oggi giorno tra liberie, framework e CMS chiunque può aggiungere questa funzionalità!

Una volta implementata però non abbandonatela a se stessa, al livello di design cercate di rendere il link verso i feed il più evidente possibile magari posizionandolo in punti chiave delle vostre pagine o ripetendolo più volte (senza esagerare), aggiungere la classica icona RSS (come quella qui a destra) aiuta a individuarli, e quindi a iscriversi, più facilmente!

Ma questo prima di scoprire l’applicazione Selective Tweets!

Sostanzialmente è un’applicazione da aggiungere su Facebook, una volta attivata se nei nostri status di Twitter non appare l’hashtag #fb alla fine, questo non verrà visualizzato su Facebook. Utile per chi come me non vuole avere due account su Twitter o non vuole gestire i due social network in modo completamente separato!

Nota: se usate gia l’applicazione di Twitter su FB dovete disattivarla!

In questo veloce tutorial vediamo come integrare questa libreria nel nostro sito e lavorare con le funzioni di base di questo nuovo servizio!

Quindi… diamoci da fare con il codice!

Software richiesto

Essendo questa libreria di Twitter gratuita, l’unico software che vi serve è il vostro code editor preferito, come al solito suggerisco le soluzioni free come Aptana o Notepad++ ma anche gli editor commerciali quali Dreamweaver e Coda ovviamente vanno bene!

Prerequisiti

Conoscenza basilare di Javascript, se avete conoscenze di altre librerie (jQuery, MooTools, ecc) potreste notare delle analogie. Non sapete cos’è una libreria di Javascript? Leggetevi il mio post di spiegazione e il tuotorial per iniziare con jQuery!

Argomenti Trattati

Attivazione , inclusione e utilizzo della libreria “Twitter @Anywhere”

1. Registriamoci e otteniamo una chiave API

Per prima cosa andiamo sul sito ufficiale del servizio e registriamoci, ci viene richiesto per ogni applicazione (che può essere un normale sito o blog) di inserire l’indirizzo e il tipo di accesso (a noi va bene “solo lettura – read only”). Finita la registrazione come utenti e la registrazione della prima applicazione ci verrà assegnata una chiave API (Application Program Interface) che dovremo utilizzare ogni volta che vogliamo integrare il servizio in una nostra applicazione/sito/blog. L’assegnazione delle chiavi API è una procedura abbastanza comune quando si lavora con servizi esterni, potete saperne di più a riguardo qui.

Concluso questo passaggio copiamoci la nostra, e quindi da non condividere/distribuire, chiave API e continuamo…

2. Integriamo la libreria nella nostra pagina di prova

Aprite il vostro code editor preferito e create una nuova pagina Html, nel punto dove preferite inserire il codice Javascript della pagina (io preferisco dopo il tag </body>) inseriamo il tag per incorporare la libreria di Twitter:

ovviamente dove ho scritto “qui_la_chiave_api” dovrete  insere la chiave che vi è stata generata dopo aver registrato un’applicazione, subito dopo apriamo un’altro tag <script> dove scriveremo il nostro codice:

twttr.anywhere(mioTwitter);

function mioTwitter(T) {
  // Qui scriveremo i comandi
}

la prima riga serve per chiamare il servizio Anywhere, a chiamata effettuata viene lanciata una funzione che ho chiamato “mioTwitter” per comodità, funzione che due righe sotto vado a creare passandogli come argomento una variabile che ho chiamato “T”, questa variabile sarà quella che useremo per chiamare direttamente le varie funzioni di Anywhere… ma niente panico, ora vediamo cosa vuol dire!

3. Auto-link & Hovercards

Spostiamoci all’interno della funzione “mioTwitter” e proviamo il primo comando:

T.linkifyUsers();

con “linkifyUsers()” scrivendo un nome di un utente Twitter preceduto dal @ nel testo della vostra pagina lo vedrete magicamente trasformato in un link verso l’account di quell’utente! Un altro comando molto simile è “hovercards()” che oltre a rendere il nome utente un link, fa apparire un tooltip al passaggio del mouse che mostra delle informazioni veloci:

T.hovercards();

provate a passare il mouse su questi due link @twitter @moebiusmania l’effetto è proprio questo!

Se eventualmente volete che l’effetto delle funzioni Anywhere sia limitato ad un certa zona della vostra pagina Html, potete usare dei selettori Css per indicarglielio. Nel mio esempio voglio inserire quell’effetto in un tag con id “testo”:

T("#testo").hovercards();

4. I “Follow buttons”

Con un comando facile come i precedenti possiamo inserire in un punto specifico della nostra pagina dei pulsanti per invitare l’utente a seguirci su Twitter:

T("#pulsanti").followButton("moebiusmania");

all’interno del comando “followButton()” dobbiamo solo inserire una stringa che contenga il nome dell’account Twitter al quale il pulsante dovrà puntare. Questi pulsanti hanno un aspetto standard che non può essere modificato.

5. Inserire una TweetBox

Forse una delle funzioni più belle… con una sola riga di codice, possiamo inserire nella nostra pagina una casella per twittare direttamente dal nostro sito, con tanto di box di scrittura e conteggio caratteri:

T("#box").tweetBox();

Senza specificargli niente viene generata una TweetBox generica, ma possiamo passare alcuni parametri tra cui altezza, larghezza e testo di default:

T("#box").tweetBox({
   width: 500,
   height: 200,
   defaultContent: "Testo di default";
});

In Conclusione

Potete scaricare il file Twitter @Anywhere - Esempio  con tutto il codice di esempio utilizzato in questo tutorial, per avere una visione un po più di insieme e vedere all’opera questo codice.

Come avete visto grazie a questo nuovo servizio è molto semplice integrare dei “widget” di Twitter interattivi nelle proprie pagine web. Tuttavia qui abbiamo esplorato sono l’inizio della faccenda, potete scoprire nel dettaglio altre funzioni e altri parametri di @Anywhere consultando la documentazione ufficiale, buon divertimento!

L’utilizzo è molto semplice, prendete un link che vorreste postare su un tweet che magari è abbastanza lungo, come questo:

http://www.flickr.com/photos/moebius06/3448757226/

andate su GuardaQua.net e inserite il link nel form e premete il pulsante “Accorcia”… dopo pochi secondi avrete il nuovo link generato, con tanto di riepilogo sull’operazione, nel mio caso il link che era di 49 caratteri è stato ridotto a 28 (quasi la metà) e ora ha questo aspetto:

http://guardaqua.net/?79k5z

Ovviamente non è un servizio necessariamente legato a Twitter, pensate a servizi come Google Maps e altri che generano link veramente lunghi, può sempre tornare comodo accorciarli a pochi caratteri per rendere più snella un’email o un post sul vostro blog…

Quindi alla domanda: “Cos’è e cosa fa questo Twitter?” la risposta è molto semplice, è un servizio nel quale (una volta registrati) sarà possibile lasciare un messaggio di testo di non più di 140 caratteri che verrà visualizzato da tutti quelli che hanno deciso di “seguirvi”.

Sento gia alcuni che dicono “ah ma si può gia fare su Facebook” altri che dicono “beh i feed RSS mica sono una cosa nuova” e hanno tutti ragione, la differenza sta nel fatto che Twitter è un sistema che non cerca di imporsi al posto degli altri ma anzi, collabora pienamente con tanti servizi e in questo modo semplifica la diffusione delle informazioni da parte degli utenti.

Per tagliare corto ed essere pratico vi faccio un esempio: ho un’account su Twitter , su Facebook e un blog; su Facebook attivo l’applicazione che modifica il mio stato in base a quello che scrivo su Twitter, sul blog aggiungo una riga dove viene visualizzato il messaggio immesso dal servizio di cui stiamo parlando ed ecco la “magia”: se ora vado su Twitter e digito un testo (un messaggio, un link, una notizia, un pensiero… qualunque cosa) verrà istantamente pubblicato su tutti e 3 i servizi citati, permettomi con una sola azione di essere attivo e visibile su 3 community (Facebook, il blog e Twitter stesso). E questo è solo un piccolo esempio…

Se ora siete curiosi potete visitare il sito di Twitter , mentre qui troverete l’applicazione per Facebook e qui un tutorial su come inserire Twitter nel proprio blog … e non dimenticatevi twitter.com/moebiusmania