Pubblicato il 01/05/14 - aggiornato il  | 7 commenti :

Icone fluttuanti per social network.

Come mostrare in un blog o in una pagina web tre icone fluttuasnti collegate con gli account di social network, di pagine fan, di pagine business o altro ancora.
Per invogliare i lettori a sottoscrivere la pagina fan collegata al blog o a inserirci nelle sue cerchie di Google Plus sono stati realizzati innumerevoli widget accattivanti. In questo articolo presenterò una alternativa sicuramente originale che consiste nel mostrare tre icone che si spostano casualmente nel layout del blog e, se i lettori ci cliccano sopra, apriranno una nuova scheda con la pagina collegata che potrebbe essere la pagina fan di Facebook oppure la pagina business di Google+.

Il limite di questo gadget è che è strutturato per tre icone che quindi non possono diventare due oppure quattro. Questo lo faccio presente subito per stoppare possibili richieste nei commenti in tal senso. Quello che si può scegliere senza limitazioni sono il tipo di icone, i link collegati e i social prescelti che potrebbero essere anche Pinterest, Instagram e Youtube invece di quelli proposti che sono Facebook, Twitter e Google+. Presenterò l'inserimento di questa personalizzazione in un blog su Blogger ma non esistono tag specifici di questa piattaforma e quindi può essere installata in qualsiasi pagina web che supporti il javascript.

icone-social-network

Ho scelto queste icone in stile wood ma si tratta solo di una proposta dovuta al fatto che le ho estratte da un set di icone gratuite anche per uso commerciale trovato su IconFinder.



Per l'installazione di questo widget dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra a questa si incolla il seguente codice

<!-- Social Fluttuanti Inizio -->
<script src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/social_fluttuanti.js' type='text/javascript'/>
<script type='text/javascript'> var immaginea, immagineb, immaginec
function pagestart(){ immaginea=new ipcj1(&quot;immaginea&quot;,70,82);
immagineb=new ipcj1(&quot;immagineb&quot;,50,60);
immaginec=new ipcj1(&quot;immaginec&quot;,30,40);
idpceinmov3(&quot;immaginea&quot;);
idpceinmov3(&quot;immagineb&quot;);
idpceinmov3(&quot;immaginec&quot;);
} if (window.addEventListener)
window.addEventListener(&quot;load&quot;, pagestart, false)
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, pagestart)
else if (document.getElementByid)
window.onload=pagestart </script>
<!-- Social Fluttuanti Fine -->

Si salva il modello. Ora si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla questo nuovo codice personalizzabile

<div id="immaginea" style="height: 70; left: -300px; position: absolute; width: 70;">
<a href="https://www.facebook.com/ideepercomputeredinternet" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_wbq_zqRPQ7fVguBEMEIC__nSqt8mGnKHFhPW9eWIKdImiWmPP9PLNlSb0RbRORNM4QN9pwbGx2CnpyjfDHEPy_aB9xX-XhgM1wBpngElv14H7QP3NSAZNERUy4lesje4ZAYDcnpKN8/s70-p-no/" /></a></div>
<div id="immagineb" style="height: 70; left: -400px; position: absolute; width: 70;">
<a href="https://twitter.com/parsifal32" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEKTOEzkFvKkwLNVKxZ-zpt9YzQhF1W1ToaGHKHTzKZImv2QiDAYIMA-bJ1Wv9h3gV1fXOQIRAnBu8zt0NZzPnhve05T1flNIUKvqbEi-HadAO7od-q6_WR4bqvMD4SUK0ahJBFoSMzS8/s70-p-no/" /></a></div>
<div id="immaginec" style="height: 70; left: -500px; position: absolute; width: 70;">
<a href="https://plus.google.com/+ErnestoTirinnanzi" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3nKYCTnze7ZRGMKeCM4O4YAU3vjPJ6C39IcA06sIQ4cAcrknCP6dFWEB0WsJZQS-E6GTKbx8Vz7L3MJ0BF-z9T-B9bKjVd5SxpKMMcpybGZkp-x4vfR0jBeZcZ85C0TJclcIz786Lso/s70-p-no/" /></a></div>

Vanno tolti i link ai miei account e sostituiti con quelli dei vostri. Le immagini sono state settate di dimensioni 70x70 pixel e il target="_blank" fa aprire il link in un'altra scheda. Si salva e il suo posizionamento non dovrebbe incidere sul funzionamento del widget. Questo secondo codice può essere incollato anche in un post o in una pagina statica in Modalità HTML.

Aggiornamento: Nella Demo si visualizza una linea tratteggiata rossa quando si passa con il mouse sopra alle  icone. Si tratta di un effetto hover specifico di quel blog di prova e non del widget.


7 commenti :

  1. ciao Ernesto a me piacciono molto quelle che hai sotto all casella di ricerca ma non le trovo

    RispondiElimina
    Risposte
    1. Sono le icone in tre dimensioni
      http://www.ideepercomputeredinternet.com/2013/03/3d-social-icons.html
      @#

      Elimina
  2. Buongiorno Ernesto io ho un problema gravissimo. Il 9 Maggio mi scade il dominio e sto cercando di rinnovarlo tramite istruzioni inviatemi da Google tramite mail. Non riesco però a rinnovarlo perché mi dice
    "Ci scusiamo per il disagio. I nostri tecnici sono stati informati di questo problema e stanno lavorando per trovare una soluzione. Riprova più tardi."
    come posso risolvere? grazie.

    RispondiElimina
    Risposte
    1. Ovviamente non ti posso aiutare. Se i tecnici sono informati ci penseranno loro a rimettere tutto a posto :)
      @#

      Elimina
  3. Sono capitata nel posto giusto!
    Ciao Ernesto, ti ringrazio per tutto quello che metti a disposizione! Le tue spiegazioni capitano a puntino per un capra come me...
    A presto, Maura

    RispondiElimina
  4. naaaaaaa!!!! i fantasmini di Facebook e compagnia (di legno) è una tamarrata dai, nemmeno il "boyscout di Gelli" avrebbe pensato a un idea simile! :))

    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