Come inserire un widget personalizzato di benvenuto nei blog su Blogger.

Aggiornamento: Il widget è stato completato con l'inserimento anche di Bing e Blogger. Per installare l'ultima versione vai all'articolo

• Aggiornamento del widget del messaggio di benvenuto (greeting box) per Blogger -

Articolo pre-esistente - Le persone che arrivano in una pagina del nostro blog possono aver cliccato su un link dopo una ricerca su Google oppure arrivare da StumbleUpon, o ancora aver cliccato su un tweet di Twitter. Ci sono decine di possibilità per essere trovati e quindi letti da un navigatore. Uno dei compiti più importanti del blogger è quello di fidelizzare i propri lettori quindi che cosa c'è di meglio che inserire un bel messaggio di benvenuto con l'invito a sottoscrivere i feed?

La novità della personalizzazione che vi voglio presentare è che il messaggio sarà diverso a seconda del percorso che è stato fatto per trovarci. Se il navigatore è giunto fino a noi con una ricerca su Google ecco quello che apparirà

-

Se ha invece cliccato su un post di FriendFeed il messaggio di benvenuto sarà il seguente

Ci sarà anche un messaggio generico quando non sarà possibile stabilire esattamente la provenienza

Questo vale per una trentina di servizi diversi che vado ad elencare:

   1. Generico
   2. Google
   3. Yahoo
   4. Digg
   5. Stumbleupon
   6. Delicious
   7. Facebook
   8. Flickr
   9. Friendfeed
  10. Friendster
  11. Furl
  12. Lastfm
  13. Linkedin
  14. Livejournal
  15. Magnolia
  16. Mixx
  17. Myspace
  18. Netvibes
  19. Newsvine
  20. Picasa
  21. Pownce
  22. Reddit
  23. Technorati
  24. Twitter
  25. Vimeo
  26. Webshots
  27. Wordpress
  28. Yelp
  29. Youtube

E' indubbiamente molto "cool" mostrare al visitatore un messaggio personalizzato a seconda della sua provenienza. Un tale messaggio preferibilmente deve essere inserito ad inizio pagina e deve essere visibile sia in Homepage che in tutti gli articoli. Per inserirlo bisogna andare in Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript ed incollare il seguente codice

<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/Testo_da_mostrare2.js?" type="text/javascript">
</script>
<div id="mainDisplayDiv" style="background:#F8F8FF;border:1px solid #B6AFA9;display:none">
<div id="dynamicContentDisplayed">
</div>
<script type="text/javascript">
// Give your feed url here
var feedURL = "URL_del_Feed";
var dynamicHTMLText = displayRequiredText(feedURL);
document.getElementById("dynamicContentDisplayed").innerHTML = dynamicHTMLText;
</script>
</div>
<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/HideShowDiv2.js" type="text/javascript">
</script>
<script type="text/javascript">
//Inserisci il nome del tuo dominio
var myRestrictedDomainList = "URL_del_blog";
showHideDiv(myRestrictedDomainList);
</script>

dove dovete inserire l'URL dei vostri feed che sarà una cosa del tipo

http://nomeblog.blogspot.com/feeds/posts/default

 e l'URL del vostro blog.

Potete anche personalizzare il colore di background dell'elemento (#F8F8FF), lo spessore del bordo (1px), la sua forma (solid) e il suo colore (#B6AFA9). Ho inserito dei colori chiari che vanno bene per tutti i blog ma possono ovviamente essere cambiati. L'elemento pagina così creato va inserito con il mouse sopra il post per avere un effetto migliore e una maggiore efficacia

Salvate il modello e provate a entrare nel vostro blog tramite una ricerca su Google o un link su uno dei servi elencati e vedrete il Messaggio di Benvenuto Personalizzato. Provate a cliccare sul mio blog in questa pagina di Google, oppure in uno "short URL" della  pagina fan di questo blog su Facebook per testare l'efficacia del widget.

Gli script che ho usato fanno riferimento a Thaya Kareeson, che ha creato un plugin simile per Wordpress, e a Classic Tutorials che lo ha riadattato per Blogger. Per quanto mi riguarda ho tradotto gli script in italiano e fatto qualche modifica nell'aspetto.