Ogni social network ha ormai un codice per l' inserimento del propio pulsante ma, questi codici hanno lo svantaggio di essere troppo complessi e quindi implicano un notevole rallentamento della pagina. L' unico rimedio a questo è creare delle icone personalizzate per la condivisione dei nostri post blogspot.
In blogger purtroppo non è come inserire un bottone social network in una normale pagina html per questo motivo dobbiamo valerci dei tag blogger specifici.
Nella maggior parte dei casi sono utili questi due tag:
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
ma, per facilitarvi l ' inserimento delle icone per la condivisione dei post nei social network vi indico direttamente il codice dei più famosi social network.
Questi codici possono essere incollati in Modello > Modifica HTML > Procedi > espandi modelli widget > subito sopra la riga <div class='post-footer'> ma la posizione esatta dipenderà dal vostro template quindi dovrete fare delle prove facendo prima un Backup. Inserendo i vari codici fra <div class='social-book'> </div> potremo tramite CSS modificarne le dimensioni o altro e, con <ul><li> TAG ICONA </li></ul> faremo in modo che sia allineati.
Esempio Facebook e Google Plus icona
<div class='social-book'><h3>Condividi questo post!</h3><ul>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Condividi su Facebook' src='URL ICONA FACEBOOK' title='Condividi su Facebook'/></a></li>
<li><a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><img alt='Condividi su Google Plus' src='URL_ICONA_GOOGLE_PLUS' title='Condividi su Google Plus'/></a></li>
</ul></div>
prima di ]]></b:skin> dovremo aggiungete il codice css che, in questo caso servirà per determinare le dimensioni delle icone e altri piccoli cambiamenti di stile:
.social-book { margin-top:20px; padding:0 15px 5px 15px; background-color: #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -khtml-border-radius: 15px; border:#7c7c7c 1px solid; align: center;}
.social-book h3{ color:#818081; padding:0px; text-transform:none; font-size:180%;}
.social-book img { width: 33px; height: 33px; border:0px none; float: none; margin:0px; padding:0px; background:transparent; }
Risultato visivo icone
Condividi questo post!
Ovviamente cambiando il codice CSS potremo cambiare lo stile a nostro piacere.
Le altre icone che potremmo aggiungere:
Yahoo icona
<li><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' target='_blank' title='condividi con Yahoo'><img src='ICONA_YAHOO'/></a></li>
Twitter icona
<li><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='ICONA_TWITTER' title='Tweet this'/></a></li>
Delicious icona
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Condividi su delicious'><img src='ICONA_DELICIOUS'/></a></li>
Digg icona
<li><a expr:href='"http://digg.com/submit?phase=3&url=" + data:post.url' target='_blank' title='Digg'><img src='ICONA_DIGG'/></a></li>
Furl icona
<li><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Furl'><img src='ICONA_FURL'/></a></li>
Technorati icona
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='ICONA_TECHNORATI' title='Technorati'/></a></li>
OkNotizie icona
<li><a expr:href='"http://oknotizie.alice.it/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='ICONA_OKNOTIZIE' title='Vota su OKNotizie'/></a></li>
Stumbleupon icona
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='ICONA_STUMBLEUPON' title='Condividi su StumbleUpon'/></a></li>
Reddit icona
<li><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='ICONA_REDDIT' title='Condividi con reddit'/></a></li>
Diggita icona
<a expr:href='"http://www.diggita.it/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='vota su Diggita' title='vota su Diggita' src='ICONA_DIGGITA'/></a>
Ma possiamo anche aggiungerne altre anch' esse molto utili :
Google Bookmark, icona
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src='ICONA_GOOGLE' title='Google'/></a></li>
Stampa le pagina
<a href="javascript:window.print();"><img src="ICONA STAMPANTE" alt="stampa la pagina" title="stampa la pagina"/></a>
Rss icona
<a href="http://iltuoblog.blogspot.com/feeds/post/default"><img src="ICONA RSS" alt="stampa la pagina" title="Iscriviti ai feed"/></a>
Nella parte in rosso dei tag ovviamente dovrete inserire il link delle icone che potrete trovare nel web anche gratis.
0 commenti:
Inserite il vostro nick name se volete una risposta altrimenti non si saprà a chi rispondere. Se inserite link verrà considerato spam e il commento non pubblicato.