30 novembre 2009

Come inserire un widget di Benvenuto in un blog su Blogger con invito a abbonarsi ai feed e iscriversi alla Pagina Fan su Facebook.

Ho reso ancora più sofisticato il widget di benvenuto in un blog su Blogger con l'invito a sottoscrivere i feed. Ricordo che questo gadget ha la particolarità di rilevare la provenienza del visitatore, quindi quest'ultimo visualizzerà un messaggio personalizzato a seconda se proviene da  una ricerca su Google oppure ha cliccato su un link di FriendFeed o ancora proviene dalla Bacheca di Blogger. Le "provenienze supportate" sono attualmente 32 visto che ho recentemente ho aggiunto anche Bing, Blogger, Diggita e OKNotizie. Volendo posso aggiungere anche altri servizi; l'unico problema è che non si riesce a trovare un'icona di 50x50 pixel di siti come Wikio, Zic Zac, ecc.

Data la grande importanza che sta assumendo Facebook anche per quanto riguarda l'attività di blogging e considerato che molti blog hanno anche una loro pagina fan su Facebook, ho ritenuto opportuno aggiungere anche un invito a diventare un fan del blog.

Coloro che non conoscessero le procedure per queste sinergie tra blog e Facebook possono leggersi i post

  1. Come creare un gruppo o una pagina fan su Facebook -
  2. Importare i feed del blog nella pagina fan con NetworkedBlogs -

Con queste ulteriori personalizzazioni il messaggio che vedrà apparire all'inizio della pagina un navigatore che, per esempio, proviene da Google sarà

messaggio-benvenuto

Come vedete c'è l'icona del sito, che sarà ovviamente diversa da provenienza a provenienza, e un breve messaggio di due righe con tre collegamenti. I link sono all'URL dei feed del blog, all'indirizzo della pagina fan e a un post con una breve spiegazione "for dummies" di cosa siano i feed. Tutti questi link sono personalizzabili e possono essere inseriti da chi ha intenzione di utilizzare questo gadget.

Bisogna andare su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollare il seguente codice

<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/Testo_da_mostrare10.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 feedFeed = "http://parsifal32.blogspot.com/2009/11/cosa-sono-i-feed-e-come-si-usano-solo.html";
var PageFanURL = "URL_Pagina_Fan";
var dynamicHTMLText = displayRequiredText(feedURL);
document.getElementById("dynamicContentDisplayed").innerHTML = dynamicHTMLText;
</script>
</div>
<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/HideShowDiv.js" type="text/javascript">
</script>
<script type="text/javascript">
//Inserisci il nome del tuo dominio
var myRestrictedDomainList = "URL_del_blog";
showHideDiv(myRestrictedDomainList);
</script>

Ecco il relativo screenshot

widget-benvenuto

Le personalizzazioni da fare sono di diverso tipo e riguardano la sostanza e l'aspetto:

  1. :#F8F8FF è il colore dello sfondo del rettangolo del messaggio
  2. 1px è la dimensione in pixel del bordo del box di benvenuto
  3. solid è la sua forma. Si può scegliere anche dashed (tratteggiato) oppure dotted (punteggiato)
  4. A "URL_del_Feed" va sostituito l'indirizzo dei feed del blog
  5. L'indirizzo accanto a var feedFeed è quello di una pagina di questo blog in cui si spiega con semplicità che cosa siano i feed e come utilizzarli. Si può sostituire con un indirizzo a una nostra pagina che abbia il medesimo intento (in questo caso non scopiazzate la mia!)
  6. A "URL_Pagina_Fan" si sostituisce l'indirizzo della pagina fan del blog su Facebook

Dopo aver cliccato su Salva si potrà testare il risultato arrivando sul blog cliccando su uno shortURL di Facebook,  oppure facendo una ricerca su Yahoo o su Bing. Se volete fare una ulteriore prova andate nella casella della ricerca personalizzata e cercate qualche articolo con una parola chiave qualsiasi. Quando ci cliccherete sopra vi apparirà il messaggio di benvenuto per coloro che arrivano da Google.

Se non avete una pagina fan su Facebook e desiderate solo il richiamo ai Feed potete inserire uno dei codici presenti nell'articolo del widget di benvenuto, nello stesso post è presente la lista dei servizi che sono supportati.




15 commenti:

  1. Ti ringrazio per lo script; magari, se per te non è un problema, farò qualche modifica minima per adattarlo allo stile del mio blog (lasciando ovviamente il link per i credits) ;)
    Già che c'ero, mi son pure creato una pagina fan su Facebook... Grazie ancora!

    RispondiElimina
  2. @Kael
    Fai pure, il widget è in continuo divenire, se trovo delle icone decenti inserisco anche servizi come wikio, ziczac, fainformazione, liquida, blogbabel, ecc

    RispondiElimina
  3. ciao parsifal, un altro simpatico script che ho inserito nel mio bolg grazie a te,come al solito tutto preciso,

    RispondiElimina
  4. @Alfonso
    Hai fatto un errore nell'inserire l'indirizzo dei tuoi feed in URL_de_feed. Hai infatti inserito questo indirizzo
    http://www.blogger.com/feeds/06379751488056645045/blogs
    che non porta a nulla. Dovevi invece inserire quest'altro
    http://alfonso-grandis.blogspot.com/feeds/posts/default
    Ciao e buone feste

    RispondiElimina
  5. ciao Parsifal hai ragione,avevo inserito il link errato,l'ho modificato con quello indicatomi da te ed ora mi porta al blog specifico,grazie di nuovo per la tua disponibilita'cordiali saluti, ALFONSO.

    RispondiElimina
  6. Ciao e complimenti per il blog!
    Ho trovato diverse cose interessanti...
    Ho anche installato questo widget ma stona completamente con il layout del mio blog. Come faccio a cambiare il colore delle scrite e la dimensione?
    Grazie mille!

    RispondiElimina
  7. @enrico
    La dimensione è automatica e prende tutta la larghezza del main-wrapper; invece per i colori delle scritte magari quando ho un po' di tempo inserisco dei codici con più opzioni.
    P.S. Ho visto il tuo blog qui
    http://templatexblogger.blogspot.com/ e non mi sembra che stoni, o forse ti riferisci alla versione di questo post anche con la pagina fan?

    RispondiElimina
  8. Grazie per la risposta immediata!
    Stona secondo me, più che la dimensione del font, il colore sia del testo che del link.
    Non che così sia brutto ma sarebbe perfetto averlo con gli stessi colori del blog...
    Grazie lo stesso e... attenderò modifiche!

    RispondiElimina
  9. Ciao trovo ottimo il tuo lavoro, ma volevo sapere se potevi fare una versione del widget con il testo in bianco.. perché lo sfondo scuro sono riuscito a farlo cambiando il codice ma non riesco a cambiare il colore dei caratteri! Grazie in anticipo!

    RispondiElimina
    Risposte
    1. @SamueleLoTruglio
      Prova a cambiare questa riga
      style="background:#F8F8FF;border:1px solid #B6AFA9;display:none"
      in questo modo
      style="color:#FFFFFF; background:#000000; border:1px solid #111111; display:none"
      con i codice del colore che ho messo come bianco e con lo sfondo nero. Tu ovviamente puoi personalizzarli.

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. No... non funziona... riesce comunque a cambiare solo il background! il testo resta scuro...

      Elimina
    4. @SamueleLoTruglio
      Allora prova così
      color:#FFFFFF !important; background:#000000;

      Elimina
    5. niente... riesce solo a cambiare il background come avevo già fatto io...

      Elimina
    6. @SamueleLoTruglio
      Allora non ti rimane che fare questo grosso lavoro.
      1)Scarica questo file
      http://sites.google.com/site/ideepercomputeredinternet/script-1/Testo_da_mostrare10.js
      2)Aprilo con Notepad++
      http://www.ideepercomputeredinternet.com/2009/12/notepad-per-modificare-modelli.html
      3)Trova tutti i codici dei colori del testo che sono questi
      color='#191919'
      e se vuoi anche i codici del colore dei link che sono quest'altri
      color:#940F04'
      Ce ne sono per ogni servizio supportato.
      4)Sostituiscili con altri colori a tua scelta
      5)Ricarica il file javascript su Google Sites
      http://www.ideepercomputeredinternet.com/2010/05/come-caricare-file-javascript-e-css-su.html
      6)Nel codice sostituisci l'indirizzo del file scaricato con quello modificato e appena caricato.

      Elimina

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