• M
    User •

    Creazione del proprio "Bookmarking & Sharing Device"

    Buongiorno a tutti! :sun:

    Si parla tanto di social marketing, bookmarking e di condivisione dei contenuti per attrarre nuovi visitatori sui propri siti web.

    Bene, in questo thread, vorrei creare insieme a voi un semplice tool (leggero, facilmente integrabile nei propri siti web e soprattutto che non crei conflitti con gli eventuali altri script presenti nella pagina) per poter condividere le pagine dei propri siti sui principali **Social Network **(di seguito, SN).

    Come prima cosa riflettiamo bene su cosa ci occorre realmente. I bottoni che si trovano in rete (ad esempio: ShareThisTM, AddThisTM, etc.) generalmente contengono moltissime opzioni e molti dei SN proposti sono inutili, poichè ai più sconosciuti. Inoltre, vi parlo della mia personale esperienza, possono comportare problemi (non piccoli!) di compatibilità con gli altri script, eventualmente presenti nel sito.

    Ciò che al momento desideriamo realizzare è, invece, un** semplice** bottone che, una volta premuto, dia la possibilità al navigatore di scegliere tra un ristretto gruppo di SN e di condividere la pagina in cui si trova.

    Se l'idea può piacervi restate connessi! :gthi:

    Maino

    0
  • M
    User •

    Prima di iniziare ci tengo a precisare che questo non vuole assolutamente essere un tutorial inteso, come al solito, a senso unico... Io non sono un esperto di programmazione!!

    Ognuno di voi avrà, pertanto, la possibilità di intervenire ed apportare il proprio contributo!! Anzi, siete caldamente invitati a farlo!!! :wink3:

    Il risultato dello script che stiamo creando, sarà via via visibile (compresi gli eventuali bugs!) direttamente nel riqudro "strumenti" della pagina taff.biz

    Detto ciò, partiamo con uno script semplice semplice (e spero anche corretto! :tongueout: ) per far comparire il riquadro (nel nostro caso, costituito da uno <span>) in cui posizioneremo i vari pulsanti dei principali SN.

    A proposito, invito i mod e admin di GT a postare di seguito lo script per il bookmarking di GT.

    [HTML]
    <a href="#" onclick="showhide('pippo'); return(false);" title="Condividi taff.biz * Talkin'about Food Forum - il forum delle Scienze e Tecnologie Alimentari">Condividi taff.biz!</a>
    [/HTML]

    Come vedete, si tratta di un comunissimo tag "a" con tanto di attributo "title" a cui abbiamo aggiunto però un piccolissimo JavaScript che al click non manda a nessuna pagina ( href="#" ), ma mostra e nasconde ( onclick="showhide('pippo'); return(false);" ) il nostro "pippo" (noi attribuiremo il nome "pippo" allo span che desideriamo far comparire).

    Alcuni di voi, a questo punto penseranno "cosa c'è di difficile in tutto ciò?" e la risposta è appunto "Nulla! E' proprio ciò che vogliamo. Creare un qualcosa il più semplice e lineare possibile." :figo2:

    Spezzo qui il post per dare modo a chi lo desiderasse di intervenire.

    A tra poco! :gthi:
    Maino

    0
  • M
    User •

    Nel precedente post abbiamo visto come creare un link che, al click, non rimandi ad un'altra pagina, ma faccia semplicemente comparire/scomparire un riquadro.

    Vediamo ora, i tratti salienti di questo riquadro. Per ragioni di semplicità (soprattutto per evitare di complicarci la vita con un eccessivo annidamento di "div"), ho preferito ricorrere al tag "span" per generare il riquadro in cui andremo ad inserire i bottoni dei principali Social Network. Nulla vieta, comunque, di utilizzare un div! :wink3:

    Il codice è, se possibile, ancora più semplice del precedente:

    [HTML]<span style="display: none" id="pippo"></span>[/HTML]

    Come vedete, abbiamo i tag di apertura e chiusura "span" al cui interno andremo ad inserire ciò che vorremo venga visualizzato nel riquadro (nel nostro caso specifico, i bottoni SN).

    Come potete notare, nel tag "span" d'apertura ho inserito l'attributo *style="display: none", *onde far sì che il riquadro fosse di default invisibile (prima del mio click, è ovvio). Per aderire agli standard w3c, vi consiglio caldamente d'inserire sempre ciò che riguarda lo stile in un foglio a parte (nel mio caso, purtroppo, non è stato possibile... Inserendolo nel CSS, questo veniva ignorato! :crying: )

    Non mi pronuncio oltre sul id="pippo", dato che è intuibile la sua funzione di richiamo.

    Per ora non si è fatto avanti nessuno. Se da un lato ciò è positivo (perchè chi tace acconsente), è altrettanto vero che non riesco a comprendere se quanto scrivo possa o meno essere di vostro interesse. :wink3:

    Io comunque procedo nel mio excursus! :giggle:

    Saluti!
    Maino

    0
  • M
    User •

    Ciao ragazzi! :smile5:

    Come promesso, eccomi qui con il prosieguo di questa piccola guida alla creazione del nostro "Bookmarking & Sharing Device".

    Ricapitolando:

    • Abbiamo creato il link che ci cosente di aprire e chiudere il riquadro
    • Abbiamo creato il** riquadro**, senza però definirne lo stile
      Passerei, pertanto, ad elaborare il foglio di stile, definendo i tratti distintivi del nostro span che abbiamo battezzato "pippo".
    
#pippo  {
  position: absolute;
  border: 2px solid #CCC;
  background-color: #FFF;
  margin: 30px;
  padding: 5px;
  width: 150px;
  height: 150px;
  bottom: 0;
  left: 0;
  text-align: justify;
  z-index: 20;
  }

    Ossia: "pippo" è posizionato in maniera assoluta; ha un bordo di 2px di colore grigio; ha un colore di sfondo bianco; la sua distanza dal margine è pari a 30px; il suo contenuto dista dai margini 5px; è un quadrato di 150px di lato; il suo z-index è settato su 20 in modo da sovrapporlo agli altri elementi della pagina (che hanno z-index inferiore).

    Come vi accennavo poc'anzi, manca il "display: none", che ho dovuto inserire direttamente nell'HTML*.* :gtsad: Anzi, faccio un'appello: se qualcuno fosse a conoscenza del motivo del suo non funzionamento si faccia avanti! :crying:

    Restando in tema di CSS, occorre inserire qualcosa che renda i link cliccati equivalenti a quelli non cliccati. Altrimenti i pulsanti che creeremo, una volta cliccati verranno visualizzati circondati da un antiestetico bordo colorato, a seconda delle impostazioni del browser definite dall'utente.

    Quindi:

    A:LINK#LB, A:VISITED#LB, A:HOVER#LB { color:; }

    Come potete notare, diciamo al browser che tutti i tipi di links identificati con LB (sta per link bookmarking), siano essi non ancora visitati, visitati o con il mouse sopra, devono essere visualizzati bianchi.

    Nel prossimo post vedremo dove reperire gratuitamente alcuni set di loghi dei principali Social Networks che utilizzeremo come bottoni.

    Ciao! :gthi:
    Maino

    0
  • M
    User •

    Ciao ragazzi! :smile5:

    Eccomi qui con qualche consiglio pratico su come e dove reperire set di icone dei principali Social Networks. Gli esperti di "Web Surfing" non avranno difficoltà a trovare molti altri siti specializzati in web design che offrono gratuitamente questo tipo di servizi. Spero, pertanto, che qualcuno posti di seguito qualche altro link. Coraggio, non mi piacciono i soliloqui!! :tongueout:

    Per il nostro Bookmarking Tool ho trovato e scaricato un set d'icone semplice ma carino. Il sito in questione è anglofono ma comunque estremamente intuitivo. E' raggiungibile al seguente URL:

    doublejdesign.co.uk/2009/01/an-icon-set-of-the-social-bookmarks-in-msn-9-style/

    Consiglio questo set perchè, oltre ad essere di grafica accattivante, ha una discreta scelta di "size"; nella fattispacie:

    16×16px, 24×24px, 32×32px, 48×48px, 64×64px, 72×72px, 96×96px, 128×128px and 256×256px

    Ciò, lo rende adattabile a tutti i contesti.
    Cosa ve ne pare? :gthi:
    Maino

    0
Effettua l'accesso per rispondere