Pubblicato il 18/01/10 - aggiornato il  | 6 commenti :

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"

prettysociable-1

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

prettysociable-2

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

 prettysociable-3

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

prettysociable-4

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

prettysociable-5

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

èrettysociable-6

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

prettysociable-8

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

prettysociable-9

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 -



6 commenti :

  1. Ciao Parsifal, oggi non trovo i bottoni dei social networks nei miei post e nemmeno nel tuo di esempio (quello dei sexy bottons). E' un problema di Blogger che hai riscontrato anche nel tuo sito? A parte questo, ho provato ad applicare questa modalità nel mio blog, ma credo di avere delle difficoltà. Non se al posto di prettysociable cosa scrivere. Da quello che ho capito è un tuo blog di prova. Quindi io dovrei sostituire le scritte "idee x computer ed internet" e "prettysociable" con il nome del mio blog? non mi raccapezzo (?) più, scusami!!! :-))
    Ciao Sonia.
    PS. buon anno nuovo, visto che non ci siamo sentiti prima.

    RispondiElimina
  2. @Sonia
    Ricambio il tuo augurio e facciamo un po' di chiarezza :)
    Il SexyWidget c'è sempre nel mio blog di prova, si trova solo in questo post
    http://demo-parsifal32.blogspot.com/2010/01/i-bottoni-per-la-condivisione-sexy.html
    e funziona perfettamente.
    Per quanto riguarda questo articolo, se vuoi inserire questa modalità di condivisione delle foto, devi ricopiare il codice così com'è senza cambiare nulla.
    Il fatto che vedi "ideepercomputer" nell'URL dipende dal nome che ho dato alla "pagina schedario" su Google Sites in cui ho caricato lo script.
    Per utilizzare questa personalizzazione, dopo che hai incollato il codice nel modello, devi inserire la stringa
    rel="prettysociable"
    in modalità HTML nel modo indicato nell'articolo nelle foto che vuoi che abbiano quell'effetto.
    Spero di essere stato chiaro. Eventualmente fammi sapere.
    Ciao

    RispondiElimina
  3. Ciao Parsifal, ho capito, non sei tu poco chiaro sono io che non ho le basi. :-))) Dunque l'ho fatto e ho aggiunto rel="prettysociable" a un post per prova e sembra andare tutto bene. La scritta "trascina per condividere" si attiva solo quando il pulsante è sulla foto. Ora sorgono due questioni: i social network che ci sono sono tecnologici e non gastronomici, mancano quelli dove condividevo i miei post (tipo oknotizie, digita, fai informazione), come faccio ad aggiungerli? Nel mio blog in francese come faccio a tradurre la scritta "trascina per condividere" ed eventualmente mettere social network di loro conoscenza? Chiaramente se tutto ciò è fattibile, se no va bene così com'è. Infine, da ieri non ci sono più i pulsanti di condivisione che avevo prima e che funzionavano bene..non ho fatto nulla, sono spariti e basta! sei sempre un faro nella nebbia di internet!!! Grazie di cuore
    Ciao, Sonia

    RispondiElimina
  4. @Sonia
    Non si possono aggiungere i social italiani in questo plugin. Per la traduzione in francese invece si potrebbe anche fare, dovresti scaricare questo file
    http://sites.google.com/site/ideepercomputeredinternet/prettysociable-1/jquery.prettysociable.js
    aprirlo con Notepad++ e sostituire le espressioni italiane con quelle in francese. Quindi ricaricarlo su un tuo spazio, acquisirne l'URL e sostituirlo nel codice dell'articolo.
    Per quanto riguarda i bottoni, dimmi quale codice hai copiato, basta che mi incolli l'URL dell'articolo, e eventualmente ti posso aiutare. Può essere un superamento di banda.
    Comunque puoi riprovare a rifare la procedura...
    Ciao

    RispondiElimina
  5. Ciao Parsifal, grazie mille. Penso che terrò tutte e due le versioni, se è possibile.... ho rifatto la procedura dei bottoni seguendo il tuo post ed è andata bene, così ho notato che, in effetti, non c'era più nel modello, sarà successo qualcosa a me scognito :-))) Quindi risolto. Per la parte francese seguirò il tuo consiglio.
    Grazie di nuovo e buona serata.
    Ciao, Sonia

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy