Pubblicato il 02/02/10 - aggiornato il  | 5 commenti :

Come inserire il widget di benvenuto direttamente nel modello e personalizzarlo completamente.

By con etichette , , , , ,
Qualche tempo fa ho presentato il cosiddetto widget di benvenuto che mostra un messaggio di saluto al visitatore che si trova a passare nel nostro sito con un invito a sottoscrivere i feed e la pagina fan di Facebook. La sua particolarità sta nel fatto che riesce a rilevare da quale sito proviene e mostra un'icona e un messaggio personalizzato a seconda che si venga da Google, Yahoo. Blogger, Digg, StumbleUpon, Youtube,  ecc. Ho aggiunto anche servizi italiani come OKNotizie e Diggita. In totale sono al momento 33; per l'elenco completo potate andare in questo post.
Ci sono alcune considerazioni da fare
  1. Nei commenti mi è stato fatto presente la difficoltà di personalizzare completamente il widget per adattarlo a tutti i modelli
  2. Lo script del widget l'ho caricato su Google Sites che, pur essendo la scelta migliore come hosting, qualche volta rallenta l'apertura della pagina
  3. Dall'inizio di quest'anno la velocità di caricamento diventa un importante parametro per il posizionamento dei post su Google
Ho quindi deciso di postare lo script direttamente nel modello con i seguenti benefici
  1. Non ci saranno limiti di banda (bandwidht)
  2. Il browser farà meno richieste di indirizzi e quindi sarà più veloce aprire la pagina
  3. Ci potrà essere una personalizzazione totale del widget anche se consigliabile solo ai più esperti
Per inserire il Widget di Benvenuto mediante questo sistema occorre
  1. Scaricare un modello completo del blog per un eventuale backup
  2. Eliminare il widget se lo avevamo già inserito mediante l'altra modalità
  3. Andare su Layout > Modifica HTML e cercare la seguente riga
</head>

Immediatamente sopra a questa riga occorre incollare il seguente codice


<!--INIZIO WIDGET DI BENVENUTO-->
<script type='text/javascript'>
//<![CDATA[
/**
* @author Kaushik (http://classictutorials.com)
* Widget tradotto in italiano e rielaborato da Parsifa32 (http://parsifal32.blogspot.com/)
*/
function showHideDiv(myRestrictedDomainList){
    var arrayOfRestrictedDomains = new Array();
    document.getElementById("mainDisplayDiv").style.display = 'block';
}
var myRestrictedDomainList = "http://parsifal32.blogspot.com/";
showHideDiv(myRestrictedDomainList);
function displayRequiredText(feedURL){
    var url = document.referrer;
    var dynamicHTMLText;
    /* Social book mark and search icons */
    var generalIcon = "http://public.blu.livefilestore.com/y1p55mdRjiY3TZxHb1cRV4E3HJdKtRP0CEWatRyYaGKX-_MeJ8uO6MtFIskkQ2jwfibvzK8akQuUeiHJ_NGwIt5ew/rss-icona.png";
    var googleIcon = "http://public.blu.livefilestore.com/y1pRfbyxuZOmgV4HY6IMUbJvGwbht0BEBJnaaBo-He5k9bJq-z8LPoVCEjaqVInNzsQUBIbz0IeCQ6rb7szvXtywA/google_icona.png";
    var yahooIcon = "http://public.blu.livefilestore.com/y1pDFUO-YBmT0CWpaj7JOtckC9ODk2oJqeTpwMMtMKVel5ccJy6Ud8ppYfoaGsMUCzoMBsu4O8mLiXZs8f0bs4qjA/yahoo-icona.jpg";
    var bingIcon = "http://public.blu.livefilestore.com/y1pcLL8xdHX5p_P_Ctcq0RS9zz4cTUHxSzSGsoB7-5qZIqNwdIQGLgLLscDJIZ1ZEN_Pb1IYc6ZRCFtGt1wq-yi0g/bing-icona.png";
    var diggitaIcon = "http://public.blu.livefilestore.com/y1pTLuDAVm8ZFmkNqJnno0dowQZdOxo9Lg58uPDZ_EYSFWJaskT2omNE-r1f_ZyqJpH3XP45pvboKDfkLOhXErJGA/diggita-icona.jpeg";
    var bloggerIcon = "http://public.blu.livefilestore.com/y1pONAqe9NgthqkbJMFCV5X2MUtWiOR5zjvVEIgq0O08DSTjotSWMgRoOWekvddzoNSdlJJuCLxyacIzfiISACcAg/blogger-icon.jpg";
    var diggIcon = "http://img25.imageshack.us/img25/8466/diggw.png";
    var stumbIcon = "http://img18.imageshack.us/img18/2233/stumbleupono.png";
    var deliciousIcon = "http://img8.imageshack.us/img8/840/deliciousv.png";
    var facebookIcon = "http://img195.imageshack.us/img195/3755/facebookx.png";
    var flickrIcon = "http://img200.imageshack.us/img200/541/flickrp.png";
    var friendfeedIcon = "http://img195.imageshack.us/img195/1743/friendfeed.png";
    var friendsterIcon = "http://img195.imageshack.us/img195/5779/friendsterb.png";
    var furlIcon = "http://img25.imageshack.us/img25/8360/furlv.png";
    var lastfmIcon = "http://img25.imageshack.us/img25/3770/lastfmjzy.png";
    var linkedinIcon = "http://img195.imageshack.us/img195/3427/linkedin.png";
    var livejournalIcon = "http://img200.imageshack.us/img200/756/livejournal.png";
    var magnoliaIcon = "http://img39.imageshack.us/img39/6933/magnolia.png";
    var mixxIcon = "http://img39.imageshack.us/img39/7815/mixx.png";
    var myspaceIcon = "http://img39.imageshack.us/img39/5831/myspaceq.png";
    var netvibesIcon = "http://img200.imageshack.us/img200/1662/netvibes.png";
    var newsvineIcon = "http://img195.imageshack.us/img195/1458/newsvinex.png";
    var oknotizieIcon = "http://public.blu.livefilestore.com/y1phsjzR76U7BR1RoDvw8-kKJbQkV90bQZCjA9ZbYWPz6wNzk7KRkmSD4qWJ8kAspv7bo5gWqr_4Ca4-xHUwij69g/oknotizie-icona.png";
    var picasaIcon = "http://img25.imageshack.us/img25/8716/picasaz.png";
    var pownceIcon = "http://img25.imageshack.us/img25/706/powncer.png";
    var redditIcon = "http://img25.imageshack.us/img25/6296/redditl.png";
    var technoratiIcon = "http://img25.imageshack.us/img25/7565/technoratib.png";
    var twitterIcon = "http://img25.imageshack.us/img25/929/twitterruz.png";
    var vimeoIcon = "http://img25.imageshack.us/img25/3870/vimeo.png";
    var webshotsIcon = "http://img39.imageshack.us/img39/9844/webshots.png";
    var wordpressIcon = "http://img200.imageshack.us/img200/4008/wordpress.png";
    var yelpIcon = "http://img195.imageshack.us/img195/5002/yelp.png";
    var youtubeIcon = "http://img18.imageshack.us/img18/882/youtubed.png";
    /* Define Search criteria*/
    var cameFromGoogle = new RegExp("google");
    var cameFromBing = new RegExp("bing");
    var cameFromBlogger = new RegExp("blogger");
    var cameFromDiggita = new RegExp("diggita");
    var cameFromYahoo = new RegExp("yahoo");
    var cameFromDigg = new RegExp("digg");   
    var cameFromStumbleupon = new RegExp("stumbleupon");
    var cameFromDelicious = new RegExp("delicious");
    var cameFromFacebook = new RegExp("facebook");
    var cameFromFlickr = new RegExp("flickr");
    var cameFromFriendfeed = new RegExp("friendfeed");
    var cameFromFriendster = new RegExp("friendster");
    var cameFromFurl = new RegExp("furl");
    var cameFromLastfm = new RegExp("lastfm");
    var cameFromLinkedin = new RegExp("linkedin");
    var cameFromLivejournal = new RegExp("livejournal");
    var cameFromMagnolia = new RegExp("magnolia");
    var cameFromMixx = new RegExp("mixx");
    var cameFromMyspace = new RegExp("myspace");
    var cameFromNetvibes = new RegExp("netvibes");
    var cameFromNewsvine = new RegExp("newsvine");
    var cameFromOknotizie = new RegExp("oknotizie");
    var cameFromPicasa = new RegExp("picasa");
    var cameFromPownce = new RegExp("pownce");
    var cameFromReddit = new RegExp("reddit");
    var cameFromTechnorati = new RegExp("technorati");
    var cameFromTwitter = new RegExp("twitter");
    var cameFromVimeo = new RegExp("vimeo");
    var cameFromWebshots = new RegExp("webshots");
    var cameFromWordpress = new RegExp("wordpress");
    var cameFromYelp = new RegExp("yelp");
    var cameFromYoutube = new RegExp("youtube");
    /* Content to be populated*/
    var googleContent = "<table><tr><td><img src='"+googleIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Google!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var bingContent = "<table><tr><td><img src='"+bingIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Bing!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var bloggerContent = "<table><tr><td><img src='"+bloggerIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao! <b>Amico di Blogger</b> Se trovi questo sito interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var diggitaContent = "<table><tr><td><img src='"+diggitaIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Diggita!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a>  per essere sempre aggiornato sugli ultimi post. Se non sai che cosa sono i feed, <a href='http://parsifal32.blogspot.com/2009/11/cosa-sono-i-feed-e-come-si-usano-solo.html' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>"   
    var yahooContent = "<table><tr><td><img src='"+yahooIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Yahoo!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b> Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>"
    var diggContent = "<table><tr><td><img src='"+diggIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Digg!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a>  per essere sempre aggiornato sugli ultimi post. Se non sai che cosa sono i feed, <a href='http://parsifal32.blogspot.com/2009/11/cosa-sono-i-feed-e-come-si-usano-solo.html' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>"   
    var stmbleuponURL = "http://www.stumbleupon.com/submit?url=" + document.location.href;
    var stumbleuponContent = "<table><tr><td><img src='"+stumbIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>StumblerUpon!</b> Non dimenticarti di <a href='" + stmbleuponURL + "' style='color:#940F04'><b>darmi un thumb</b></a> se ti piace questa pagina. </font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/aggiornato-il-widget-del-messaggio-di.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>"
        var deliciousContent = "<table><tr><td><img src='"+deliciousIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao Amico di <b>Delicious!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var facebookContent = "<table><tr><td><img src='"+facebookIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Amico di Facebook!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed </b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per essere aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
        var flickrContent = "<table><tr><td><img src='"+flickrIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Amico di Flickr!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var friendfeedContent = "<table><tr><td><img src='"+friendfeedIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Amico di Friendfeed! </b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var friendsterContent = "<table><tr><td><img src='"+friendsterIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>FriendSter user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed </b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var furlContent = "<table><tr><td><img src='"+furlIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Furl user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var lastfmContent = "<table><tr><td><img src='"+lastfmIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Lastf user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var linkedinContent = "<table><tr><td><img src='"+linkedinIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Linkedin user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var livejournalContent = "<table><tr><td><img src='"+livejournalIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Livejournal user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var magnoliaContent = "<table><tr><td><img src='"+magnoliaIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Magnolia user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var mixxContent = "<table><tr><td><img src='"+mixxIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Mixx user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var myspaceContent = "<table><tr><td><img src='"+myspaceIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>amico di MySpace!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed </b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var netvibesContent = "<table><tr><td><img src='"+netvibesIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Netvibes user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var newsvineContent = "<table><tr><td><img src='"+newsvineIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Newsvine user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var oknotizieContent = "<table><tr><td><img src='"+oknotizieIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>OKNotizie!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a>  per essere sempre aggiornato sugli ultimi post. Se non sai che cosa sono i feed, <a href='http://parsifal32.blogspot.com/2009/11/cosa-sono-i-feed-e-come-si-usano-solo.html' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>"
    var picasaContent = "<table><tr><td><img src='"+picasaIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Picasa!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var pownceContent = "<table><tr><td><img src='"+pownceIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Pownce user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var redditContent = "<table><tr><td><img src='"+redditIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Reddit!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a>  per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var technoratiContent = "<table><tr><td><img src='"+technoratiIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Technorati!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var twitterContent = "<table><tr><td><img src='"+twitterIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da<b>Twitter!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var vimeoContent = "<table><tr><td><img src='"+vimeoIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Vimeo</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var webshotsContent = "<table><tr><td><img src='"+webshotsIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Webshots user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var wordpressContent = "<table><tr><td><img src='"+wordpressIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Wordpress!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var yelpContent = "<table><tr><td><img src='"+yelpIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Yelp!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var youtubeContent = "<table><tr><td><img src='"+youtubeIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Youtube!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var general = "<table><tr><td><img src='"+generalIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao!</b> Se sei nuovo di qui ti potrebbe interessare <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a> per avere tutti gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    /* Function to call the dynamic contents*/
    if (cameFromGoogle.test(url)) {
            dynamicHTMLText = googleContent;
        }
    else if (cameFromBing.test(url)) {
            dynamicHTMLText = bingContent;
        }
    else if (cameFromDiggita.test(url)) {
            dynamicHTMLText = diggitaContent;
        }
    else if (cameFromBlogger.test(url)) {
            dynamicHTMLText = bloggerContent;
        }   
    else if (cameFromDigg.test(url)) {
            dynamicHTMLText = diggContent;
        }   
    else if (cameFromYahoo.test(url)) {
            dynamicHTMLText = yahooContent;
        }
    else if (cameFromStumbleupon.test(url)) {
            dynamicHTMLText = stumbleuponContent;
        }
    else if (cameFromDelicious.test(url)) {
            dynamicHTMLText = deliciousContent;
        }
    else if (cameFromFacebook.test(url)) {
            dynamicHTMLText = facebookContent;
        }
    else if (cameFromFlickr.test(url)) {
            dynamicHTMLText = flickrContent;
        }
    else if (cameFromFriendfeed.test(url)) {
            dynamicHTMLText = friendfeedContent;
        }
    else if (cameFromFriendster.test(url)) {
            dynamicHTMLText = friendsterContent;
        }
    else if (cameFromFurl.test(url)) {
            dynamicHTMLText = furlContent;
        }
    else if (cameFromLastfm.test(url)) {
            dynamicHTMLText = lastfmContent;
        }
    else if (cameFromLinkedin.test(url)) {
            dynamicHTMLText = linkedinContent;
        }
    else if (cameFromLivejournal.test(url)) {
            dynamicHTMLText = livejournalContent;
        }
    else if (cameFromMagnolia.test(url)) {
            dynamicHTMLText = magnoliaContent;
        }
    else if (cameFromMixx.test(url)) {
            dynamicHTMLText = mixxContent;
        }
    else if (cameFromMyspace.test(url)) {
            dynamicHTMLText = myspaceContent;
        }
    else if (cameFromNetvibes.test(url)) {
            dynamicHTMLText = netvibesContent;
        }
    else if (cameFromNewsvine.test(url)) {
            dynamicHTMLText = newsvineContent;
        }
    else if (cameFromPicasa.test(url)) {
            dynamicHTMLText = picasaContent;
        }
    else if (cameFromOknotizie.test(url)) {
            dynamicHTMLText = oknotizieContent;
        }   
    else if (cameFromPownce.test(url)) {
            dynamicHTMLText = pownceContent;
        }
    else if (cameFromReddit.test(url)) {
            dynamicHTMLText = redditContent;
        }
    else if (cameFromTechnorati.test(url)) {
            dynamicHTMLText = technoratiContent;
        }
    else if (cameFromTwitter.test(url)) {
            dynamicHTMLText = twitterContent;
        }
    else if (cameFromVimeo.test(url)) {
            dynamicHTMLText = vimeoContent;
        }
    else if (cameFromWebshots.test(url)) {
            dynamicHTMLText = webshotsContent;
        }
    else if (cameFromWordpress.test(url)) {
            dynamicHTMLText = wordpressContent;
        }
    else if (cameFromYelp.test(url)) {
            dynamicHTMLText = yelpContent;
        }
    else if (cameFromYoutube.test(url)) {
            dynamicHTMLText = youtubeContent;
        }
    else {
            dynamicHTMLText = general;
        }
    return dynamicHTMLText;
}
function showHideDiv(myRestrictedDomainList){
    var arrayOfRestrictedDomains = new Array();
    document.getElementById("mainDisplayDiv").style.display = 'block';
}
//]]>
</script>
<!--FINE WIDGET DI BENVENUTO-->
L'unica personalizzazione fondamentale è quella dell'inserimento dell'URL del blog evidenziato di rosso. Essendo un widget che comprende più di trenta servizi ci sono molte stringhe ripetute quindi, nel caso si volesse cambiarne qualcuna, è opportuno usare Notepad++ che ha anche la funzione di sostituire un pezzo di codice contemporaneamente in più posizioni. Vi do alcuni accenni di possibili modifiche

  1. La famiglia di caratteri è la Trebuchet MS, se si ha un blog con un altra famiglia è sufficiente sostituire tutte le occorrenze di Trebuchet MS con p.e.con  Arial o San Serif o Verdana, ecc.
  2. La dimensione del carattere del messaggio è font size='3'. Se si vogliono caratteri più piccoli si metta font size='2'.
  3. Il colore del testo del messaggio è #191919, si può sostituire con il colore del testo del nostro blog
  4. Il colore dei link è #940F04 e anche in questo caso si può fare la stessa operazione
Dopo aver fatto le personalizzazioni e aver incollato il codice si Salva il modello. Non si vedrà ancora nulla perché dobbiamo andare in Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del Sito, incollare il seguente codice senza inserire il Titolo



<div id="mainDisplayDiv" style="background:#FFFFFF;border:2px dashed #003366;display:none">
<div id="dynamicContentDisplayed">
</div>
<script type="text/javascript">
var feedURL = "http://feeds.feedburner.com/ComputerChePassione";
var feedFeed = "http://parsifal32.blogspot.com/2009/11/cosa-sono-i-feed-e-come-si-usano-solo.html";
var PageFanURL = "http://www.facebook.com/pages/IDEE-PER-COMPUTER-ED-INTERNET/207337935513";
var dynamicHTMLText = displayRequiredText(feedURL);
document.getElementById("dynamicContentDisplayed").innerHTML = dynamicHTMLText;
</script>
</div>
<script type="text/javascript">
var myRestrictedDomainList = "URL_del_blog";
showHideDiv(myRestrictedDomainList);
</script>

Le parti evidenziate di rosse vanno personalizzare in questo modo

  1. In var feedURL  va messo l'indirizzo dei feed del vostro blog
  2. In var feedFeed si può inserire un indirizzo di una pagina che spiega cosa sono i feed oppure si può lasciare anche la pagina di questo blog
  3. In var PageFanURL bisogna incollare l'indirizzo della nostra pagina fan
  4. #FFFFFF è il colore di sfondo del widget e può essere cambiato
  5. 2px sono la larghezza del bordo. Se non volete bordo mettete 0px 
  6. dashed è lo stile del bordo che, in questo caso, è tratteggiato, se lo volete continuo al suo posto inserite solid, se mettete dotted sarà punteggiato
  7. #003366 è il colore del bordo e può essere personalizzato a piacere
  8. In URL_del_Blog va  inserito l'indirizzo del sito
Finalmente si clicca su Salva e si posiziona l'elemento nella parte alta del modello dove vanno a finire gli occhi del visitatore appena entrato nel blog
widget di benvenuto
Da quando ho questo widget nel blog ho notato un aumento superiore alla media di sottoscrizioni ai feed e alla pagina fan. 


5 commenti :

  1. e5 febbraio 2010 alle ore 17:22

    mi appresto ad inserire questo utile strumento...una domanda, per diminuire le dimensioni del mio header cosa devo fare???

    RispondiElimina
  2. Ernesto Tirinnanzi5 febbraio 2010 alle ore 17:31

    @bizzo
    E' tutta una questione geometrica :-)
    Forse ti potrà essere di aiuto questo post
    http://parsifal32.blogspot.com/2009/08/come-aumentare-la-larghezza-delle.html

    RispondiElimina
  3. Anonimo8 luglio 2011 alle ore 13:47

    scusa,ma vorrei sapere come si puo cambiare l' icona

    RispondiElimina
  4. Ernesto Tirinnanzi8 luglio 2011 alle ore 13:53

    @Manuel
    Le icone sono state caricate su ImageShack e sono visibili nelle righe tipo questa

    var diggIcon = "http://img25.imageshack.us/img25/8466/diggw.png";

    per modificare l'immagine devi caricarne un'altra su un qualsiasi hosting (picasa, dropbox, ecc) e sostituirne l'indirizzo, per esempio a quella di Digg

    http://img25.imageshack.us/img25/8466/diggw.png

    RispondiElimina
  5. Anonimo8 luglio 2011 alle ore 20:48

    grz

    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

Iscriviti a: Commenti sul post ( Atom )