Come incorporare un album Facebook sul tuo sito web

google-plus Scritto da . Postato in HTML

Una delle cose ricorrenti quando si programma o si crea un sito web, è soddisfare l'esigenza del proprio cliente di inserire una galleria immagini che possa ospitare non solo le immagini che vengono fornite durante la creazione del sito stesso, ma anche quelle future che di volta in volta verranno scattate per documentare i nuovi lavori o progetti.

La scelta della tecnologia e della galleria giusta, dipende molto da quello che sta cercando il cliente, dalla piattaforma che si è scelto per creare il nuovo website e dalle preferenze di chi lo sta facendo.

Ci sono gallerie immagini che si basano essenzialmente sull'uso di HTML e CSS, altre che fanno uso di Javascript e framework come jQuery, altre ancora che fanno l'uso di linguaggi di scripting serverside come PHP per generare le gallerie in base ai file contenuti in una cartella del webserver. Queste scelte, indipendentemente dalla tecnologia usata, hanno un comune denominatore: Le immagini risiedono all'interno dello spazio web su cui risiedono fisicamente anche i file che costituiscono lo stesso website.

Vi è poi la possibilità di collegarsi a servizi più o meno validi di storage delle foto per poi estrapolarne una galleria da visualizzare direttamente sul sito web prescelto.

L'articolo in essere, prenderà appunto in considerazione come includere in maniera abbastanza rapida e non troppo complessa una galleria immagini che mostra un album Facebook contenuto all'interno di una pagina Facebook da noi gestita.

Perché ciò dovrebbe interessare? Quali i vantaggi?

  • Non si dovrà modificare il codice della pagina HTML per includere le immagini nella galleria.
  • Il cliente può gestire la galleria immagini sul suo sito modificando a piacere l'album sulla sua pagina Facebook.

Ciò è vero soprattutto se il cliente gestisce la pagina Facebook e concorre nel pubblicare post e pubblicizzare la sua impresa.

Per fare ciò di cui l'articolo, mi affiderò all'uso di una galleria immagini che fa uso di jQuery e di un plugin adhoc per lo scopo trovato su Github.

Se fate ricerca sul web per trovare sistemi simili, riscontrerete che molti dei sistemi descritti sono antiquati e/o non più funzionanti. Complice l'evoluzione della piattaforma Facebook e i molti cambiamenti anche in tema di sicurezza.

Prima di spiegare il sistema da me adottato per l'integrazione di un album Facebook sul sito elevatorepertraslochi.it, faccio comunque menzione di un altro valido sistema, anch'esso in parte gratuito, semplice e rapido da includere nelle vostre pagine.

Embed Social

Il sistema, lo potete trovare alla pagina https://embedsocial.com/. Ciò che si richiede per utilizzarlo, sarà incollare l'url dell'album Facebook nello spazio apposito in centro alla pagina e svolgere una piccola registrazione. Una volta fatto questo, vi si presenterà un anteprima della vostra galleria immagini e sulla destra dello schermo lo snippet di codice da includere nel vostro codice HTML per rendere effettiva la visualizzazione delle immagini importate da Facebook sul vostro website. 

embed social album facebook

Le poche pecche, sono le poche possibilità di personalizzazione della galleria dovute alla versione "trial" e il fatto che la pubblicità ad EmbedSocial sia evidente in tutta la sezione che comparirà sulla vostra pagina (così come mostrato nella preview e nell'esempio qui sopra riportato). Tuttavia, se comprate il servizio, le possibilità si moltiplicheranno consentendovi di dare più spazio alla vostra fantasia.

Il fatto di essere legato ad un sistema a pagamento ed esterno al nostro sito web, ha degli svantaggi intrinsechi, come quello che cambierà a seconda dell'evolversi del servizio o che addirittura potrebbe essere tolto senza che noi ce ne accorgiamo lasciando un buco vuoto laddove lo avevamo inserito nella pagina.

E' vero che vi sono anche vantaggi come quello che a seconda del cambiamento della tecnologia, sono loro a fare le modifiche, tuttavia io stavo cercando qualcosa che fosse più malleabile e non soggetto a capricci e necessità di terzi. Per questo, ho optato per il sistema che vi illustro di seguito.

Galleria + Facebook Plugin 

Il merito di questo sistema lo si deve a chi lo ha creato e lo ha reso disponibile su Github a questa pagina: 

Display Facebook Photos on Your Website with Galleria.

Galleria

Il plugin di Aiaio, si basa su Galleria una galleria fotografica responsive che "mira a semplificare il processo di creazione di gallerie di immagini professionali per il web e per i dispositivi mobili". La cosa migliore, è che lo strumento è gratuito e viene fornito così com'è con un tema attraente per visualizzare i tuoi album.
Se non bastasse, si possono acquistare temi aggiuntivi per la personalizzazione.

Nel mio caso e per il mio scopo, il tema originale è stato sufficiente per la realizzazione della galleria immagini fotocopia da Facebook. Infatti, la galleria Facebook, già come potete apprezzarla nel sito web elevatorepertraslochi.it è completa di miniature a scorrimento e ingrandimento con finestra lightbox su click dell'immagine principale.

galleria album facebook esempio

Galleria da solo, non supporta attualmente il caricamento degli album di Facebook. Nativamente possiede plugin che supportano Flickr o Picasa.

Quello di Aiaio, è stato un adattamento del plugin Flickr per poter comunicare e lavorare con Facebook.

Ora vedremo nel dettaglio le istruzioni passo passo su come visualizzare un album di foto di Facebook sul tuo sito web grazie a Galleria e al plugin Facebook:

Galleria - Facebook Plugin: Come integrarlo

1. ID Album

La prima cosa da fare è trovare l'ID dell'album di Facebook che si desidera visualizzare nel proprio sito web.

Purtroppo, ad oggi, non vi è un metodo automatico, tuttavia, per poterlo ottenere, è sufficiente navigare su Facebook fino a visualizzare il vostro album e copiarne l'ID dall'URL sulla barra di navigazione del Browser. Nel mio caso:

https://www.facebook.com/pg/elevatorepertraslochi/photos/?tab=album&album_id=982616651892994

Una volta copiato l'ID dell'album in questione, annotatevelo, servirà nei prossimi passaggi.

2. Ottenere un token di accesso a Facebook API

Da giugno 2015, Facebook richiede di avere un token di accesso per poter accedere alle foto dall'esterno. Questo vale anche per gli album pubblici. Per generare un token, seguite la seguente procedura:

Create un'applicazione sul sito Facebook Developers: https://developers.facebook.com/

sviluppatori fb

Con i dati dell'applicazione Facebook (APP_ID e CHIAVE_SEGRETA), modificate il seguente URL:

https://graph.facebook.com/oauth/access_token?client_id=APP_ID&client_secret=CHIAVE_SEGRETA&grant_type=client_credentials

Inserite l'URL così modificato nella barra degli indirizzi del vostro browser e premete invio per confermare la navigazione al link dato.

Vi apparirà una pagina bianca con una scritta come quella riportata qui sotto:

{"access_token":"XXXXXXXXXXXXXX|YYYYYYYYYYYYYYYYY","token_type":"bearer"}

Questo dato in formato JSON, contiene l'access token indispensabile per ciò che dobbiamo fare. Prendete nota del codice da me sostituito con XXXXXXXXXXXXXX|YYYYYYYYYYYYYYYYY: E' il vostro tocken.

3. Scarica e installa Galleria:

Andate al seguente link: http://galleria.io/download/ e scaricate l'ultima versione di Galleria. Alla data dell'articolo, è la 1.5.7

Scaricate Facebook Plugin by AIAIO, ospitato presso GitHub: https://github.com/aiaio/galleria-facebook

Prendiamo per convenzione, di avere nello spazio web del nostro sito la cartella js/ ospitante gli script e le librerie Javascript.

Scompattiamo il contenuto del file compresso scaricato dal sito ufficiale di Galleria nella cartella js/ del nostro spazio web.

La libreria Galleria contiene una cartella denominata plugin/. Aprite il file compresso dell'ultima versione del Gallery Facebook Plugin scaricato da GitHub. Estrai l'intera cartella facebook/ direttamente nella directory plugin/ di Galleria in modo che il percorso dei file risulti come quello qui descritto:

js/galleria/
   js/galleria/plugins
     js/galleria/plugins/facebook

Fatto questo, carica le librerie jQuery, Galleria e il plugin Galleria Facebook nella tua pagina HTML nel seguente modo, all'interno del tag HEAD:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/galleria/galleria-1.5.7.min.js"></script>
<script src="/js/galleria/plugins/facebook/galleria.facebook.js"></script>

Aggiungi il seguente codice HTML alla tua pagina, nel punto dove desiderate appaia la galleria immagini, impostando l'ALBUM_ID (raccolto nel passaggio 1), e l'access token di Facebook (generato nel passaggio 2) e facoltativamente l'altezza e la larghezza (Consiglio di non mettere larghezza. Si adatterà in automatico al contenitore DIV che lo ospita. )

<script>
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
 facebook: 'album:ALBUM_ID',
 width: 745,  /*facoltativo*/
 height: 550, /*facoltativo*/
 lightbox: true,
 facebookOptions: {
   max: 30, // optional override for limit of 40 photos on an album
   facebook_access_token: 'FACEBOOK_ACCESS_TOKEN'
 }
});
</script>
<div id="galleria"></div>

Manca solo testare il funzionamento e godere del lavoro fin qui svolto.

Se poi si volesse personalizzare, è possibile vedere e sperimentare le altre opzioni di visualizzazione Galleria visitando la Documentazione online e provandole sul vostro sito.

Sperando vi sia utile, vi invito a mettere mi piace all'articolo e se desiderate e conoscete altri metodi validi, scrivetemi così potrò integrare l'articolo con i vostri suggerimenti... ????


Se hai gradito l'articolo, condividilo, basta un click!

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo prontopro
  • logo boutique serramento
  • koilab japan and tropical fish farm
  • Trasloco economico - gruppo Arco Traslochi
  • logo flash pulizie
  • logo revolution
  • logo planetkoi small
  • logo finiture
  • ick logo template
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. La nostra Privacy Policy è cambiata: Ti invitiamo a prenderne visione. Oppure visiona la nostra Cookie Policy: