Pubblicato il 04/10/12e aggiornato il

Come incorporare nel blog file PDF, DOC, DOCX, PPT e PPTX.

Come incorporare i documenti PDF, DOC, DOCX, PPT, PPTX e di altro genere nel blog usando Google Drive e mostrandoli in una finestra con strumenti di navigazione e di zoom.
Recentemente mi è stata spedita una email in cui mi si chiedeva come fare per implementare nel sito un documento PDF di molte pagine con relativo link di esempio. Mi sono subito reso conto che si trattava di un PDF caricato su Google Drive, ex Google Documenti ma la implementazione di file caricati sul web con questo servizio non è poi così banale come possa sembrare visto che bisogna avere almeno un paio di accortezze.

Ho pensato quindi di pubblicare un articolo su questo tema con la presunzione che possa interessare alcuni miei lettori. Diciamo subito che da qualche giorno Google Drive ha cessato il supporto per i vecchi formati di Office quali DOC e PPT. Questo comporta che non è più possibile salvare un file in quei formati ma questo non significa che non si possano ancora caricare e condividere nel blog.

Ho testato l'incorporazione dei documenti in formato DOC, DOCX, PDF, PPT e PPTX ma questo non esclude che non possano essere implementati anche file creati con software open source come per esempio Libre Office. Si accede con il nostro account su Google Drive e si clicca sulla icona per fare l'upload dei documenti, si sceglie File e si seleziona il documento nel nostro computer

caricare-google-drive

Si aprirà una finestra popup in cui dovremo 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 da utilizzare se si vogliono modificare i file che si sono caricati

google-drive-caricamento

In basso a destra si vedrà il procedere dell'upload e, quando quest'ultimo sarà completato, il nuovo documento andrà a far parte dell'elenco dei nostri file. Ci si clicca sopra per aprirlo quindi si va in alto a destra su Condividi per modificare le impostazioni della privacy

privacy-docuemto-google-drive






Nella finestra popup successiva si va su Cambia quindi si mette la spunta a Pubblica sul web 

pubblica-sul-web-documento

Si clicca su Salva per rendere il file visibile a chiunque. Finalmente si va sulla colonna di sinistra su File > Incorpora link e si copia il codice che viene mostrato nella finestra popup

pubblicare-file-google-drive

Il codice è quello di un IFrame e se ne possono modificare le dimensioni operando su width e height per renderle compatibili con il nostro layout. Tale codice si può copiare in un post o in una pagina statica in modalità HTML. Come esempio ecco il PDF della mia Guida all'HTML


Nella parte alta della finestra si possono notare i numeri delle pagine, gli strumenti di navigazione e di zoom mentre se si clicca sulla icona più a destra si può aprire il documento originale su Google Drive. Per centrarlo nel post si può aggiungere al codice <div align="center"> all'inizio e </div> alla fine. L'esempio ha riguardato un file PDF ma la procedura è la stessa anche con tutti gli altri formati




29 commenti :

  1. Grazie, molto semplice, adesso che ce lo hai spiegato.

    RispondiElimina
  2. io trovo difficoltà con il blog.
    ho un paio di file già pdf che non sono mai riuscita ad integrare in un post.

    RispondiElimina
    Risposte
    1. @luby+-+-+
      Caricali su Google Drive come illustrato nell'articolo per poi incorporarli.

      Elimina
  3. E' pazzesco, Ernesto, è esattamente l'articolo che mi serviva in questo momento... Cominci a farmi paura ^^
    Un bacione,
    Giuliana

    RispondiElimina
    Risposte
    1. @DietaEDintorni
      Paura no :) Sarà telepatia :D

      Elimina
  4. io per i pdf prefrisco scribd.com ma non so se questo scribd accetta anche tutti gli altri formati.
    http://www.scribd.com/ivabellini

    RispondiElimina
  5. Ho incorporato nel blogger un file pdf, ma qua non riesco (come pure sul suo esempio) a confermare ciò che dice alla fine:

    "Nella parte alta della finestra si possono notare i numeri delle pagine, gli strumenti di navigazione e di zoom mentre se si clicca sulla icona più a destra si può aprire il documento originale su Google Drive"

    RispondiElimina
    Risposte
    1. @ Viaggiatore
      Sembra che abbiano cambiato qualcosa nella grafica. Le miniature delle pagine però si vedono sempre. Prova a cliccare su F5

      Elimina
    2. si vedono sempre le miniature, è vero.
      Però siccome nel mio esempio il carattere è molto piccolo (un articolo scannerizzato del giornale), servirebbe lo zoom (più nel mio caso che nel suo) o al limite aprire l'originale su Google drive per poter leggere le pagine (e con l'aiuto degli strumenti). Comunque grazie:)

      Elimina
  6. Ciao, ho incorporato anch'io da parecchio tempo dei documenti con questa procedura. Tutto bene ma ... ho scoperto che quando si apre il blog si viene reindirizzati al file che è stato inserito come se avesse un redirect.
    C'è una soluzione al problema?
    Grazie

    RispondiElimina
    Risposte
    1. anzi scusa ... ho notato ora che se sono loggata con account google mi da questo redirect (l'ho notato anche su questa tua pagina) se non sono loggata non c'è problema.
      Da cosa può dipendere?
      Succede solo a me?
      Chi dovrei contattare per risolvere nel caso io non potessi fare niente?
      Grazie infinite!

      Elimina
    2. @ Sew by Marissa
      Non so cosa ti succede. Io vedo l'IFrame all'interno del post che posso navigare cliccando sulle miniature poste sulla sinistra. Forse hai un problema con il tuo browser. Non è che usi IE? Perché in quel caso c'è da aspettarsi di tutto :)

      Elimina
    3. A questo punto non so cosa succede.
      Anch'io vedo l'iframe ma il problema è che quando carico la homepage si viene reindirizzati direttamente al primo file inserito. Tra l'altro non vedo la barra in alto per zoom, stampa ecc.
      Io uso google chrome ma ho verificato con altri browser ed è così per tutti!
      Ti dico che se carico questa tua guida (che ha l'iframe inserito al mio stesso modo) la vedo correttamente dall'alto e non partendo dal file pdf.
      :'(

      Elimina
    4. @ Sew by Marissa
      La barra per lo zoom non c'è più in effetti. Probabilmente hanno cambiato qualcosa in Google Drive. Ho riprovato ma il risultato è lo stesso di questa demo.

      Elimina
  7. Grazie per questo articolo, mi è stato molto utile!

    RispondiElimina
  8. Grazie, sei eccezionale. Questo post mi ha aiutato tantissimo e il merito è tutto tuo e delle tue spiegazioni molto semplici :D

    RispondiElimina
  9. Articolo utilissimo! Le potenzialità sconosciute di google drive :)
    Una domanda: ho creato un ebook con flip pdf professional ed esportato in versione html (ottengo una cartella con sub cartelle e un file swf. Ho provato a caricare la cartella su drive ma non trovo il tasto "incorpora". Il procedimento non è applicabile? Grazie!

    RispondiElimina
    Risposte
    1. Credo si possano incorporare solo file in formato Office (Doc, Xls,, ppt, ecc) e in PDF
      @#

      Elimina
    2. Infatti... riesco solo ad ottenere il link per la cartella... beh meglio di niente. Grazie mille!

      Elimina
  10. Ciao e grazie per la tua spiegazione... L'unica cosa è che io ho fatto solo due passaggi, ovvero ho scelto il file, l'ho caricato, poi mi ha dato il link da copiare (e così ho fatto)... Il passaggio del pop-up a me non è apparso, ho provato a cercarlo ma non l'ho trovato... Andando sul blog mi indirizza al pdf subito... Volevo chiederti: saltando i passaggi del pop up e della condivisione, non succede mica niente vero? Grazie mille

    RispondiElimina
    Risposte
    1. L'importante è che tu sia soddisfatta del risultato :)

      Elimina
  11. Grazie, tutto utilissimo. Non si potrebbero eliminare o rimpicciolire le miniature in modo da avere più spazio per il testo? Grazie di nuovo.

    RispondiElimina
    Risposte
    1. C'è una freccia in alto a sinistra accanto alla prima miniatura su cui il lettore può cliccare per nascondere le miniature e visualizzare il testo in tutto l'iframe

      @#

      Elimina
  12. Grazie per l'articolo, google drive e cambiato 2015, non riesco ma lo faccio con OneDrive solo che e cliccabile si rischia che il visitatore esca dal blog, come renderlo non cliccabile? Che codice usare? Grazie

    RispondiElimina
    Risposte
    1. Sono codici di un iframe e quindi si può fare ben poco. Per Google Drive nuova versione leggi qui
      http://www.ideepercomputeredinternet.com/2014/06/google-drive-incorporare-documento-pagina-web.html
      Per OneDrive leggi qua
      http://www.ideepercomputeredinternet.com/2014/02/onedrive-word-excel-powerpoint-office-online.html
      @#

      Elimina
  13. Google drive deve aver cambiato nuovamente qualcosa.. non si aprono più e quelli vecchi sono pagine bianche.

    RispondiElimina
    Risposte
    1. Ha interrotto il supporto di hosting ma i file possono essere ancora pubblicati con il codice embed. Forse hai pubblicato una pagina HTML
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.