social by web design
TRANSCRIPT
![Page 1: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/1.jpg)
SOCIAL
wEB DESIGN
by
#7formazione
![Page 2: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/2.jpg)
SOCIAL
wEB DESIGN
by
@AgneseLongo
#7formazione
@MistoacrilicoAgnese Longo Giorgia Pallaro
![Page 3: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/3.jpg)
SOCIAL
wEB DESIGN
by
@AgneseLongo#7formazione
@Mistoacrilico
digital strategist
web designer
![Page 4: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/4.jpg)
@AgneseLongo
#7formazione
SOCIAL wEB DESIGNby
1. La navigazione tra canali
2. Un sito a prova di social
3. Un sito social oriented: perchè? con quali obiettivi?
4. Un sito social oriented. Chi se ne occupa?
5. Social VS Sito web
6. Social login: dati a go go
7. Condividi, ma con una strategia
prima parte
![Page 5: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/5.jpg)
@Mistoacrilico
#7formazione
SOCIAL wEB DESIGNby
1. Integrazione dei loghi social nel sito2. I widget ufficiali3. I plugin per Wordpress4. Come realizzare un social wall senza dover
passare dal codice
seconda parte
![Page 6: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/6.jpg)
SOCIAL wEB DESIGNby
prima parte
UN SITO A PROVA DI SOCIAL
#7formazione
Gli utenti navigano spostandosi da un canale all’altro.
Questo implica una riflessione durante la progettazione del sito web.
Bisogna offrire all’utente un’esperienza coerente
Non basta più focalizzarsi su un singolo media, ma valorizzare le sinergie tra essi.
![Page 7: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/7.jpg)
SOCIAL wEB DESIGNby
prima parte
LA NAVIGAZIONE TRA UN CANALE E L’ALTRO
#7formazione
Oggi i consumatori sono sempre più favorevoli all’utilizzo dei social media.
Chiedono il dialogo con il brand e “pretendono” che quest’ultimo lo ascolti.
Per questo è fondamentale aggiornare la propria immagine sul web integrandola al massimo con i social media.
![Page 8: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/8.jpg)
I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED:
1. Mostrare al nuovo cosa ne pensa il vecchio
#7formazione@AgneseLongo @Mistoacrilico
![Page 9: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/9.jpg)
SOCIAL wEB DESIGNby
prima parte
UN SITO A PROVA DI SOCIAL
#7formazione
1. Mostrare al nuovo cosa ne pensa il vecchio
http://www.fiat500.com/
![Page 10: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/10.jpg)
I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED:
2. Condividere: permettere all’utente di portare all’esterno tutto ciò che è
contenuto all’interno.
#7formazione@AgneseLongo @Mistoacrilico
![Page 11: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/11.jpg)
http://www.kartell.com/itSOCIAL wEB DESIGNby
prima parte
UN SITO A PROVA DI SOCIAL
#7formazione
2. Condividere: permettere all’utente di portare all’esterno tutto ciò che è contenuto all’interno.
![Page 12: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/12.jpg)
I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED:
3. Chiedere alla massa
#7formazione@AgneseLongo @Mistoacrilico
![Page 13: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/13.jpg)
SOCIAL wEB DESIGNby
prima parte
UN SITO A PROVA DI SOCIAL
#7formazione
3. Chiedere alla massa:permettere all’utente di poter subito, e in maniera veloce, esprimere la propria opinione o esperienza su un prodotto o servizio.
http://c4cactus.citroen.com/it/concept-car
![Page 14: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/14.jpg)
I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED:
4. Incoraggiare la conversazione
#7formazione@AgneseLongo @Mistoacrilico
![Page 15: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/15.jpg)
SOCIAL wEB DESIGNby
prima parte
UN SITO A PROVA DI SOCIAL
#7formazione
4. Incoraggiare la conversazione.
http://www.leroymerlin.it/
![Page 16: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/16.jpg)
I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED:
5. Aumentare la credibilità
#7formazione@AgneseLongo @Mistoacrilico
![Page 17: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/17.jpg)
SOCIAL wEB DESIGNby
prima parte
UN SITO A PROVA DI SOCIAL
#7formazione
5. Aumentare la credibilità
http://www.bershka.com/it/it/
![Page 18: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/18.jpg)
SOCIAL wEB DESIGNby
prima parte
UN SITO A PROVA DI SOCIAL
#7formazione
5. Aumentare la credibilità
http://www.nutellastories.com/
![Page 19: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/19.jpg)
I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED:
6. Mostrare la propria autenticità
#7formazione@AgneseLongo @Mistoacrilico
![Page 20: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/20.jpg)
SOCIAL wEB DESIGNby
prima parte
UN SITO A PROVA DI SOCIAL
#7formazione
6. Mostrare la propria autenticità
http://www.lorenzinihorse.it/
![Page 21: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/21.jpg)
Con questi sei elementi, il sito web si trasforma in un “luogo” dove il consumatore
--> si informa--> conosce il core dell’azienda--> interagisce con i contenuti presenti--> partecipa con le sue opinioni--> condivide
#7formazione@AgneseLongo @Mistoacrilico
![Page 22: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/22.jpg)
SOCIAL wEB DESIGNby
prima parte
UN SITO SOCIAL ORIENTED: QUALI OBIETTIVI?
#7formazione
Il sito web oggi, non può funzionare solo come “brochure interattiva”.
Deve diventare un vero e proprio hub comunicazionale che porta il piano della relazione commerciale sulla conversazione.
ll prodotto o il servizio devono rimanere in secondo piano.
![Page 23: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/23.jpg)
Gli obiettivi principali devono essere:
• trasmettere l’identità del brand• generare conversazioni• rafforzare la community• raccogliere dati sugli utenti
SOCIAL wEB DESIGNby
prima parte
UN SITO SOCIAL ORIENTED: QUALI OBIETTIVI?
#7formazione
![Page 24: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/24.jpg)
SOCIAL wEB DESIGNby
prima parte
UN SITO SOCIAL ORIENTED: QUALI
#7formazione
Illy ospita all’interno del sito web la community tesa verso l’interazione con i fan.
http://www.illy.com/wps/wcm/connect/it/community/
![Page 25: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/25.jpg)
SOCIAL wEB DESIGNby
prima parte
UN SITO SOCIAL ORIENTED: CHI SE NE OCCUPA?
#7formazione
I social media vengono generalmente considerati un ambito di competenza dell’area marketing.
I web designer infatti affermano di occuparsi dei siti web.
Ma siamo proprio sicuri che la responsabilità dei social sia solo dei Social Media Qualcosa? :-)
![Page 26: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/26.jpg)
Oggi un web designer non può più limitarsi a creare un bel sito web.
Deve andare oltre... Deve renderlo social oriented!
I web designer in tale processo diventano USER EXPERIENCE DESIGNER e lavorano in stretta sinergia con il team responsabile dei canali social con lo scopo
--> di favorire traffico da e verso il sito web--> di creare un’esperienza di navigazione coerente
SOCIAL wEB DESIGNby
prima parte
UN SITO SOCIAL ORIENTED: CHI SE NE OCCUPA?
#7formazione
![Page 27: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/27.jpg)
SOCIAL wEB DESIGNby
prima parte
SOCIAL
SITO WEB
#7formazione
Di seguito andiamo a osservare le 8 possibili integrazioni tra sito web e social
--> Questo non implica che bisogna per forza andare verso il livello massimo di integrazione ma ci aiuta a capire “COSA SI PUO’ FARE” e su questa base decidere “COSA SI VUOLE FARE” .
"Jeremiah Owyang, Making your Corporate Website Relevant”
![Page 28: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/28.jpg)
SOCIAL wEB DESIGNby
prima parte
SOCIAL
SITO WEB
#7formazione
![Page 29: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/29.jpg)
http://www.apple.com/SOCIAL wEB DESIGNby
prima parte
#7formazione
SOCIAL
SITO WEB
1. Nessuna integrazionesocial
![Page 30: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/30.jpg)
http://www.bpv.it/index.phpSOCIAL wEB DESIGNby
prima parte
#7formazione
SOCIAL
SITO WEB
1. Nessuna integrazionesocial
![Page 31: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/31.jpg)
http://www.zara.com/it/SOCIAL wEB DESIGNby
prima parte
#7formazione
SOCIAL
SITO WEB
2. Link agli spazi social ma senza strategia: nel sito aziendale vengono inseriti i nomi dei social ma senza altra indicazione; come fossero normali link ad altri siti.
![Page 32: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/32.jpg)
http://www.desigual.com/it_ITSOCIAL wEB DESIGNby
prima parte
#7formazione
SOCIAL
SITO WEB
3. Link agli spazi social ma spingendo a condividere.
![Page 33: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/33.jpg)
http://www.liujo.com/it/SOCIAL wEB DESIGNby
prima parte
#7formazione
SOCIAL
SITO WEB
4. Integrare il brand negli spazi “social”.
![Page 34: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/34.jpg)
http://www.missoni.com/SOCIAL wEB DESIGNby
prima parte
#7formazione
SOCIAL
SITO WEB
4. Integrare il brand negli spazi “social”.
![Page 35: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/35.jpg)
http://www.citroen.it/SOCIAL wEB DESIGNby
prima parte
#7formazione
SOCIAL
SITO WEB
5. Inserire le discussioni nel sito.
![Page 36: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/36.jpg)
http://www.alitalia.com/SOCIAL wEB DESIGNby
prima parte
#7formazione
SOCIAL
SITO WEB
6. Log-in “social” al sito web: Alitalia
![Page 37: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/37.jpg)
http://goo.gl/NAjUelSOCIAL wEB DESIGNby
prima parte
#7formazione
SOCIAL
SITO WEB
7. Log-in sociale spingendo a condividere
![Page 38: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/38.jpg)
http://www.socialnetwall.alfaromeo.com/SOCIAL wEB DESIGNby
prima parte
#7formazione
SOCIAL
SITO WEB
8. Integrazione totale
![Page 39: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/39.jpg)
SOCIAL wEB DESIGNby
prima parte
SOCIAL LOGIN: DATI A GO GO
#7formazione
Il social login è una pratica ormai diffusa su molti siti e permette di facilitare agli utenti la registrazione sul proprio sito.
http://www.yoox.com/
![Page 40: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/40.jpg)
•Semplifica il processo di registrazione•Favorisce l’aumento della percentuale di registrazioni e poi di utilizzo in seguito del servizio•Permette all’azienda di ottenere un database pulito•Offre alle aziende la possibilità di far vivere al proprio consumatore un’esperienza di acquisto migliore
#7formazione@AgneseLongo @Mistoacrilico
http://goo.gl/L6KxOK
![Page 41: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/41.jpg)
SOCIAL wEB DESIGNby
prima parte
SOCIAL LOGIN: DATI A GO GO
#7formazione
Dalla ricerca “THE VALUE OF SOCIAL LOGIN” prodotta da Janrain + blue si osserva come:
--> I consumatori sono sempre più abituati al social login, infatti almeno l’87% degli intervistati ci ha fatto caso ed altri frequentano abbastanza spesso siti con questa tecnologia.
--> Il 52% di questi lo ha utilizzato almeno una volta e molti vorrebbero poter scegliere.
![Page 42: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/42.jpg)
--> Il 59% degli intervistati sostiene che la capacità del social login di suggerire prodotti e promozioni di loro interesse è molto utile
--> il 60% dichiara che i siti di aziende che utilizzano questa dinamica siano percepiti in modo molto più positivo e diano una sensazione di novità nella loro esperienza.
SOCIAL wEB DESIGNby
prima parte
SOCIAL LOGIN: DATI A GO GO
#7formazione
![Page 43: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/43.jpg)
Volete sapere quale è il Social preferito dai consumatori per il
Social Login?
SOCIAL wEB DESIGNby
prima parte
SOCIAL LOGIN: DATI A GO GO
#7formazione
![Page 44: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/44.jpg)
--> Il 64% degli intervistati sostiene che il social login sia un’opzione che i siti dovrebbero offrire.
--> Il 52% si aspetta un’esperienza migliore dopo aver effettuato il social login e sono molto attratti da una personalizzazione maggiore che elimini ridondanze di pubblicità non in target con i loro interessi.
SOCIAL wEB DESIGNby
prima parte
SOCIAL LOGIN: DATI A GO GO
#7formazione
![Page 45: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/45.jpg)
Social Profile Navigator mostra un quadro delle informazioni personali cedute ai social media. Possiamo scoprire, ad esempio, come Facebook e LinkedIn siano i servizi che, previo consenso, chiedono e dunque hanno più dati (da quelli demografici a quelli sugli interessi e la vita lavorativa). Twitter e Google, invece, ne catturano di meno. http://janrain.com/social-profile-data
SOCIAL wEB DESIGNby
prima parte
SOCIAL LOGIN: DATI A GO GO
#7formazione
![Page 46: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/46.jpg)
![Page 47: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/47.jpg)
Vi siete mai imbattuti in contenuti incondivisibili?
Cos’avete pensato?
Ma soprattutto, lo avete condiviso?
SOCIAL wEB DESIGNby
prima parte
ANDIAMO OLTRE LO “SHARE THIS”
#7formazione
![Page 48: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/48.jpg)
SOCIAL wEB DESIGNby
prima parte
ANDIAMO OLTRE LO SHARE THIS
#7formazione
Il problema è che molto spesso il bottone “share this” viene applicato in modo indiscriminato in tutto il sito, senza alcuna strategia alla base.
![Page 49: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/49.jpg)
Questo ci insegna che:
--> prima di progettare un sito web social oriented occorre pianificare con precisione la strategia alla base (share, follow, community, live update ecc...)
SOCIAL wEB DESIGNby
prima parte
ANDIAMO OLTRE LO “SHARE THIS”
#7formazione
![Page 50: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/50.jpg)
Di seguito alcuni esempi virtuosi di come integrare in modo efficace una strategia social all’interno del sito web.
![Page 51: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/51.jpg)
http://difendilaqualita.it/
![Page 52: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/52.jpg)
![Page 53: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/53.jpg)
http://goo.gl/6AUcNJ
![Page 54: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/54.jpg)
http://www.peroni.it/
![Page 55: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/55.jpg)
http://www.nissanusa.com/passiongenome/#nameDrawer
![Page 56: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/56.jpg)
“Mi rendi il sito più social?”
#7formazione@AgneseLongo @Mistoacrilico
![Page 57: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/57.jpg)
Non basta aggiungere le icone dei profili social in home page...
Ma è pur sempre un buon inizio.
#7formazione@AgneseLongo @Mistoacrilico
![Page 58: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/58.jpg)
SOCIAL wEB DESIGNby
seconda parte
NIKE
#7formazione
Ma nessuna icona nel sito
21 M
6,7 M
3,9 M
2,7 M
![Page 59: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/59.jpg)
Non c’è una legge matematica che spieghi dove posizionare le icone.
Tuttavia....
#7formazione@AgneseLongo @Mistoacrilico
![Page 60: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/60.jpg)
SOCIAL wEB DESIGNby
seconda parte
HEADER
#7formazione
Attenzione alle call to action: le icone
dei social media non devono attirare più
attenzione di cta come “Acquista” o
“Contattaci”
![Page 61: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/61.jpg)
SOCIAL wEB DESIGNby
seconda parte
FOOTER
#7formazione
Allo stesso tempo, posizionare le icone
del footer significa non dar loro rilevanza: non sempre l’utente scrolla fino alla fine del sito.
![Page 62: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/62.jpg)
SOCIAL wEB DESIGNby
seconda parte
SEZIONE DEDICATA
#7formazione
E’ interessante anche la possibilità
di dedicare un’intera sezione del sito ai
social media
![Page 63: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/63.jpg)
“Carine le icone! Ma non è che puoi farle tutte verdi?
Proprio come il mio logo!”
#7formazione@AgneseLongo @Mistoacrilico
![Page 64: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/64.jpg)
![Page 65: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/65.jpg)
C’erano una volta le linee guida...
#7formazione@AgneseLongo @Mistoacrilico
![Page 66: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/66.jpg)
Facebook “f” Logo CMYK / .ai Facebook “f” Logo CMYK / .ai
https://www.facebookbrand.com/
FACEBOOK ASSET USAGE ® ALL RIGHTS RESERVED
FACEBOOK ASSET USAGE
To ensure accurate and consistent use, never alter, rotate, embellish or attempt to recreate the “f” logo. Don’t alter the rounded box shape or alter the proportions, or add any embellishments.
Incorrect UsePreserve Clear SpaceTo preserve the integrity of the “f” logo, always maintain a minimum clear space around the logo. This clear space insulates our “f” logo from distracting visual elements, such as other logos, copy, illustrations or photography. Always maintain this minimum clear space, even when proportionally scaling the logo.
The proportions and spacing of the “f” logo should never be altered for any reason. Hold the “Shift” key in most software programs to maintain the proportions while scaling up or down.
Maintain Proportions
The primary use of the “f” logo is to promote your organization’s presence on Facebook. For example, when you say, “Find us on Facebook” and link to your Facebook Page, it’s appropriate to use the “f” logo.
Using the “f” Logo
Modify the "f" logo in any way, such as changing design or color. If you are unable to use the correct color due to technical limitations, you may revert to black and white.
Don’t
Your presence on Facebook, such as your Page, timeline, group, app or Event
Your implementation of Facebook on your website
Your product’s integration with Facebook such as “For use with Facebook”
Content that originates from the Facebook service
Only use the ‘f’ logo to refer to:
Include a clear call to action that communicates your use of Facebook (for example, ‘Like us on Facebook’ or ‘Install our app on Facebook) unless the ‘f’ logo is side-by-side with other social media logos
Do
Print & Packaging
“f” Logo
![Page 67: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/67.jpg)
https://about.twitter.com/it/press/brand-assets
![Page 68: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/68.jpg)
https://help.instagram.com/304689166306603
http://instagram.com/press/
![Page 69: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/69.jpg)
https://www.youtube.com/yt/brand/it/color.html
https://www.youtube.com/yt/brand/it/downloads.html
![Page 70: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/70.jpg)
https://business.pinterest.com/it/brand-guidelines
![Page 71: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/71.jpg)
Facilitare l’interazione:dove, come, perché?
#7formazione@AgneseLongo @Mistoacrilico
![Page 72: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/72.jpg)
I wIDGET UFFICIALI
#7formazione@AgneseLongo @Mistoacrilico
![Page 73: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/73.jpg)
I widget ufficiali
#7formazione@AgneseLongo @Mistoacrilico
![Page 74: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/74.jpg)
https://developers.facebook.com/docs/plugins/
FACEBOOKSOCIAL wEB DESIGNby
seconda parte
Una breve panoramica
dei plugin più interessanti
#7formazione
![Page 75: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/75.jpg)
SOCIAL wEB DESIGNby
seconda parte
Il bottone “Mi piace”Il modo più rapido per
condividere contenuti su Facebook.
Esistono numerose varianti, tutte disponibili sia con
la dicitura “Mi piace” che “Consiglia”.
#7formazione
https://developers.facebook.com/docs/plugins/like-button
INSERIRE IL LINK DA
CONDIVIDERE
TIPOLOGIE DI LAYOUT
![Page 76: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/76.jpg)
SOCIAL wEB DESIGNby
seconda parte
Il bottone “Mi piace”Prevede il like immediato del contenuto e la condivisione
dell’attività su Facebook.
E’ inoltre possibile commentare l’attività, che apparirà così nella
bacheca dell’utente.
#7formazione
https://developers.facebook.com/docs/plugins/like-button
NEL REGISTRO ATTIVITA’
IN BACHECA
![Page 77: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/77.jpg)
SOCIAL wEB DESIGNby
seconda parte
Perché la scelta del bottone è così
importante
#7formazione
Amazon: bottoni privi dei contatori
![Page 78: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/78.jpg)
SOCIAL wEB DESIGNby
seconda parte
Perché la scelta del bottone è così
importante
#7formazione
![Page 79: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/79.jpg)
SOCIAL wEB DESIGNby
seconda parte
Bottone di condivisione
Prevede la condivisione in gruppi, pagine pubbliche,
nella propria timeline o via messaggio privato; l’utente può aggiungengere un messaggio
privato.
#7formazione
https://developers.facebook.com/docs/plugins/share-button
INSERIRE IL LINK DA
CONDIVIDERE
![Page 80: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/80.jpg)
SOCIAL wEB DESIGNby
seconda parte
“MI PIACE”VS
“CONDIVIDI”
#7formazione
![Page 81: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/81.jpg)
SOCIAL wEB DESIGNby
seconda parte
Il “like box”per le pagine
#7formazione
https://developers.facebook.com/docs/plugins/like-box-for-pages
![Page 82: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/82.jpg)
SOCIAL wEB DESIGNby
seconda parte
Il “like box”per le pagine
#7formazione
![Page 83: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/83.jpg)
SOCIAL wEB DESIGNby
seconda parte
Integrazione dei post nel sito
#7formazione
https://developers.facebook.com/docs/plugins/embedded-posts
![Page 84: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/84.jpg)
SOCIAL wEB DESIGNby
seconda parte
Integrazione dei post nel
sito
#7formazione
![Page 85: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/85.jpg)
SOCIAL wEB DESIGNby
seconda parte
Integrazione dei commenti
#7formazione
https://developers.facebook.com/docs/plugins/comments
![Page 86: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/86.jpg)
SOCIAL wEB DESIGNby
seconda parte
Integrazione dei commenti
#7formazione
![Page 87: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/87.jpg)
I widget ufficiali
#7formazione@AgneseLongo @Mistoacrilico
![Page 88: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/88.jpg)
SOCIAL wEB DESIGNby
seconda parte
#7formazione
Il bottone “Segui”
https://about.twitter.com/resources/buttons#follow
SEGUI
![Page 89: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/89.jpg)
SOCIAL wEB DESIGNby
seconda parte
#7formazione
Il bottone “Tweet”
https://about.twitter.com/resources/buttons#tweet
![Page 90: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/90.jpg)
SOCIAL wEB DESIGNby
seconda parte
#7formazione
“Twittare unhashtag”
https://about.twitter.com/resources/buttons#tweet
HASHTAG
![Page 91: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/91.jpg)
SOCIAL wEB DESIGNby
seconda parte
#7formazione
“Menzionare” un account
https://about.twitter.com/resources/buttons#mention
MENZIONE
![Page 92: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/92.jpg)
SOCIAL wEB DESIGNby
seconda parte
#7formazione
Incorporare un tweet nel sito
o nel blog
![Page 93: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/93.jpg)
SOCIAL wEB DESIGNby
seconda parte
#7formazione
Incorporare la timeline di un
account
https://twitter.com/settings/widgets/new/user
![Page 94: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/94.jpg)
SOCIAL wEB DESIGNby
seconda parte
#7formazione
Incorporare una lista
creata da un account
https://twitter.com/settings/widgets/new/list
![Page 95: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/95.jpg)
SOCIAL wEB DESIGNby
seconda parte
#7formazione
Incorporare la timeline
inerente un hashtag
https://twitter.com/settings/widgets/new/user
![Page 96: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/96.jpg)
I widget ufficiali
GOOGLE+
#7formazione@AgneseLongo @Mistoacrilico
![Page 97: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/97.jpg)
SOCIAL wEB DESIGNby
seconda parte
GOOGLE+
Il pulsante +1
#7formazione
https://developers.google.com/+/web/+1button/?hl=it
![Page 98: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/98.jpg)
SOCIAL wEB DESIGNby
seconda parte
GOOGLE+
Il badge google+
#7formazione
https://developers.google.com/+/web/badge/?hl=it
![Page 99: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/99.jpg)
http://www.skande.com/SOCIAL wEB DESIGNby
seconda parte
GOOGLE+
Il badge google+
#7formazione
![Page 100: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/100.jpg)
I widget ufficiali
#7formazione@AgneseLongo @Mistoacrilico
![Page 101: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/101.jpg)
https://business.pinterest.com/it/widget-builder#do_pin_it_buttonSOCIAL wEB DESIGNby
seconda parte
Incorporare il bottone “Pin It”
nel sito
#7formazione
![Page 102: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/102.jpg)
https://business.pinterest.com/it/widget-builder#do_pin_it_buttonSOCIAL wEB DESIGNby
seconda parte
#7formazione
Far apparire il bottone
“Pin it” sopra un’immagine al passaggio del
mouse
![Page 103: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/103.jpg)
seconda partehttps://business.pinterest.com/it/widget-builder#do_embed_pinSOCIAL wEB DESIGNby
seconda parte
Incorporare un post di pinterest
nel sito
#7formazione
![Page 104: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/104.jpg)
https://business.pinterest.com/it/widget-builder#do_embed_user
INSERIRE IL LINK DELL’ACCOUNT PINTEREST DA CONDIVIEDERE
SOCIAL wEB DESIGNby
seconda parte
#7formazione
Incorporare gli ultimi post
“pinnati” da un account
![Page 105: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/105.jpg)
https://business.pinterest.com/it/widget-builder#do_pin_it_button
INSERIRE IL LINK DELLA BOARD DA
CONDIVIEDERE
SOCIAL wEB DESIGNby
seconda parte
#7formazione
Incorporare gli ultimi
post “pinnati” in una
determinata board
![Page 106: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/106.jpg)
I widget ufficiali
#7formazione@AgneseLongo @Mistoacrilico
![Page 107: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/107.jpg)
SOCIAL wEB DESIGNby
seconda parte
Incorporare un post nel sito
#7formazione
![Page 108: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/108.jpg)
I plugin per wordpress
#7formazione@AgneseLongo @Mistoacrilico
![Page 109: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/109.jpg)
https://wordpress.org/plugins/share-this/
https://wordpress.org/plugins/addthis/
SHARE THIS
ADD THIS
![Page 110: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/110.jpg)
https://wordpress.org/plugins/quotable/
QUOTABLE
![Page 111: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/111.jpg)
https://wordpress.org/plugins/alpine-photo-tile-for-instagram/
THE ALPINE PHOTOTILEFOR INSTAGRAM
![Page 112: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/112.jpg)
https://wordpress.org/plugins/pinterest-pin-it-button/
PINTEREST“PIN IT” BUTTON
![Page 113: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/113.jpg)
https://wordpress.org/plugins/gallery-share/
GALLERY SHARE
![Page 114: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/114.jpg)
Il social wall: un modo interessante per aggregare i contenuti
#7formazione@AgneseLongo @Mistoacrilico
![Page 115: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/115.jpg)
SOCIAL wEB DESIGNby
seconda parte
IL SOCIAL WALL
#7formazione
http://www.vw.com/
![Page 116: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/116.jpg)
SOCIAL wEB DESIGNby
seconda parte
IL SOCIAL WALL CON
IFTTT
#7formazione
+
![Page 117: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/117.jpg)
https://ifttt.comSOCIAL wEB DESIGNby
seconda parte
#7formazione
IF THIS THEN THAT
è un servizio che permette di automatizzare
varie operazioni compiute
online.
![Page 118: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/118.jpg)
SOCIAL wEB DESIGNby
seconda parte
#7formazione
IF THIS THEN THAT
“Ogni volta che pubblico una nuova foto
su Instagram, crea un post
incorporato su Tumblr”
![Page 119: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/119.jpg)
1
2
3
![Page 120: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/120.jpg)
![Page 121: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/121.jpg)
#7formazione@AgneseLongo @Mistoacrilico
Se siete ancora vivi...Ricapitoliamo i
punti salienti della presentazione ;-)
![Page 122: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/122.jpg)
#7formazione@AgneseLongo @Mistoacrilico
Offrite all’utente un’esperienza coerente tra i
vostri canali online
![Page 123: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/123.jpg)
#7formazione@AgneseLongo @Mistoacrilico
Gli utenti chiedono un dialogo: ascoltateli ed
interagite
![Page 124: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/124.jpg)
#7formazione@AgneseLongo @Mistoacrilico
Rendete l’utente un partecipante attivo del
vostro sito...
Ma mi raccomando, moderate! ;-)
![Page 125: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/125.jpg)
#7formazione@AgneseLongo @Mistoacrilico
Perchè farlo?
IdentitàConversazioni
CommunityDati
![Page 126: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/126.jpg)
#7formazione@AgneseLongo @Mistoacrilico
Chiedetevi sempre:
“Io lo condividerei?”
![Page 127: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/127.jpg)
#7formazione@AgneseLongo @Mistoacrilico
Le linee guida del brand
Youtube
https://www.facebookbrand.com/
https://about.twitter.com/it/press/brand-assets
https://help.instagram.com/304689166306603http://instagram.com/press/
https://www.youtube.com/yt/brand/it/color.htmlhttps://www.youtube.com/yt/brand/it/downloads.html
https://business.pinterest.com/it/brand-guidelines
![Page 128: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/128.jpg)
#7formazione@AgneseLongo @Mistoacrilico
I widget ufficiali
Google+
https://developers.facebook.com/docs/plugins/
https://about.twitter.com/resources/buttonshttps://twitter.com/settings/widgets/
https://developers.google.com/+/web/
https://business.pinterest.com/it/widget-builder
![Page 129: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/129.jpg)
#7formazione@AgneseLongo @Mistoacrilico
I plugin per wordpress
https://wordpress.org/plugins/share-this/
https://wordpress.org/plugins/addthis/
https://wordpress.org/plugins/quotable/
https://wordpress.org/plugins/alpine-photo-tile-for-instagram/
https://wordpress.org/plugins/pinterest-pin-it-button/
https://wordpress.org/plugins/gallery-share/
Share this
Add this
Quotable
Alpine Phototile
Pin it button
Gallery Share
![Page 130: Social by Web Design](https://reader038.vdocument.in/reader038/viewer/2022110310/55a783741a28ab193e8b4926/html5/thumbnails/130.jpg)
@AgneseLongo @Mistoacrilico
THANKS FOR wATCHING!
#7formazione