Pubblicato il 12/04/12e aggiornato il

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>
stampa la pagina 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.
 




8 commenti :

  1. ciao Ernesto,
    per quanto riguarda Stampa la pagina il secondo codice va bene per inserirlo nel modello?
    come posso fare per farlo vedere solo nella pagina del post?

    RispondiElimina
    Risposte
    1. @Pennywise
      Prova a mettere all'inizio e alla fine del codice due tag condizionali
      http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

      Elimina
  2. ok ho inserito l'icona stampa... purtroppo nn c'è verso di allinearla con le altre icone li vicino... ho provato col margin e col padding niente nn mi si vuole abbassare... hai qualche suggerimento?

    p.s
    peccato che stampa tutta la pagina, se stampasse solo la parte del post sarebbe perfetto.

    RispondiElimina
  3. Ciao Ernesto,
    sto cercando di capire come posso creare un box con iconee personalizzate verso i social, ma vorrei metterle nella sidebar ed averle tutte in fila.
    se aggiungo i codici uno per uno come gadget, non mi vengono in verticale?
    idem se aggiungo i codici nell editor html, dove mi si posizionerebbero?
    Non riesco a trovare le giuste guide online, forse faccio io le domande sbagliate!
    L'effetto finale vorrei che fosse tipo questo:
    http://www.stylescrapbook.com/

    grazie!
    lucrezia@theshabbylabels.com

    RispondiElimina
    Risposte
    1. @Lucrezia....
      A me sembra che le icone del blog che mi hai indicato siano in orizzontale quindi credo che tu le voglia disporre in quel modo. E' cosa abbastanza semplice, puoi seguire questo post
      http://www.ideepercomputeredinternet.com/2011/10/come-allineare-alla-stessa-distanza-le.html
      Se le vuoi mettere equidistanti. Se invece vuoi lasciare solo un po' di spazio tra una icona e l'altra poi usare questo codice

      <a href="URL DEL SOCIAL 1" target="_blank"><img src="URL DELLA ICONA 1" border="0" /></a> &#160;&#160;<a href="URL DEL SOCIAL 2" target="_blank"><img src="URL DELLA ICONA 2" border="0" /></a> &#160;&#160;<a href="URL DEL SOCIAL 3" target="_blank"><img src="URL DELLA ICONA 3" border="0" /></a> &#160;&#160;

      dove puoi aggiungere anche altre icone e &#160; rappresenta uno spazio quindi puoi toglierli o aggiungerne altri

      Elimina
  4. Grazie grazie e ancora grazie! Le tue guide sono sempre di grande aiuto!
    P.S.: per la condivisione del post su linkedin (è possibile?) se sì, quale dovrebbe essere l'url generico/codice?

    Thank you! :))

    RispondiElimina
    Risposte
    1. @# Il codice per Linkedin è questo
      <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Linkedin'><img src='https://lh3.googleusercontent.com/-ffpDUo8q9qs/T9hQnOkeWuI/AAAAAAAAYqc/EO6BCuF2Moo/s79/linkedin-icon.PNG'/></a>
      serve solo se incollato nel modello. Per una immagine più piccola puoi sostituire quella mia oppure modificare il valore s79 con s24 o s32 per avere rispettivamente l'icona da 24 o 32 pixel

      Elimina
    2. Grazie ancora! Ho messo un'icona piccolina, tratta da una raccolta che avevo scaricato.
      Il risultato finale mi piace tantissimo grazie al tuo codice. é tutto in ordine, minimalista, personalizzato.
      Se non ci fossi, bisognerebbe inventarti!

      :))

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.