Come incorporare in un sito file PDF, DOCX e PPTX con Google Drive.

Come implementare in un sito o in una pagina web un documento nei formati PDF, DOCX, XLXS, ecc usando il link di Google Drive e il codice di un iframe.

Gli amministratori di siti web si trovano spesso nella necessità di arricchire i propri contenuti testuali con immagini, video e documenti. Se mostrare immagini nel layout non desta difficoltà e per i video possiamo usare un sito esterno quale Youtube l'incorporamento in una pagina web di un documento non è altrettanto immediato.

Ci sono servizi web specializzati per la condivisione di documenti come Slideshare e come lo era Scribd fino a che non ha cambiato business diventando un luogo in leggere ebook, giornali, riviste e appunto anche documenti però dietro pagamento di un compenso.

Non mancano però servizi gratuiti in cui caricare i documenti che poi mostreremo nel web implementati tramite un iFrame. In questo articolo mostrerò come procedere con Google Drive mentre in un altro post illustrerò la stessa funzionlità con OneDrive della Microsoft.

Anche su Google Drive come su OneDrive si possono creare documenti ex novo con Editor per file in DOCX, in XLSX e in PPTX. È però anche possibile caricare qualsiasi tipo di file e per i principali formati di documenti si può ottenere un link da inserire in un codice da incollare in una pagina web per mostrarli.

I file da caricare possono essere stati creati con Office della Microsoft ma anche con il software gratuito Libre Office. Si accede a Google Drive con il nostro account Google o con l'account G Suite.

Se avete un blog su Blogger, in Google Drive finiscono anche le immagini pubblicate nel vostro sito così come le foto condivise tramite Google Foto. Per caricare un documento si va su Nuovo -> Caricamento di file

per poi selezionare il file da implementare nel nostro sito di Blogger, Wordpress, Joomla, Drupal, ecc. Potremo anche creare il documento sul momento andando su Documenti, Fogli o Presentazioni.

In basso a destra della pagina verrà mostrata una finestrella con l'andamento del caricamento fino a vedere il baffo verde del completamento dell'upload. Se fosse la prima volta che caricate un documento su Google Drive si potrebbe aprire una finestra popup in cui è opportuno togliere le flag alle opzioni di conversione nei formati di Google Drive. E' invece consigliabile lasciare la spunta a Conferma impostazioni prima di ogni caricamento per visualizzare la stessa finestra tutte le volte che carichiamo  file PDF, DOCX, XLSX, ecc.

Il documento potrà essere facilmente trovato nel nostro Google Drive andando su Recenti. Alternativamente potremo andare su Nuovo -> Caricamento di file dopo aver aperto una cartella in cui posizionare il file.

Dopo aver individuato il file ci si fa sopra un doppio click per aprirlo in una scheda del browser.

Si clicca sul menù dei tre puntini verticali posto in alto a destra per poi scegliere Condividi.

Nella finestra che si apre si clicca su Ottieni link condivisibile. Nel popup successivo si va su Altro dopo aver aperto il menù cliccando sulla freccetta accanto a Chiunque abbia il link può vedere

Si aprirà un'altra finestra in cui mettere la spunta su Attivo -> Pubblico sul web

In basso va controllato che gli utenti possano solo visualizzare o eventualmente commentare ma non modificare. Il link copiato negli appunti avrà un URL simile a questo con l'ID del file colorato di viola

https://drive.google.com/file/d/1YVS362hu1UnT2NkxHV094nHTM2Jcv44H/view?usp=sharing

Per creare un iframe dovremo usare un codice con questa sintassi di esempio

<div align="center"><iframe height="780" src="https://drive.google.com/file/d/1YVS362hu1UnT2NkxHV094nHTM2Jcv44H/preview" width="580"></iframe></div>

dove si è sostituita la parte finale dell'URL del documento view?usp=sharing con preview e si sono inserite le dimensioni del documento che naturalmente possono essere modificate a piacere. La prima e l'ultima riga servono per centrare il documento nel layout della pagina. Il risultato è il seguente

Il documento anche di più pagine potrà essere consultato completamente agendo sul cursore con il mouse. Cliccando sul bottone di colore nero in alto a destra si potrà aprire il documento su Google Drive come accade con i video di Youtube. Il lettore potrà visualizzare il documento anche senza essere loggato su Google. 

Concludo osservando che per rendere l'iframe responsive e quindi visibile senza essere tagliato anche da mobile nel codice precedente si può p.e. sostituire width="580" con width="95%".