Come condividere immagini o link del nostro blog nei social mediante il drag & drop con il plugin PrettySociable.

Se qualcuno di voi ha visitato il sito Mashable si sarà accorto dell'originalità di condivisione che viene proposta. Se infatti si apre un post, per condividere le immagini e i link presenti nei social network più importanti, è sufficiente trascinarli con il mouse. Si aprirà una finestra con le icone dei vari servizi e basterà mollare il mouse su quello prescelto.

Questo modo di condivisione può essere utilizzato anche in un blog su Blogger. E' più facile a farlo che a spiegarlo quindi vi invito ad andare in PrettySociable, un post del mio blog di prova, e puntare l'immagine o il link con il mouse. Apparirà la scritta "Trascina per Condividere"

Nel caso in cui lo facessimo, si vedrà la finestra dei social più importanti

Il servizio viene scelto semplicemente lasciando il pulsante sinistro del mouse quando siamo sopra alla sua icona. Si aprirà una finestra di dialogo simile a questa

 

che permetterà di condividere l'immagine. Una operazione analoga può essere fatta anche con i link. Come vedete vengono visualizzate scritte in italiano perché mi sono preso la briga di tradurre questo plugin.

Per l'installazione in un blog su Blogger occorre andare su Layout > Modifica HTML e, dopo aver salvato il modello completo, si cerca la riga

</head>

e, immediatamente sopra, si incolla il seguente codice

<!-- PRETTY SOCIABLE INIZIO -->
<link charset='utf-8' href='http://sites.google.com/site/ideepercomputeredinternet/prettysociable-1/prettysociable.css' media='screen' rel='stylesheet' type='text/css'/>
<script charset='utf-8' src='http://sites.google.com/site/ideepercomputeredinternet/prettysociable-1/jquery-latest.js' type='text/javascript'/>
<!--[if lte IE 6]><script src="http://sites.google.com/site/ideepercomputeredinternet/prettysociable-1/dd_belatedpng.js" type="text/javascript" charset="utf-8"/>
<![endif]-->
<script charset='utf-8' src='http://sites.google.com/site/ideepercomputeredinternet/prettysociable-1/jquery.prettysociable.js' type='text/javascript'/>
<!-- PRETTY SOCIABLE FINE - http://parsifal32.blogspot.com -->

come mostrato in questo screenshot

Successivamente si va in fondo al modello e prima della riga

</body>

si incolla quest'altro codice

<!-- PRETTY SOCIABLE INIZIO -->
<script charset='utf-8' type='text/javascript'>
$.prettySociable();
</script>
<!-- PRETTY SOCIABLE FINE -->

Non resta che Salvare il Template. Per rendere disponibili le immagini e i link alla rapida condivisione mediante trascinamento con il mouse bisogna inserire la stringa

rel="prettysociable"

nel codice del link o in quello dell'immagine. La modalità di inserimento è la seguente

<a href="http://www.google.it/" rel="prettysociable" >Collegamento a Google</a>

nel caso di un link, mentre per le immagini dobbiamo inserire rel="prettysociable" in una posizione come questa

<a href="http://public.blu.livefilestore.com/y1pqJDszm-mO36ORslQWqPBBNff3fXzcZ20CJSbCZZodu2k_0PNqKagBF4jqqf1FhUyFRcQQXVTJ7MiOX5U1CBVaQ/Sarah-Felberbaum-2.jpg" imageanchor="1"  style="margin-left: 1em; margin-right: 1em;" rel="prettysociable" ><img border="0" height="231" src="http://public.blu.livefilestore.com/y1pqJDszm-mO36ORslQWqPBBNff3fXzcZ20CJSbCZZodu2k_0PNqKagBF4jqqf1FhUyFRcQQXVTJ7MiOX5U1CBVaQ/Sarah-Felberbaum-2.jpg" width="320" /></a>

Anche in questo caso è più facile a farlo che a spiegarlo. Se usate l'editor classico di Blogger passate alla Modalità HTML e digitate rel="prettysociable" prima del tag di chiusura del collegamento, cioè prima di >.

Se invece usate Windows Live Writer la cosa diventa ancora più semplice perché, quando si inserisce un link,  si potrà aggiungere direttamente nella finestra che si apre

Nel caso delle immagini con WLW si possono utilizzare due metodi

1. Quello identico all'editor di Blogger passando a Origine e incollando rel="prettysociable" prima del tag di chiusura del collegamento
2. Alternativamente caricare le immagini su un nostro hosting tipo Skydrive, quindi inserirle tramite Immagine > da Web

Conviene sempre accorciare gli URL con un servizio tipo TinyURL, is.gd o il recentissimo goo.gl perché altrimenti si potrebbero superare i 140 caratteri per la condivisione su Twitter. Quindi si seleziona l'immagine e, sulla parte destra di WLW, si sceglie Collega a URL

Successivamente si inserisce l'URL dell'immagine e in basso si digita prettysociable nel campo Rel 

quindi si clicca su OK. Si pubblica l'articolo e i lettori potranno condividere le immagini o i link in cui abbiamo inserito l'attributo prettysociable su Facebook, Twitter, Digg, Delicious, ecc. 

Il plugin funziona con tutti i browser escluso Internet Explorer, d'altra parte se qualcuno vuole condividere le foto del tuo blog in questo modo così particolare certamente non usa quel cesso di IE; PrettySociable è assolutamente imprescindibile per blog di foto.

Un altro modo interessante per condividere tutto l'articolo è quello del Sexy Widget.

Fonte | No-margin-for-errors -