Pubblicato il 26/11/09 - aggiornato il  | 8 commenti :

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

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à

-google

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

friendfeed

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

messaggio-generico

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

elemento-pagina

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.



8 commenti :

  1. Ciao,
    come si fa ad inserire il riquadro con le foto degli amici su facebook, e il pulsante "Diventa Fan" in un blog di Blogger, come hai fatto tu?

    Ciao e grazie se vorrai rispondermi.

    RispondiElimina
  2. @girandolo
    Per prima cosa devi creare una pagina fan, poi importare i feed del blog e inserirne il badge. E' tutto spiegato in questo post
    http://parsifal32.blogspot.com/2009/09/creare-una-pagina-fan-del-blog-ed.html
    che fa riferimento anche a altri articoli.
    Ciao

    RispondiElimina
  3. Ti ringrazio molto. Gli darò un'occhiata.
    Ne approfitto per chiederti un'altra cosa: come si fa ad inserire sotto il titolo dell'articolo due insiemi di annunci, uno a fianco all'altro, come hai fatto tu.
    Ho seguito tempo fa tutta la procedura per inserirne uno. Ma per metterne due affiancati come si fa?
    Sicuramente lo avrai spiegato in un tuo articolo ma ora mai sono così tanti... :-)

    RispondiElimina
  4. Ciao, sai come inserire dei referral personalizzati? so che devo modificare il javascript ma non so cosa o dove inserire il dominio... sapresti aiutarmi?
    Grazie!

    RispondiElimina
  5. @Giorgiogal
    Onestamente non ho capito a che genere di personalizzazione di riferisci. Vorresti creare una specie di banner pubblicitario? Non è che sia il massimo come grafico :)
    Se si tratta di un oggetto in flash come hosting puoi usare DropBox.

    RispondiElimina
  6. Buongiorno è possibile utilizzare "cambiando il messaggio ma non so come si fa" questo widgets è adattarlo all'informativa cookie gdpr per non cambiare il codice? Grazie

    RispondiElimina
    Risposte
    1. Il codice è del 2009, francamente non te lo consiglio in senso assoluto, meno che mai per il GDPR
      @#

      Elimina
  7. Grazie come sempre gentilissimo

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy