Pubblicato il 03/11/17 - aggiornato il  | 7 commenti :

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

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.

caricamento-completato

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.

file-caricato





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

condivisione-file

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

link-condivisibile

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

chiunque-abbia-il-link

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

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%". 


7 commenti :

  1. Buongiorno Ernesto, riguardo all'esempio pdf incorporato, domando se c'è modo, dato che vi è anche la possibilità di scaricarlo, di sapere quanti utenti lo hanno scaricato, oppure occorre affidarsi a piattaforme tipo Issu per avere dei dati statistici. Grazie

    RispondiElimina
  2. Ciao Ernesto, ho un problema. Ho un PDF con link cliccabili da caricare in google drive per fare la condivisione da te qui illustrata. Funziona tutto a meraviglia: il pdf appare nel sito/blog e va tutto bene, solo che ilink non sono più cliccabili. Il problema però non è sul blog ma su Drive: mi sono accorta che, al momento del caricamento, i link spariscono: il PDF, una volta messo su Drive, perde tutti i collegamenti. Purtroppo non trovo alcun pannello per vedere se ci sono altre opzioni in fase di caricamento del file. Per caso sapresti aiutarmi?
    Grazie!

    RispondiElimina
    Risposte
    1. Non so aiutarti mi spiace. I PDF vengono convertiti quindi probabilmente spariscono i link. Potresti provare a cercare altre soluzioni (OneDrive, ecc...) che però non so se mantengono i link
      @#

      Elimina
    2. Ti ringrazio perché invece mi hai aiutata: dopo aver già provato varie soluzioni ho letto OneDrive e mi si è accesa la lampadina... funziona! Grazie ancora :)

      Elimina
  3. Ciao Ernesto, grazie per l'articolo! Ho provato a rendere pubbliche delle immagini per il mio slider del blog, ma non si visualizza la foto 😣 https://ilfilodiariadneblog.blogspot.com/?m=1

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy