docIntegrazione con social networks (Davide Montanari)
download 
Reclamo Transcript
Integrazione con social networks (Davide Montanari)
ADDING SOCIAL PLUGINS TO YOUR OWN SITE Aggiungere SOCIAL PLUGINS al proprio sito è ormai materia quotidiana per coloro che si cimentano nella creazione di un sito internet, infatti, possiamo trovare implementazioni di ogni tipo in giro per il Web, con tanto di ‘Smart Window’ che permette di spuntare l’opzione desiderata e personalizzare l’oggetto che si vuole integrare nel proprio sito, generando direttamente lo SCRIPT necessario. Questo codice andrà inserito dopo il tag <body> all’interno della propria pagina html, come una sorta di inizializzazione; inoltre, questi script necessitano spesso di inserire un tag <div> legato ad altro codice ogni volta che vorrai visualizzare l’oggetto all’interno del sito. D’obbligo parlando di SOCIAL PLUGINS, è citare Facebook. Sempre in aumento, infatti, i siti che si affidano ad esso per affrontare la sfida del lato ‘social’, cioè che promettono di gestire utenti e gruppi, semplicemente facendo il login al famoso network. Sempre in aumento, inoltre, i siti che promettono una semplice implementazione, ma conviene sempre affidarsi al sito ufficiale seguendo questi passaggi: andate su https://developers.facebook.com/ e loggatevi al sito allo stesso modo in cui entrate su Fb, dopodiché premete su ‘Docs’ dove potrete trovare una documentazione completa a seconda dell’ambito d’implementazione: iOS, Android, gaming o sviluppo web. Vengono spesso aggiunti accattivanti contenuti a tutte le sezioni, in particolare per l’implementazione su Apple e Android (vi consiglio di curiosare), ma noi approfondiremo principalmente discorsi legati al web developing; comunque si affrontino le cose, esse sono legate fra loro perché, per esempio, una qualsiasi app scaricabile dal Play Store o dall’Apple Store possiede quasi sempre un lato ‘Desktop’. Per poter integrare oggetti come Like Button, Leave Comments e quant’altro dovrete, da loggati, premere su Apps e poi su . Questo allo scopo di ottenere una “Chiave API”, una sorta di ID applicazione da inserire quando richiesto dentro agli script che vi verranno forniti e presentati in seguito, in queste pagine. E’ lo stesso concetto dell’ID della Google Developers, allo scopo, per esempio, di integrare sul proprio sito servizi come le mappe di Google (Gmaps). Dovrete, ovviamente, dare un nome al vostro applicativo, una sorta di titolo con cui il sito verrà rintracciato sul web e soprattutto nel mondo di fb; se, come nel mio caso, il sito gira su un servlet container come APACHE TOMCAT, dovrete specificare la cartella di webapps (nel mio caso ‘defin’) dentro la quale si trova il progetto e inoltre la pagina principale del sito (spesso chiamata index.html). Ricordatevi di salvare le modifiche attuate. (L’immagine è stata editata per oscurare il mio App ID: questo codice è infatti univoco in relazione al sito che state creando, anche se, su richiesta, può chiaramente essere usato per pagine diverse dello stesso sito.) -->ATTENZIONE! SE VOLETE CHE IL VOSTRO SITO DIVENTI ‘LIVE’ CIOÈ VISIBILE A TUTTI, DOVRETE DISABILITARE LA MODALITÀ SANDBOX. A questo link, https://developers.facebook.com/docs/plugins/ potrete trovare tutte le opzioni che la Fb Developers offre: LIKE BUTTON SHARE DIALOG ADD COMMENTS FOLLOW BUTTON REGISTRATION SEND BUTTON FACEPILE Potrete, nella pagina successiva, scegliere width, height, color_scheme (provate l’opzione Dark) e layout_style dell’oggetto scelto, inoltre potrete settare altri importanti parametri di personalizzazione: Vediamo più nel dettaglio come implementare la possibilità di fare il login a fb dal proprio sito: tutte le operazioni che si svolgeranno, all’interno del proprio sito, successivamente al login avranno un corrispettivo riscontro all’interno del famoso social network. Questo è lo script che viene generato direttamente dal sito come spiegato in precedenza e in questo particolare caso rappresenta un LOGIN BUTTON che, se premuto, chiama la funzione FB.login() che permette all’utente di loggare a Fb dalla pagina html del sito in cui si trova; di questo BUTTON vengono specificate le seguenti caratteristiche: show-faces= ‘‘true’’ significa che lo script è impostato in modo da mostrare le foto profilo degli utenti loggati; width=‘‘200’’ è l’aspetto dimensionale del plugin; max-rows= ‘‘1’’ indica il numero massimo di righe da mostare. Questi e altri attributi sono mostrati nella tabella che trovate prima dell’esempio pratico; MA ORA PROVATE A CAPIRE QUALI ALTRI ATTRIBUTI SONO STATI USATI NELL’ESEMPIO MOSTRATO DI SEGUITO! Mostriamo ora come, una volta effettuato il Login, implementare facilmente la possibilità di lasciare commenti: PROVATE A IMMAGINARVI IL RISULTATO: RICORDATE CHE STIAMO PARLANDO DEL ‘LEAVE A COMMENT’! ECCO IL RISULTATO: Come già accennato, esistono un’infinità di siti che vi permettono di aggiungere comodamente plugins: dovrete andare, per esempio, sul conosciuto http://www.addthis.com/ e cliccare su Get the Code accedendo a questa finestra dalla quale potrete scegliere tutta una serie di contenuti da implementare, grazie al codice che vi viene fornito. Per ognuna di queste categorie potrete scegliere il vostro stile di personalizzazone basato su necessità, gusti personali ed aspetti dimensionali; ecco alcuni possibili esempi di scelte e stili di personalizzazione: ESEMPIO PRATICO: ECCO IL RISULTATO: Davide Montanari - TECNOLOGIE INTERNET E WEB
