SlideShare uma empresa Scribd logo
1 de 130
Baixar para ler offline
SOCIAL 
by 
wEB DESIGN 
#7formazione
SOCIAL 
by 
wEB DESIGN 
Agnese Longo Giorgia Pallaro 
@AgneseLongo 
#7formazione 
@Mistoacrilico
SOCIAL 
by 
wEB DESIGN 
@AgneseLongo 
#7formazione 
@Mistoacrilico 
digital 
strategist 
web 
designer
#7formazione 
@AgneseLongo 
SOCIAL by wEB DESIGN 
prima parte 
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
#7formazione 
@Mistoacrilico 
SOCIAL by wEB DESIGN 
seconda parte 
1. Integrazione dei loghi social nel sito 
2. I widget ufficiali 
3. I plugin per Wordpress 
4. Come realizzare un social wall senza dover 
passare dal codice
SOCIAL by wEB DESIGN 
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.
SOCIAL by wEB DESIGN 
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.
I 6 CONSIGLI PER RENDERE UN 
SITO SOCIAL ORIENTED: 
1. Mostrare al nuovo cosa ne pensa il 
vecchio 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
prima parte 
UN SITO A 
PROVA DI 
SOCIAL 
1. Mostrare 
al nuovo cosa 
ne pensa il 
vecchio 
#7formazione 
http://www.fiat500.com/
I 6 CONSIGLI PER RENDERE UN SITO 
SOCIAL ORIENTED: 
2. Condividere: permettere all’utente 
di portare all’esterno tutto ciò che è 
contenuto all’interno. 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN http://www.kartell.com/it 
prima parte 
UN SITO A 
PROVA DI 
SOCIAL 
2. Condividere: 
permettere 
all’utente 
di portare 
all’esterno 
tutto ciò che 
è contenuto 
all’interno. 
#7formazione
I 6 CONSIGLI PER RENDERE UN SITO 
SOCIAL ORIENTED: 
3. Chiedere alla massa 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
prima parte 
UN SITO A PROVA 
DI SOCIAL 
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. 
#7formazione 
http://c4cactus.citroen.com/it/concept-car
I 6 CONSIGLI PER RENDERE UN SITO 
SOCIAL ORIENTED: 
4. Incoraggiare la conversazione 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
prima parte 
UN SITO A 
PROVA DI 
SOCIAL 
4. Incoraggiare la 
conversazione. 
#7formazione 
http://www.leroymerlin.it/
I 6 CONSIGLI PER RENDERE UN SITO 
SOCIAL ORIENTED: 
5. Aumentare la credibilità 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
prima parte 
UN SITO A 
PROVA DI 
SOCIAL 
5. Aumentare 
la credibilità 
#7formazione 
http://www.bershka.com/it/it/
SOCIAL by wEB DESIGN 
prima parte 
UN SITO A 
PROVA DI 
SOCIAL 
5. Aumentare la 
credibilità 
#7formazione 
http://www.nutellastories.com/
I 6 CONSIGLI PER RENDERE UN SITO 
SOCIAL ORIENTED: 
6. Mostrare la propria autenticità 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
prima parte 
UN SITO A 
PROVA DI 
SOCIAL 
6. Mostrare 
la propria 
autenticità 
#7formazione 
http://www.lorenzinihorse.it/
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 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
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.
Gli obiettivi principali devono essere: 
• trasmettere l’identità del brand 
• generare conversazioni 
• rafforzare la community 
• raccogliere dati sugli utenti 
SOCIAL by wEB DESIGN 
prima parte 
UN SITO 
SOCIAL 
ORIENTED: 
QUALI 
OBIETTIVI? 
#7formazione
SOCIAL by wEB DESIGN 
prima parte 
UN SITO 
SOCIAL 
ORIENTED: 
QUALI 
Illy ospita 
all’interno del 
sito web la 
community 
tesa verso 
l’interazione 
con i fan. 
#7formazione 
http://www.illy.com/wps/wcm/connect/it/community/
SOCIAL by wEB DESIGN 
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? :-)
SOCIAL by wEB DESIGN 
prima parte 
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 
UN SITO 
SOCIAL 
ORIENTED: 
CHI SE NE 
OCCUPA? 
#7formazione
SOCIAL by wEB DESIGN 
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”
SOCIAL by wEB DESIGN 
prima parte 
SOCIAL 
SITO WEB 
#7formazione
SOCIAL by wEB DESIGN http://www.apple.com/ 
prima parte 
SOCIAL 
SITO WEB 
1. Nessuna 
integrazione 
social 
#7formazione
SOCIAL by wEB DESIGN http://www.bpv.it/index.php 
prima parte 
SOCIAL 
SITO WEB 
1. Nessuna 
integrazione 
social 
#7formazione
SOCIAL by wEB DESIGN http://www.zara.com/it/ 
prima parte 
SOCIAL 
SITO WEB 
3. Link agli spazi social 
ma senza strategia: nel 
sito aziendale vengono 
inserite le icone dei 
social ma senza altra 
indicazione; come 
fossero normali link ad 
altri siti. 
#7formazione
SOCIAL by wEB DESIGN http://www.desigual.com/it_IT 
prima parte 
SOCIAL 
SITO WEB 
2. Link agli 
spazi social ma 
spingendo a 
condividere. 
#7formazione
SOCIAL by wEB DESIGN http://www.liujo.com/it/ 
prima parte 
SOCIAL 
SITO WEB 
4. Integrare 
il brand negli 
spazi “social”. 
#7formazione
SOCIAL by wEB DESIGN http://www.missoni.com/ 
prima parte 
SOCIAL 
SITO WEB 
4. Integrare 
il brand negli 
spazi “social”. 
#7formazione
SOCIAL by wEB DESIGN http://www.citroen.it/ 
prima parte 
SOCIAL 
SITO WEB 
5. Inserire le 
discussioni 
nel sito. 
#7formazione
http://www.alitalia.com/ 
SOCIAL by wEB DESIGN 
prima parte 
SOCIAL 
SITO WEB 
6. Log-in 
“social” al sito 
web: Alitalia 
#7formazione
http://goo.gl/NAjUel SOCIAL by wEB DESIGN 
prima parte 
SOCIAL 
SITO WEB 
7. Log-in 
sociale 
spingendo a 
condividere 
#7formazione
SOCIAL by wEB DESIGN http://www.socialnetwall.alfaromeo.com/ 
prima parte 
SOCIAL 
SITO WEB 
8. Integrazione 
totale 
#7formazione
SOCIAL by wEB DESIGN 
prima parte 
SOCIAL LOGIN: 
DATI A GO GO 
Il social login è 
una pratica ormai 
diffusa su molti 
siti e permette di 
facilitare agli utenti 
la registrazione sul 
proprio sito. 
#7formazione 
http://www.yoox.com/
• 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 
http://goo.gl/L6KxOK 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
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.
SOCIAL by wEB DESIGN 
prima parte 
--> 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 
LOGIN: 
DATI A 
GO GO 
#7formazione
Volete sapere quale è il Social 
preferito dai consumatori per il 
Social Login? 
SOCIAL by wEB DESIGN 
prima parte 
SOCIAL 
LOGIN: 
DATI A 
GO GO 
#7formazione
SOCIAL by wEB DESIGN 
prima parte 
--> 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 
LOGIN: 
DATI A 
GO GO 
#7formazione
SOCIAL by wEB DESIGN 
prima parte 
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 
LOGIN: 
DATI A 
GO GO 
#7formazione
Vi siete mai imbattuti in 
contenuti incondivisibili? 
Cos’avete pensato? 
Ma soprattutto, lo avete 
condiviso? 
SOCIAL by wEB DESIGN 
prima parte 
ANDIAMO 
OLTRE LO 
“SHARE 
THIS” 
#7formazione
SOCIAL by wEB DESIGN 
prima parte 
ANDIAMO OLTRE 
LO SHARE THIS 
Il problema è che 
molto spesso il 
bottone “share this” 
viene applicato in 
modo indiscriminato 
in tutto il sito, senza 
alcuna strategia alla 
base. 
#7formazione
SOCIAL by wEB DESIGN 
prima parte 
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...) 
ANDIAMO 
OLTRE LO 
“SHARE 
THIS” 
#7formazione
Di seguito alcuni esempi virtuosi di come 
integrare in modo efficace una strategia 
social all’interno del sito web.
http://difendilaqualita.it/
http://goo.gl/6AUcNJ
http://www.peroni.it/
http://www.nissanusa.com/passiongenome/#nameDrawer
“Mi rendi il sito più social?” 
@AgneseLongo #7formazione @Mistoacrilico
Non basta aggiungere le icone dei profili 
social in home page... 
Ma è pur sempre un buon inizio. 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
seconda parte 
NIKE 
21 M 
6,7 M 
3,9 M 
2,7 M 
Ma nessuna 
icona nel sito 
#7formazione
Non c’è una legge matematica che 
spieghi dove posizionare le icone. 
Tuttavia.... 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
seconda parte 
HEADER 
Attenzione alle call 
to action: le icone 
dei social media non 
devono attirare più 
attenzione di cta 
come “Acquista” o 
“Contattaci” 
#7formazione
SOCIAL by wEB DESIGN 
seconda parte 
FOOTER 
Allo stesso tempo, 
posizionare le icone 
del footer significa non 
dar loro rilevanza: non 
sempre l’utente scrolla 
fino alla fine del sito. 
#7formazione
SOCIAL by wEB DESIGN 
seconda parte 
SEZIONE 
DEDICATA 
E’ interessante 
anche la possibilità 
di dedicare un’intera 
sezione del sito ai 
social media 
#7formazione
“Carine le icone! Ma non è che 
puoi farle tutte verdi? 
Proprio come il mio logo!” 
@AgneseLongo #7formazione @Mistoacrilico
C’erano una volta le linee 
guida... 
@AgneseLongo #7formazione @Mistoacrilico
https://www.facebookbrand.com/ 
Facebook “f” Logo CMYK / .ai Facebook “f” Logo CMYK / .ai 
FACEBOOK ASSET USAGE 
Preserve Clear Space Incorrect Use 
To 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. 
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. 
“f” Logo 
Using the “f” Logo 
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. 
Maintain Proportions 
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. 
Print & Packaging
https://about.twitter.com/it/press/brand-assets
https://help.instagram.com/304689166306603 
http://instagram.com/press/
https://www.youtube.com/yt/brand/it/color.html 
https://www.youtube.com/yt/brand/it/downloads.html
https://business.pinterest.com/it/brand-guidelines
Facilitare l’interazione: 
dove, come, perché? 
@AgneseLongo #7formazione @Mistoacrilico
I widget ufficiali 
@AgneseLongo #7formazione @Mistoacrilico
I widget ufficiali 
FACEBOOK 
@AgneseLongo #7formazione @Mistoacrilico
FACEBOOK 
https://developers.facebook.com/docs/plugins/ 
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
Una breve 
panoramica 
dei plugin più 
interessanti 
#7formazione
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
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
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
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
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
Perché la scelta 
del bottone è così 
importante 
#7formazione 
Amazon: bottoni privi 
dei contatori
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
Perché la scelta 
del bottone è così 
importante 
#7formazione
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
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
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
“MI PIACE” 
vs 
“cONDIVIDI” 
#7formazione
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
Il “like box” 
per le pagine 
#7formazione 
https://developers.facebook.com/docs/plugins/like-box-for-pages
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
Il “like box” 
per le pagine 
#7formazione
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
integrazione dei 
post nel sito 
#7formazione 
https://developers.facebook.com/docs/plugins/embedded-posts
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
integrazione 
dei post nel 
sito 
#7formazione
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
Integrazione dei 
commenti 
#7formazione 
https://developers.facebook.com/docs/plugins/comments
SOCIAL by wEB DESIGN 
seconda parte 
FACEBOOK 
Integrazione dei 
commenti 
#7formazione
I widget ufficiali 
TWITTER 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
seconda parte 
TWITTER 
Il bottone 
“Tweet” 
#7formazione 
https://about.twitter.com/resources/buttons#tweet
SOCIAL by wEB DESIGN 
seconda parte 
TWITTER 
Il bottone 
“Segui” 
#7formazione 
https://about.twitter.com/resources/buttons#follow 
SEGUI
SOCIAL by wEB DESIGN 
seconda parte 
TWITTER 
“Twittare un 
hashtag” 
#7formazione 
https://about.twitter.com/resources/buttons#tweet 
HASHTAG
SOCIAL by wEB DESIGN 
seconda parte 
TWITTER 
“Menzionare” un 
account 
#7formazione 
https://about.twitter.com/resources/buttons#mention 
MENZIONE
SOCIAL by wEB DESIGN 
seconda parte 
TWITTER 
Incorporare un 
tweet nel sito 
o nel blog 
#7formazione
SOCIAL by wEB DESIGN 
seconda parte 
TWITTER 
Incorporare la 
timeline di un 
account 
#7formazione 
https://twitter.com/settings/widgets/new/user
SOCIAL by wEB DESIGN 
seconda parte 
TWITTER 
Incorporare 
una lista 
creata da un 
account 
#7formazione 
https://twitter.com/settings/widgets/new/list
SOCIAL by wEB DESIGN 
seconda parte 
TWITTER 
Incorporare 
la timeline 
inerente un 
hashtag 
#7formazione 
https://twitter.com/settings/widgets/new/user
I widget ufficiali 
GOOGLE+ 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
seconda parte 
google+ 
Il pulsante +1 
#7formazione 
https://developers.google.com/+/web/+1button/?hl=it
SOCIAL by wEB DESIGN 
seconda parte 
google+ 
Il badge 
google+ 
#7formazione 
https://developers.google.com/+/web/badge/?hl=it
SOCIAL by wEB DESIGN http://www.skande.com/ 
seconda parte 
google+ 
Il badge 
google+ 
#7formazione
I widget ufficiali 
PINTEREST 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN https://business.pinterest.com/it/widget-builder#do_pin_it_button 
seconda parte 
PINTEREST 
Incorporare il 
bottone “Pin It” 
nel sito 
#7formazione
SOCIAL by wEB DESIGN https://business.pinterest.com/it/widget-builder#do_pin_it_button 
seconda parte 
PINTEREST 
Far apparire 
il bottone 
“Pin it” sopra 
un’immagine al 
passaggio del 
mouse 
#7formazione
SOCIAL by wEB DESIGN https://business.pinterest.com/it/widget-builder#do_embed_pin 
seconda parte 
seconda parte 
PINTEREST 
Incorporare un 
post di pinterest 
nel sito 
#7formazione
https://business.pinterest.com/it/widget-builder#do_embed_user 
SOCIAL by wEB DESIGN 
seconda parte 
INSERIRE IL LINK 
DELL’ACCOUNT 
PINTEREST DA 
CONDIVIEDERE 
PINTEREST 
Incorporare 
gli ultimi post 
“pinnati” da un 
account 
#7formazione
https://business.pinterest.com/it/widget-builder#do_pin_it_button 
SOCIAL by wEB DESIGN 
seconda parte 
INSERIRE IL LINK 
DELLA BOARD DA 
CONDIVIEDERE 
PINTEREST 
Incorporare 
gli ultimi 
post “pinnati” 
in una 
determinata 
board 
#7formazione
I widget ufficiali 
INSTAGRAM 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
seconda parte 
INSTAGRAM 
Incorporare un 
post nel sito 
#7formazione
I plugin per Wordpress 
@AgneseLongo #7formazione @Mistoacrilico
https://wordpress.org/plugins/share-this/ 
https://wordpress.org/plugins/addthis/ 
SHARE THIS 
ADD THIS
QUOTABLE 
https://wordpress.org/plugins/quotable/
THE ALPINE PHOTOTILE 
FOR INSTAGRAM 
https://wordpress.org/plugins/alpine-photo-tile-for-instagram/
PINTEREST 
“PIN IT” BUTTON 
https://wordpress.org/plugins/pinterest-pin-it-button/
GALLERY SHARE 
https://wordpress.org/plugins/gallery-share/
Il social wall: un modo interessante 
per aggregare i contenuti 
@AgneseLongo #7formazione @Mistoacrilico
SOCIAL by wEB DESIGN 
seconda parte 
IL SOCIAL 
WALL 
#7formazione 
http://www.vw.com/
SOCIAL by wEB DESIGN 
seconda parte 
IL SOCIAL 
WALL CON 
IFTTT 
#7formazione 
+
SOCIAL by wEB DESIGN https://ifttt.com 
seconda parte 
IF THIS 
THAN THAT 
è un servizio 
che permette di 
automatizzare 
varie operazioni 
compiute 
online. 
#7formazione
SOCIAL by wEB DESIGN 
seconda parte 
IF THIS 
THAN THAT 
“Ogni volta che 
pubblico una 
nuova foto 
su Instagram, 
crea un post 
incorporato su 
Tumblr” 
#7formazione
1 
2 
3
Se siete ancora vivi... 
Ricapitoliamo i 
punti salienti della 
presentazione ;-) 
@AgneseLongo #7formazione @Mistoacrilico
Offrite all’utente 
un’esperienza coerente tra i 
vostri canali online 
@AgneseLongo #7formazione @Mistoacrilico
Gli utenti chiedono un 
dialogo: ascoltateli ed 
interagite 
@AgneseLongo #7formazione @Mistoacrilico
Rendete l’utente un 
partecipante attivo del 
vostro sito... 
Ma mi raccomando, 
moderate! ;-) 
@AgneseLongo #7formazione @Mistoacrilico
Perchè farlo? 
Identità 
Conversazioni 
Community 
Dati 
@AgneseLongo #7formazione @Mistoacrilico
Chiedetevi sempre: 
“Io lo condividerei?” 
@AgneseLongo #7formazione @Mistoacrilico
Le linee guida del brand 
Facebook 
Twitter 
Instagram 
Youtube 
Pinterest 
https://www.facebookbrand.com/ 
https://about.twitter.com/it/press/brand-assets 
https://help.instagram.com/304689166306603 
http://instagram.com/press/ 
https://www.youtube.com/yt/brand/it/color.html 
https://www.youtube.com/yt/brand/it/downloads.html 
https://business.pinterest.com/it/brand-guidelines 
@AgneseLongo #7formazione @Mistoacrilico
I widget ufficiali 
Facebook 
Twitter 
Google+ 
Pinterest 
https://developers.facebook.com/docs/plugins/ 
https://about.twitter.com/resources/buttons 
https://twitter.com/settings/widgets/ 
https://developers.google.com/+/web/ 
https://business.pinterest.com/it/widget-builder 
@AgneseLongo #7formazione @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 
@AgneseLongo #7formazione @Mistoacrilico
@AgneseLongo @Mistoacrilico 
THANKS FOR 
WATCHING! 
#7formazione

Mais conteúdo relacionado

Mais procurados

Prima Posizione - Guida Facebook per i business
Prima Posizione - Guida Facebook per i businessPrima Posizione - Guida Facebook per i business
Prima Posizione - Guida Facebook per i businessStefania Mazzucato
 
Slide Imprendero Day Udine_Marchetto
Slide Imprendero Day Udine_MarchettoSlide Imprendero Day Udine_Marchetto
Slide Imprendero Day Udine_MarchettoProgetto Imprenderò
 
Piccolo Seminario sui Social Media
Piccolo Seminario sui Social MediaPiccolo Seminario sui Social Media
Piccolo Seminario sui Social MediaLe Vin Parfait
 
Creare e gestire una pagina Facebook - by Flobidesign
Creare e gestire una pagina Facebook - by FlobidesignCreare e gestire una pagina Facebook - by Flobidesign
Creare e gestire una pagina Facebook - by FlobidesignFlobidesign.it
 
DigitalRisto: come rendersi appetitosi online
DigitalRisto: come rendersi appetitosi onlineDigitalRisto: come rendersi appetitosi online
DigitalRisto: come rendersi appetitosi onlineSocial Margarita
 
Impariamo a documentare un evento sui social media
Impariamo a documentare un evento sui social mediaImpariamo a documentare un evento sui social media
Impariamo a documentare un evento sui social mediaULRICO HOEPLI EDITORE, MILAN
 
Instagram e birra - Raccontare un brand attraverso le immagini
Instagram e birra - Raccontare un brand attraverso le immaginiInstagram e birra - Raccontare un brand attraverso le immagini
Instagram e birra - Raccontare un brand attraverso le immaginiNicola Carmignani
 
La fotografia sui social network
La fotografia sui social networkLa fotografia sui social network
La fotografia sui social networkLinda Ferrari
 
Video marketing: come raggiungere obiettivi di business
Video marketing: come raggiungere obiettivi di businessVideo marketing: come raggiungere obiettivi di business
Video marketing: come raggiungere obiettivi di businessCombocut
 
Giuliano Ambrosio – Social Media Integration
Giuliano Ambrosio – Social Media IntegrationGiuliano Ambrosio – Social Media Integration
Giuliano Ambrosio – Social Media IntegrationYoung Digital Lab
 
Lezione Buzz Marketing & Social Video Advertising
Lezione Buzz Marketing & Social Video AdvertisingLezione Buzz Marketing & Social Video Advertising
Lezione Buzz Marketing & Social Video AdvertisingAndrea Febbraio
 
Web Marketing Etnies: analisi brand e presenza on-line
Web Marketing Etnies: analisi brand e presenza on-lineWeb Marketing Etnies: analisi brand e presenza on-line
Web Marketing Etnies: analisi brand e presenza on-linePaolo Ratto
 

Mais procurados (13)

Prima Posizione - Guida Facebook per i business
Prima Posizione - Guida Facebook per i businessPrima Posizione - Guida Facebook per i business
Prima Posizione - Guida Facebook per i business
 
Slide Imprendero Day Udine_Marchetto
Slide Imprendero Day Udine_MarchettoSlide Imprendero Day Udine_Marchetto
Slide Imprendero Day Udine_Marchetto
 
Social Media Marketing Advanced
Social Media Marketing AdvancedSocial Media Marketing Advanced
Social Media Marketing Advanced
 
Piccolo Seminario sui Social Media
Piccolo Seminario sui Social MediaPiccolo Seminario sui Social Media
Piccolo Seminario sui Social Media
 
Creare e gestire una pagina Facebook - by Flobidesign
Creare e gestire una pagina Facebook - by FlobidesignCreare e gestire una pagina Facebook - by Flobidesign
Creare e gestire una pagina Facebook - by Flobidesign
 
DigitalRisto: come rendersi appetitosi online
DigitalRisto: come rendersi appetitosi onlineDigitalRisto: come rendersi appetitosi online
DigitalRisto: come rendersi appetitosi online
 
Impariamo a documentare un evento sui social media
Impariamo a documentare un evento sui social mediaImpariamo a documentare un evento sui social media
Impariamo a documentare un evento sui social media
 
Instagram e birra - Raccontare un brand attraverso le immagini
Instagram e birra - Raccontare un brand attraverso le immaginiInstagram e birra - Raccontare un brand attraverso le immagini
Instagram e birra - Raccontare un brand attraverso le immagini
 
La fotografia sui social network
La fotografia sui social networkLa fotografia sui social network
La fotografia sui social network
 
Video marketing: come raggiungere obiettivi di business
Video marketing: come raggiungere obiettivi di businessVideo marketing: come raggiungere obiettivi di business
Video marketing: come raggiungere obiettivi di business
 
Giuliano Ambrosio – Social Media Integration
Giuliano Ambrosio – Social Media IntegrationGiuliano Ambrosio – Social Media Integration
Giuliano Ambrosio – Social Media Integration
 
Lezione Buzz Marketing & Social Video Advertising
Lezione Buzz Marketing & Social Video AdvertisingLezione Buzz Marketing & Social Video Advertising
Lezione Buzz Marketing & Social Video Advertising
 
Web Marketing Etnies: analisi brand e presenza on-line
Web Marketing Etnies: analisi brand e presenza on-lineWeb Marketing Etnies: analisi brand e presenza on-line
Web Marketing Etnies: analisi brand e presenza on-line
 

Semelhante a Social by web design - #7formazione GTMasterClub

La comunicazione 2.0 per il Business To Business (BtB)
La comunicazione 2.0 per il Business To Business (BtB)La comunicazione 2.0 per il Business To Business (BtB)
La comunicazione 2.0 per il Business To Business (BtB)Claudia Zarabara
 
Una strategia di comunicazione digitale a 99 Euro (incluso 166 Euro di budget...
Una strategia di comunicazione digitale a 99 Euro (incluso 166 Euro di budget...Una strategia di comunicazione digitale a 99 Euro (incluso 166 Euro di budget...
Una strategia di comunicazione digitale a 99 Euro (incluso 166 Euro di budget...marcoprando
 
Digital marketing per aziende estratto Facebook
Digital marketing per aziende  estratto FacebookDigital marketing per aziende  estratto Facebook
Digital marketing per aziende estratto FacebookMichele Zecchini
 
Far conoscere la nostra startup sui social media. parte 1°
Far conoscere la nostra startup sui social media. parte 1°Far conoscere la nostra startup sui social media. parte 1°
Far conoscere la nostra startup sui social media. parte 1°Michele Zecchini
 
web 2.0: come creare relazioni dentro e fuori l’azienda
web 2.0: come creare relazioni dentro e fuori l’aziendaweb 2.0: come creare relazioni dentro e fuori l’azienda
web 2.0: come creare relazioni dentro e fuori l’aziendaextrategy
 
Webinar seo & social register
Webinar seo & social registerWebinar seo & social register
Webinar seo & social registerRegister.it
 
Corso online Seo e Social
Corso online Seo e SocialCorso online Seo e Social
Corso online Seo e SocialRegister.it
 
Aruba e-Commerce - 5 Accorgimenti social per aumentare la base clienti #Arubait5
Aruba e-Commerce - 5 Accorgimenti social per aumentare la base clienti #Arubait5Aruba e-Commerce - 5 Accorgimenti social per aumentare la base clienti #Arubait5
Aruba e-Commerce - 5 Accorgimenti social per aumentare la base clienti #Arubait5Aruba S.p.A.
 
Chi Ha Paura Dei Social Media
Chi Ha Paura Dei Social MediaChi Ha Paura Dei Social Media
Chi Ha Paura Dei Social MediaTheGoodOnes
 
PRESIDIARE IL MERCATO SU INTERNET - Costruire un piano di web marketing - Ale...
PRESIDIARE IL MERCATO SU INTERNET - Costruire un piano di web marketing - Ale...PRESIDIARE IL MERCATO SU INTERNET - Costruire un piano di web marketing - Ale...
PRESIDIARE IL MERCATO SU INTERNET - Costruire un piano di web marketing - Ale...Unione Parmense degli Industriali
 
Company profile - Worldz Social Commerce
Company profile - Worldz Social Commerce Company profile - Worldz Social Commerce
Company profile - Worldz Social Commerce Joshua Priore
 
Social media marketing aziendale per aziende b2b
Social media marketing aziendale per aziende b2bSocial media marketing aziendale per aziende b2b
Social media marketing aziendale per aziende b2bDario Vignali
 
[CASE HISTORY] E-COMMERCE PENALIZZATO: DALLA STRATEGIA EDITORIALE ALL'INFOGRA...
[CASE HISTORY] E-COMMERCE PENALIZZATO: DALLA STRATEGIA EDITORIALE ALL'INFOGRA...[CASE HISTORY] E-COMMERCE PENALIZZATO: DALLA STRATEGIA EDITORIALE ALL'INFOGRA...
[CASE HISTORY] E-COMMERCE PENALIZZATO: DALLA STRATEGIA EDITORIALE ALL'INFOGRA...Web In Fermento
 
Il sito aziendale (parte 1): pianificazione, struttura, design, funzionalità
Il sito aziendale (parte 1): pianificazione, struttura, design, funzionalità Il sito aziendale (parte 1): pianificazione, struttura, design, funzionalità
Il sito aziendale (parte 1): pianificazione, struttura, design, funzionalità Giovanni Dalla Bona
 

Semelhante a Social by web design - #7formazione GTMasterClub (20)

La comunicazione 2.0 per il Business To Business (BtB)
La comunicazione 2.0 per il Business To Business (BtB)La comunicazione 2.0 per il Business To Business (BtB)
La comunicazione 2.0 per il Business To Business (BtB)
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Una strategia di comunicazione digitale a 99 Euro (incluso 166 Euro di budget...
Una strategia di comunicazione digitale a 99 Euro (incluso 166 Euro di budget...Una strategia di comunicazione digitale a 99 Euro (incluso 166 Euro di budget...
Una strategia di comunicazione digitale a 99 Euro (incluso 166 Euro di budget...
 
Digital marketing per aziende estratto Facebook
Digital marketing per aziende  estratto FacebookDigital marketing per aziende  estratto Facebook
Digital marketing per aziende estratto Facebook
 
Far conoscere la nostra startup sui social media. parte 1°
Far conoscere la nostra startup sui social media. parte 1°Far conoscere la nostra startup sui social media. parte 1°
Far conoscere la nostra startup sui social media. parte 1°
 
web 2.0: come creare relazioni dentro e fuori l’azienda
web 2.0: come creare relazioni dentro e fuori l’aziendaweb 2.0: come creare relazioni dentro e fuori l’azienda
web 2.0: come creare relazioni dentro e fuori l’azienda
 
Digital Marketing Overview
Digital Marketing OverviewDigital Marketing Overview
Digital Marketing Overview
 
Ufficio stampa web
Ufficio stampa web Ufficio stampa web
Ufficio stampa web
 
I SOCIAL NETWORK
I SOCIAL NETWORKI SOCIAL NETWORK
I SOCIAL NETWORK
 
Webinar seo & social register
Webinar seo & social registerWebinar seo & social register
Webinar seo & social register
 
Corso online Seo e Social
Corso online Seo e SocialCorso online Seo e Social
Corso online Seo e Social
 
Flaviana
FlavianaFlaviana
Flaviana
 
Aruba e-Commerce - 5 Accorgimenti social per aumentare la base clienti #Arubait5
Aruba e-Commerce - 5 Accorgimenti social per aumentare la base clienti #Arubait5Aruba e-Commerce - 5 Accorgimenti social per aumentare la base clienti #Arubait5
Aruba e-Commerce - 5 Accorgimenti social per aumentare la base clienti #Arubait5
 
Chi Ha Paura Dei Social Media
Chi Ha Paura Dei Social MediaChi Ha Paura Dei Social Media
Chi Ha Paura Dei Social Media
 
Web 2.0 e CRM
Web 2.0 e CRMWeb 2.0 e CRM
Web 2.0 e CRM
 
PRESIDIARE IL MERCATO SU INTERNET - Costruire un piano di web marketing - Ale...
PRESIDIARE IL MERCATO SU INTERNET - Costruire un piano di web marketing - Ale...PRESIDIARE IL MERCATO SU INTERNET - Costruire un piano di web marketing - Ale...
PRESIDIARE IL MERCATO SU INTERNET - Costruire un piano di web marketing - Ale...
 
Company profile - Worldz Social Commerce
Company profile - Worldz Social Commerce Company profile - Worldz Social Commerce
Company profile - Worldz Social Commerce
 
Social media marketing aziendale per aziende b2b
Social media marketing aziendale per aziende b2bSocial media marketing aziendale per aziende b2b
Social media marketing aziendale per aziende b2b
 
[CASE HISTORY] E-COMMERCE PENALIZZATO: DALLA STRATEGIA EDITORIALE ALL'INFOGRA...
[CASE HISTORY] E-COMMERCE PENALIZZATO: DALLA STRATEGIA EDITORIALE ALL'INFOGRA...[CASE HISTORY] E-COMMERCE PENALIZZATO: DALLA STRATEGIA EDITORIALE ALL'INFOGRA...
[CASE HISTORY] E-COMMERCE PENALIZZATO: DALLA STRATEGIA EDITORIALE ALL'INFOGRA...
 
Il sito aziendale (parte 1): pianificazione, struttura, design, funzionalità
Il sito aziendale (parte 1): pianificazione, struttura, design, funzionalità Il sito aziendale (parte 1): pianificazione, struttura, design, funzionalità
Il sito aziendale (parte 1): pianificazione, struttura, design, funzionalità
 

Social by web design - #7formazione GTMasterClub

  • 1. SOCIAL by wEB DESIGN #7formazione
  • 2. SOCIAL by wEB DESIGN Agnese Longo Giorgia Pallaro @AgneseLongo #7formazione @Mistoacrilico
  • 3. SOCIAL by wEB DESIGN @AgneseLongo #7formazione @Mistoacrilico digital strategist web designer
  • 4. #7formazione @AgneseLongo SOCIAL by wEB DESIGN prima parte 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
  • 5. #7formazione @Mistoacrilico SOCIAL by wEB DESIGN seconda parte 1. Integrazione dei loghi social nel sito 2. I widget ufficiali 3. I plugin per Wordpress 4. Come realizzare un social wall senza dover passare dal codice
  • 6. SOCIAL by wEB DESIGN 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.
  • 7. SOCIAL by wEB DESIGN 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.
  • 8. I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED: 1. Mostrare al nuovo cosa ne pensa il vecchio @AgneseLongo #7formazione @Mistoacrilico
  • 9. SOCIAL by wEB DESIGN prima parte UN SITO A PROVA DI SOCIAL 1. Mostrare al nuovo cosa ne pensa il vecchio #7formazione http://www.fiat500.com/
  • 10. I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED: 2. Condividere: permettere all’utente di portare all’esterno tutto ciò che è contenuto all’interno. @AgneseLongo #7formazione @Mistoacrilico
  • 11. SOCIAL by wEB DESIGN http://www.kartell.com/it prima parte UN SITO A PROVA DI SOCIAL 2. Condividere: permettere all’utente di portare all’esterno tutto ciò che è contenuto all’interno. #7formazione
  • 12. I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED: 3. Chiedere alla massa @AgneseLongo #7formazione @Mistoacrilico
  • 13. SOCIAL by wEB DESIGN prima parte UN SITO A PROVA DI SOCIAL 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. #7formazione http://c4cactus.citroen.com/it/concept-car
  • 14. I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED: 4. Incoraggiare la conversazione @AgneseLongo #7formazione @Mistoacrilico
  • 15. SOCIAL by wEB DESIGN prima parte UN SITO A PROVA DI SOCIAL 4. Incoraggiare la conversazione. #7formazione http://www.leroymerlin.it/
  • 16. I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED: 5. Aumentare la credibilità @AgneseLongo #7formazione @Mistoacrilico
  • 17. SOCIAL by wEB DESIGN prima parte UN SITO A PROVA DI SOCIAL 5. Aumentare la credibilità #7formazione http://www.bershka.com/it/it/
  • 18. SOCIAL by wEB DESIGN prima parte UN SITO A PROVA DI SOCIAL 5. Aumentare la credibilità #7formazione http://www.nutellastories.com/
  • 19. I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED: 6. Mostrare la propria autenticità @AgneseLongo #7formazione @Mistoacrilico
  • 20. SOCIAL by wEB DESIGN prima parte UN SITO A PROVA DI SOCIAL 6. Mostrare la propria autenticità #7formazione http://www.lorenzinihorse.it/
  • 21. 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 @AgneseLongo #7formazione @Mistoacrilico
  • 22. SOCIAL by wEB DESIGN 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.
  • 23. Gli obiettivi principali devono essere: • trasmettere l’identità del brand • generare conversazioni • rafforzare la community • raccogliere dati sugli utenti SOCIAL by wEB DESIGN prima parte UN SITO SOCIAL ORIENTED: QUALI OBIETTIVI? #7formazione
  • 24. SOCIAL by wEB DESIGN prima parte UN SITO SOCIAL ORIENTED: QUALI Illy ospita all’interno del sito web la community tesa verso l’interazione con i fan. #7formazione http://www.illy.com/wps/wcm/connect/it/community/
  • 25. SOCIAL by wEB DESIGN 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? :-)
  • 26. SOCIAL by wEB DESIGN prima parte 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 UN SITO SOCIAL ORIENTED: CHI SE NE OCCUPA? #7formazione
  • 27. SOCIAL by wEB DESIGN 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”
  • 28. SOCIAL by wEB DESIGN prima parte SOCIAL SITO WEB #7formazione
  • 29. SOCIAL by wEB DESIGN http://www.apple.com/ prima parte SOCIAL SITO WEB 1. Nessuna integrazione social #7formazione
  • 30. SOCIAL by wEB DESIGN http://www.bpv.it/index.php prima parte SOCIAL SITO WEB 1. Nessuna integrazione social #7formazione
  • 31. SOCIAL by wEB DESIGN http://www.zara.com/it/ prima parte SOCIAL SITO WEB 3. Link agli spazi social ma senza strategia: nel sito aziendale vengono inserite le icone dei social ma senza altra indicazione; come fossero normali link ad altri siti. #7formazione
  • 32. SOCIAL by wEB DESIGN http://www.desigual.com/it_IT prima parte SOCIAL SITO WEB 2. Link agli spazi social ma spingendo a condividere. #7formazione
  • 33. SOCIAL by wEB DESIGN http://www.liujo.com/it/ prima parte SOCIAL SITO WEB 4. Integrare il brand negli spazi “social”. #7formazione
  • 34. SOCIAL by wEB DESIGN http://www.missoni.com/ prima parte SOCIAL SITO WEB 4. Integrare il brand negli spazi “social”. #7formazione
  • 35. SOCIAL by wEB DESIGN http://www.citroen.it/ prima parte SOCIAL SITO WEB 5. Inserire le discussioni nel sito. #7formazione
  • 36. http://www.alitalia.com/ SOCIAL by wEB DESIGN prima parte SOCIAL SITO WEB 6. Log-in “social” al sito web: Alitalia #7formazione
  • 37. http://goo.gl/NAjUel SOCIAL by wEB DESIGN prima parte SOCIAL SITO WEB 7. Log-in sociale spingendo a condividere #7formazione
  • 38. SOCIAL by wEB DESIGN http://www.socialnetwall.alfaromeo.com/ prima parte SOCIAL SITO WEB 8. Integrazione totale #7formazione
  • 39. SOCIAL by wEB DESIGN prima parte SOCIAL LOGIN: DATI A GO GO Il social login è una pratica ormai diffusa su molti siti e permette di facilitare agli utenti la registrazione sul proprio sito. #7formazione http://www.yoox.com/
  • 40. • 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 http://goo.gl/L6KxOK @AgneseLongo #7formazione @Mistoacrilico
  • 41. SOCIAL by wEB DESIGN 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.
  • 42. SOCIAL by wEB DESIGN prima parte --> 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 LOGIN: DATI A GO GO #7formazione
  • 43. Volete sapere quale è il Social preferito dai consumatori per il Social Login? SOCIAL by wEB DESIGN prima parte SOCIAL LOGIN: DATI A GO GO #7formazione
  • 44. SOCIAL by wEB DESIGN prima parte --> 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 LOGIN: DATI A GO GO #7formazione
  • 45. SOCIAL by wEB DESIGN prima parte 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 LOGIN: DATI A GO GO #7formazione
  • 46.
  • 47. Vi siete mai imbattuti in contenuti incondivisibili? Cos’avete pensato? Ma soprattutto, lo avete condiviso? SOCIAL by wEB DESIGN prima parte ANDIAMO OLTRE LO “SHARE THIS” #7formazione
  • 48. SOCIAL by wEB DESIGN prima parte ANDIAMO OLTRE LO SHARE THIS Il problema è che molto spesso il bottone “share this” viene applicato in modo indiscriminato in tutto il sito, senza alcuna strategia alla base. #7formazione
  • 49. SOCIAL by wEB DESIGN prima parte 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...) ANDIAMO OLTRE LO “SHARE THIS” #7formazione
  • 50. Di seguito alcuni esempi virtuosi di come integrare in modo efficace una strategia social all’interno del sito web.
  • 52.
  • 56. “Mi rendi il sito più social?” @AgneseLongo #7formazione @Mistoacrilico
  • 57. Non basta aggiungere le icone dei profili social in home page... Ma è pur sempre un buon inizio. @AgneseLongo #7formazione @Mistoacrilico
  • 58. SOCIAL by wEB DESIGN seconda parte NIKE 21 M 6,7 M 3,9 M 2,7 M Ma nessuna icona nel sito #7formazione
  • 59. Non c’è una legge matematica che spieghi dove posizionare le icone. Tuttavia.... @AgneseLongo #7formazione @Mistoacrilico
  • 60. SOCIAL by wEB DESIGN seconda parte HEADER Attenzione alle call to action: le icone dei social media non devono attirare più attenzione di cta come “Acquista” o “Contattaci” #7formazione
  • 61. SOCIAL by wEB DESIGN seconda parte FOOTER Allo stesso tempo, posizionare le icone del footer significa non dar loro rilevanza: non sempre l’utente scrolla fino alla fine del sito. #7formazione
  • 62. SOCIAL by wEB DESIGN seconda parte SEZIONE DEDICATA E’ interessante anche la possibilità di dedicare un’intera sezione del sito ai social media #7formazione
  • 63. “Carine le icone! Ma non è che puoi farle tutte verdi? Proprio come il mio logo!” @AgneseLongo #7formazione @Mistoacrilico
  • 64.
  • 65. C’erano una volta le linee guida... @AgneseLongo #7formazione @Mistoacrilico
  • 66. https://www.facebookbrand.com/ Facebook “f” Logo CMYK / .ai Facebook “f” Logo CMYK / .ai FACEBOOK ASSET USAGE Preserve Clear Space Incorrect Use To 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. 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. “f” Logo Using the “f” Logo 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. Maintain Proportions 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. Print & Packaging
  • 71. Facilitare l’interazione: dove, come, perché? @AgneseLongo #7formazione @Mistoacrilico
  • 72. I widget ufficiali @AgneseLongo #7formazione @Mistoacrilico
  • 73. I widget ufficiali FACEBOOK @AgneseLongo #7formazione @Mistoacrilico
  • 74. FACEBOOK https://developers.facebook.com/docs/plugins/ SOCIAL by wEB DESIGN seconda parte FACEBOOK Una breve panoramica dei plugin più interessanti #7formazione
  • 75. SOCIAL by wEB DESIGN seconda parte FACEBOOK 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
  • 76. SOCIAL by wEB DESIGN seconda parte FACEBOOK 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
  • 77. SOCIAL by wEB DESIGN seconda parte FACEBOOK Perché la scelta del bottone è così importante #7formazione Amazon: bottoni privi dei contatori
  • 78. SOCIAL by wEB DESIGN seconda parte FACEBOOK Perché la scelta del bottone è così importante #7formazione
  • 79. SOCIAL by wEB DESIGN seconda parte FACEBOOK 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
  • 80. SOCIAL by wEB DESIGN seconda parte FACEBOOK “MI PIACE” vs “cONDIVIDI” #7formazione
  • 81. SOCIAL by wEB DESIGN seconda parte FACEBOOK Il “like box” per le pagine #7formazione https://developers.facebook.com/docs/plugins/like-box-for-pages
  • 82. SOCIAL by wEB DESIGN seconda parte FACEBOOK Il “like box” per le pagine #7formazione
  • 83. SOCIAL by wEB DESIGN seconda parte FACEBOOK integrazione dei post nel sito #7formazione https://developers.facebook.com/docs/plugins/embedded-posts
  • 84. SOCIAL by wEB DESIGN seconda parte FACEBOOK integrazione dei post nel sito #7formazione
  • 85. SOCIAL by wEB DESIGN seconda parte FACEBOOK Integrazione dei commenti #7formazione https://developers.facebook.com/docs/plugins/comments
  • 86. SOCIAL by wEB DESIGN seconda parte FACEBOOK Integrazione dei commenti #7formazione
  • 87. I widget ufficiali TWITTER @AgneseLongo #7formazione @Mistoacrilico
  • 88. SOCIAL by wEB DESIGN seconda parte TWITTER Il bottone “Tweet” #7formazione https://about.twitter.com/resources/buttons#tweet
  • 89. SOCIAL by wEB DESIGN seconda parte TWITTER Il bottone “Segui” #7formazione https://about.twitter.com/resources/buttons#follow SEGUI
  • 90. SOCIAL by wEB DESIGN seconda parte TWITTER “Twittare un hashtag” #7formazione https://about.twitter.com/resources/buttons#tweet HASHTAG
  • 91. SOCIAL by wEB DESIGN seconda parte TWITTER “Menzionare” un account #7formazione https://about.twitter.com/resources/buttons#mention MENZIONE
  • 92. SOCIAL by wEB DESIGN seconda parte TWITTER Incorporare un tweet nel sito o nel blog #7formazione
  • 93. SOCIAL by wEB DESIGN seconda parte TWITTER Incorporare la timeline di un account #7formazione https://twitter.com/settings/widgets/new/user
  • 94. SOCIAL by wEB DESIGN seconda parte TWITTER Incorporare una lista creata da un account #7formazione https://twitter.com/settings/widgets/new/list
  • 95. SOCIAL by wEB DESIGN seconda parte TWITTER Incorporare la timeline inerente un hashtag #7formazione https://twitter.com/settings/widgets/new/user
  • 96. I widget ufficiali GOOGLE+ @AgneseLongo #7formazione @Mistoacrilico
  • 97. SOCIAL by wEB DESIGN seconda parte google+ Il pulsante +1 #7formazione https://developers.google.com/+/web/+1button/?hl=it
  • 98. SOCIAL by wEB DESIGN seconda parte google+ Il badge google+ #7formazione https://developers.google.com/+/web/badge/?hl=it
  • 99. SOCIAL by wEB DESIGN http://www.skande.com/ seconda parte google+ Il badge google+ #7formazione
  • 100. I widget ufficiali PINTEREST @AgneseLongo #7formazione @Mistoacrilico
  • 101. SOCIAL by wEB DESIGN https://business.pinterest.com/it/widget-builder#do_pin_it_button seconda parte PINTEREST Incorporare il bottone “Pin It” nel sito #7formazione
  • 102. SOCIAL by wEB DESIGN https://business.pinterest.com/it/widget-builder#do_pin_it_button seconda parte PINTEREST Far apparire il bottone “Pin it” sopra un’immagine al passaggio del mouse #7formazione
  • 103. SOCIAL by wEB DESIGN https://business.pinterest.com/it/widget-builder#do_embed_pin seconda parte seconda parte PINTEREST Incorporare un post di pinterest nel sito #7formazione
  • 104. https://business.pinterest.com/it/widget-builder#do_embed_user SOCIAL by wEB DESIGN seconda parte INSERIRE IL LINK DELL’ACCOUNT PINTEREST DA CONDIVIEDERE PINTEREST Incorporare gli ultimi post “pinnati” da un account #7formazione
  • 105. https://business.pinterest.com/it/widget-builder#do_pin_it_button SOCIAL by wEB DESIGN seconda parte INSERIRE IL LINK DELLA BOARD DA CONDIVIEDERE PINTEREST Incorporare gli ultimi post “pinnati” in una determinata board #7formazione
  • 106. I widget ufficiali INSTAGRAM @AgneseLongo #7formazione @Mistoacrilico
  • 107. SOCIAL by wEB DESIGN seconda parte INSTAGRAM Incorporare un post nel sito #7formazione
  • 108. I plugin per Wordpress @AgneseLongo #7formazione @Mistoacrilico
  • 111. THE ALPINE PHOTOTILE FOR INSTAGRAM https://wordpress.org/plugins/alpine-photo-tile-for-instagram/
  • 112. PINTEREST “PIN IT” BUTTON https://wordpress.org/plugins/pinterest-pin-it-button/
  • 114. Il social wall: un modo interessante per aggregare i contenuti @AgneseLongo #7formazione @Mistoacrilico
  • 115. SOCIAL by wEB DESIGN seconda parte IL SOCIAL WALL #7formazione http://www.vw.com/
  • 116. SOCIAL by wEB DESIGN seconda parte IL SOCIAL WALL CON IFTTT #7formazione +
  • 117. SOCIAL by wEB DESIGN https://ifttt.com seconda parte IF THIS THAN THAT è un servizio che permette di automatizzare varie operazioni compiute online. #7formazione
  • 118. SOCIAL by wEB DESIGN seconda parte IF THIS THAN THAT “Ogni volta che pubblico una nuova foto su Instagram, crea un post incorporato su Tumblr” #7formazione
  • 119. 1 2 3
  • 120.
  • 121. Se siete ancora vivi... Ricapitoliamo i punti salienti della presentazione ;-) @AgneseLongo #7formazione @Mistoacrilico
  • 122. Offrite all’utente un’esperienza coerente tra i vostri canali online @AgneseLongo #7formazione @Mistoacrilico
  • 123. Gli utenti chiedono un dialogo: ascoltateli ed interagite @AgneseLongo #7formazione @Mistoacrilico
  • 124. Rendete l’utente un partecipante attivo del vostro sito... Ma mi raccomando, moderate! ;-) @AgneseLongo #7formazione @Mistoacrilico
  • 125. Perchè farlo? Identità Conversazioni Community Dati @AgneseLongo #7formazione @Mistoacrilico
  • 126. Chiedetevi sempre: “Io lo condividerei?” @AgneseLongo #7formazione @Mistoacrilico
  • 127. Le linee guida del brand Facebook Twitter Instagram Youtube Pinterest https://www.facebookbrand.com/ https://about.twitter.com/it/press/brand-assets https://help.instagram.com/304689166306603 http://instagram.com/press/ https://www.youtube.com/yt/brand/it/color.html https://www.youtube.com/yt/brand/it/downloads.html https://business.pinterest.com/it/brand-guidelines @AgneseLongo #7formazione @Mistoacrilico
  • 128. I widget ufficiali Facebook Twitter Google+ Pinterest https://developers.facebook.com/docs/plugins/ https://about.twitter.com/resources/buttons https://twitter.com/settings/widgets/ https://developers.google.com/+/web/ https://business.pinterest.com/it/widget-builder @AgneseLongo #7formazione @Mistoacrilico
  • 129. 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 @AgneseLongo #7formazione @Mistoacrilico
  • 130. @AgneseLongo @Mistoacrilico THANKS FOR WATCHING! #7formazione