REDAZIONE

Cari MyBlogger,

in questo tutorial vi mostriamo come inserire, all’interno di ogni post, delle icone “personalizzate” dei Social Network più utilizzati. Come ad esempio:

Condividi questo post

Prima di tutto cerchiamo le icone dei Social Network che più ci piacciono.
In rete se ne possono trovare tantissime, basta fare una ricerca.

Una volta trovate, le scarichiamo e le carichiamo all’interno del nostro Blog dalla sezione “Pannello di controllo > Gestione file > Images”.

Cliccando su ogni icona caricata, si aprirà una pagina con la nostra immagine, quindi salviamo in un file gli url delle nostre icone e andiamo nella sezione “Presentazione > Opzioni avanzate”.

Per inserire le icone in tutte le sezioni che contengono i post, all’interno di:

• Modello della home-page
• Modello della pagine di link permanente
• Modello della pagina categoria
• Template tags

cerchiamo il seguente codice:

     {if $post.extended}<p class="readmore"><a href="{$post.permalink}
     #more">{t}Read more ...{/t}</a></p>{/if}       

e, subito dopo incolliamo:

     <!-- INIZIO BOTTONI SOCIAL NETWORK -->
        
     <img src="http://blog.myblog.it/images/condividi-questo-post.png">
     <br /><br /><a class="social" href="http://del.icio.us/post?url=
     {$post.permalink}" target="_blank">
     <img src="http://blog.myblog.it/images/icone/delicious.png" 
     border="0"></a><a class="social" 
     href="http://www.stumbleupon.com/submit?url=
     {$post.permalink}&title={$post.title}" target="_blank">
     <img src="http:// blog.myblog.it/images/icone/stumbleupon.png" 
     border="0"></a><a class="social" 
     href="http://www.technorati.com/faves?add={$post.permalink}" 
     target="_blank">
     <img src="http:// blog.myblog.it/images/icone/technorati.png" 
     border="0"></a><a class="social" 
     href="http://www.google.com/bookmarks/mark?op=
     edit&output=popup&bkmk={$post.permalink}/&title={$post.title}" 
     target="_blank">
     <img src="http:// blog.myblog.it/images/icone/google.png" 
     border="0"></a><a class="social" 
     href="http://twitter.com/home?status= {$post.permalink}" 
     target="_blank">
     <img src="http:// blog.myblog.it/images/icone/twitter.png" 
     border="0"></a>
     <a class="social" href="http://www.facebook.com/share.php?u=
     {$post.permalink}/&t={$post.title}" target="_blank">
     <img src="http:// blog.myblog.it/images/icone/facebook.png" 
     border="0"></a>
        
     <!-- FINE BOTTONI SOCIAL NETWORK -->       

Vediamo nel dettaglio cosa è stato inserito in questo codice HTML:

   <a class="social" href="http://del.icio.us/post?url=
   {$post.permalink}" target="_blank">
   <img src="http://blog.myblog.it/images/icone/delicious.png" 
   border="0"></a>    

class=”social” è lo stile CSS che abbiamo applicato ad ogni icona per distanziarla in modo omogeneo dalle altre.
Per inserire il codice CSS, andiamo in “Presentazione > Opzioni avanzate” e clicchiamo il link “Modifica modello” posizionato a destra di “Foglio di stile”.
Nella colonna destra della finestra che si apre scriviamo:

       .social {
        padding:10px;
        }       

Questo significa che ogni icona mantiene una distanza di 10 pixel da qualsiasi cosa la circonda. Questo codice CSS potete personalizzarlo come più vi piace.

Gli url presenti all’interno degli href, invece, non modificateli, sono quelli che vi permettono di condividere i post sui Social Network, ad esempio:

href=”http://del.icio.us/post?url={$post.permalink}”


Per utlimo, ma non meno importante, il codice src, che contiene l’url delle vostre icone che avete precedentemente caricato:

src=”http://blog.myblog.it/images/icone/delicious.png”


Ora tocca a voi. Buon lavoro!

Cari MyBlogger,

oggi vi mostriamo come inserire il bottone “Condividi” di Facebook all’interno dei post del nostro blog.

Ma prima cerchiamo di capire che differenza c’è tra il bottone “Mi piace” e il bottone “Condividi”.

Il bottone “Mi piace” o “iLike” visualizza sul nostro blog un bottone che già conoscete:

Una volta cliccato, mostrerà sul nostro profilo di Facebook un semplice testo con link come questo:

ma se lasciamo il mouse sopra il bottone, dopo pochi secondi apparirà un tooltip proprio come questo:

che dà la possibilità di pubblicare sul nostro profilo un mini post con immagine allegata dando, in questo modo, maggior visibilità ai nostri post del blog:

Il bottone “Condividi” o “Share”, invece, offre soltanto questa seconda possibilità: cliccandoci sopra pubblicherà un mini post nel nostro profilo di Facebook.

Ora la domanda è: quale dei due bottoni è meglio inserire?

La differenza non è grande, entrambi permettono di condividere dei link con i nostri amici, sta quindi a voi decidere quale si implementa meglio con la tipologia del vostro blog e l’esperienza di navigazione dei vostri lettori. Il primo è dedicato a tutti gli utenti, sia a quelli esperti che non, e permette due tipologie di condivisione, testuale e grafica, il secondo bottone invece obbliga a condividere il vostro post solo in modo grafico rendendolo quindi più visibile a tutti.

Non sapete scegliere? Inseriteli entrambi! :)

Come inserire il bottone “Condividi”

Dal pannello di gestione del blog entriamo nella sezione “Presentazione > Opzioni avanzate”. A questo punto cerchiamo in tutte e 4 le seguenti pagine:

- Modello della home-page

- Modello della pagine di link permanente

- Modello della pagina categoria

- Template tags

questa riga di codice:

        <h3 id="p{$post.iteration}">
        <span>{$post.title}</span></h3>            

e subito dopo incolliamo il seguente codice:

a) se volete il bottone verticale

          <!-- INIZIO FACEBOOK BOTTONE CONDIVIDI --> 
          <br><a name="fb_share" type="box_count" share_url=
          "{$post.permalink}" href="http://www.facebook.com/sharer.php">
          Condividi</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.
          Share " type="text/javascript"></script><br><br><br><br><br> 
          <!-- FINE FACEBOOK BOTTONE CONDIVIDI -->            

b) Se invece volete il bottone orizzontale

          <!-- INIZIO FACEBOOK BOTTONE CONDIVIDI --> 
          <br><a name="fb_share" type="button_count" share_url=
          "{$post.permalink}" href="http://www.facebook.com/sharer.php">
          Condividi</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.
          Share" type="text/javascript"></script><br> 
          <!-- FINE FACEBOOK BOTTONE CONDIVIDI -->            

Salvate le modifiche effettuate e troverete nel vostro Blog il nuovo bottone “Condividi”.

Buon lavoro!