Come crearsi da soli delle icone per condividere i post sui social network, per convertire in PDF o per stampare.

Come creare dei pulsanti personalizzati per la condivisione su Facebook, Twitter, Google Plus, OKNotizie, Diggita, Digg, Stumbleupon, Delicious. Come creare icone e link per stampare e salvare in PDF.

Tutti i principali servizi sociali hanno i loro bravi bottoni ufficiali quasi sempre muniti di contatore. Questi pulsanti hanno anche altre funzionalità come per esempio quella di visualizzare gli avatar di chi vi ha cliccato sopra come è il caso di Google Plus e Facebook.

L'aspetto negativo di questa situazione è che siamo di fronte a un codice complesso che comporta un notevole rallentamento della pagina. E' stata messa una mezza pezza introducendo il caricamento asincrono del plugin come è appunto il caso di Facebook e Google Plus ma le lentezze rimangono.

Si può pensare di creare dei bottoni da soli usando delle icone che ci piacciono e inserendole nel modello o in un post mediante dei link ai servizi che vogliamo utilizzare.

Non è la stessa cosa inserire una icona nel modello o in un post. Nel primo caso dobbiamo tenere presente quali sono e che cosa rappresentino i tag di Blogger. In questo senso sono particolarmente utili

data:post.url che indica l'indirizzo del post che si è aperto

data:post.title che è la variabile per il titolo dell'articolo che si sta visualizzando

Facciamo l'esempio pratico di Facebook. Per condividere un articolo su tale social network dobbiamo incollare nel browser questo indirizzo

http://www.facebook.com/sharer.php?s=100&p[title]=TITOLO&p[summary]=TESTO&p[url]=LINK

dove TITOLO, TESTO e LINK sono le variabili che dipendono dal post che si vuole condividere. Provate a incollare la stringa precedente nel browser inserendo al posto di LINK per esempio l'indirizzo del vostro blog e vedrete che si aprirà la classica finestra di Facebook.

Per inserire un pulsante in un post per condividerlo su Facebook si può incollare in modalità HTML

<a href="javascript:var u=location.href;window.open('http://www.facebook.com/sharer.php?u='+u+'&amp;t='+document.title,this.target,'width=600,height=400');">Condividi su Facebook</a>

dove l'espressione Condividi su Facebook può anche essere sostituita da un altro testo o da una immagine di qualsivoglia dimensione. E' evidente che un tale pulsante dovrebbe essere inserito manualmente su tutti i post rendendo la cosa un po' troppo complicata. Le dimensioni colorate di rosso sono quelle della finestra popup che verrà aperta.

E' per questa ragione che in genere si preferisce installare i pulsanti direttamente nel modello. La sintassi di inserimento nel caso di Facebook deve fare i conti con le variabili di Blogger. L'URL di condivisione diretta su Facebook deve essere inserito su Blogger con questa sintassi

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Condividi su Facebook' title='Condividi su Facebook' src='URL ICONA FACEBOOK'/></a>

dove il titolo e l'URL del post sono stati introdotti in modo generico mediante le espressioni colorate di rosso e dove dovrà essere inserito anche l'URL della icona che servirà per condividere i post. Come potete notare si vedono anche strani caratteri quali &quot; e &amp; i quali non sono altro che i simboli delle virgolette ( " ) e della unione ( & )  convertiti da HTML in linguaggio XML.

Un tale codice può essere incollato in Modello > Modifica HTML > Procedi > espandi modelli widget > subito sopra alla riga   <div class='post-footer'>


Vediamo come sia possibile, con lo stesso principio, realizzare dei pulsanti anche per altri social o servizi. Posterò l'URL generico da incollare nel browser e il codice da inserire nel modello.

Delicious

http://del.icio.us/post?url=LINK&title=TITOLO  -  URL generico e codice per modello

<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Condividi su Del.icio.us'  title='Condividi su Del.icio.us' src='ICONA_DELICIOUS'/></a>

Digg

http://digg.com/submit?url=LINK&title=TITOLO  - URL generico e codice per modello

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Condividi su Digg'  title='Condividi su Digg' src='ICONA_DIGG'/></a>

Google Plus

https://plus.google.com/share?url=LINK   -  URL generico e codice per modello

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img alt='Condividi su Google Plus' title='Condividi su Google Plus' src='ICONA_GOOGLE_PLUS'/></a>

Pinterest


http://pinterest.com/pin/create/button/?url=LINK&media=URL_IMMAGINE&description=TESTO

Reddit

http://reddit.com/submit?LINK&title=TITOLO - URL generico e codice per modello

<a expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Condividi su Reddit' title='Condividi su Reddit' src='ICONA_REDDIT'/></a>

Stumbleupon

http://www.stumbleupon.com/submit?url=LINK&title=TITOLO  - URL generico e codice per modello

<a class='timestamp-link' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' title='permanent link'><img src="ICONA_STUMBLEUPON" alt="Condividi su StumbleUpon" title="Condividi su StumbleUpon"/></a>

Twitter


http://twitter.com/home?status=TESTO - URL generico - In TESTO si possono inserire link o username mediante il simbolo @


OKNotizie

http://oknotizie.alice.it/post?url=LINK&title=TITOLO - URL generico e codice per modello

<a expr:href='&quot;http://oknotizie.alice.it/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Vota su OKNotizie'  title='Vota su OKNotizie' src='ICONA_OKNOTIZIE'/></a>

Diggita

http://www.diggita.it/submit.php?url=LINK&title=TITOLO - URL generico e codice per modello

<a expr:href='&quot;http://www.diggita.it/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='vota su Diggita' title='vota su Diggita' src='ICONA_DIGITA'/></a>

Stampa la pagina


<a href="javascript:window.print();">Stampa la pagina</a> oppure
<a href="javascript:window.print();"><img src="ICONA STAMPANTE" alt="stampa la pagina" title="stampa la pagina"/></a>
prova a cliccare sulla icona per stampare il post


Segui questo blog


http://www.blogger.com/follow-blog.g?blogID=xyzxyzxyzxyzxyz dove deve essere immesso l'ID del blog che si può ricavare nel modo illustrato in questo post. 


Convertire in PDF


http://www.printfriendly.com/print?url=LINK - URL generico e codice per modello
<a expr:href='&quot;http://www.printfriendly.com/print?url=&quot;+data:post.url'>Converti in PDF</a>   dove al posto del testo Converti in PDF può anche essere messa una immagine come è stato fatto in precedenza con il codice per stampare.

Le immagini delle icone possono essere trovate facilmente con servizi tipo IconFinder. L'idea di questo articolo mi è venuta leggendo un post di Oloblogger.