Come risolvere “Google Drive folder iframe” e “X-Frame-Options SAMEORIGIN”

Qualche giorno fa ho pubblicato questa nuova sezione nel sito: Hacker Journal

Come si potrà notare, è fatta con GoogleDrive. Quando provai a farla, però, ebbi molti problemi (e da ricerche fatte si direbbe che il problema è decisamente esteso…) a causa di restrizioni imposte da google sugli iframe e le loro pagine. Restrizioni che, tramite htaccess, da tempo ho applicato anch’io su questa community:

 Header append X-FRAME-OPTIONS "SAMEORIGIN"

A causa di questa restrizione, non riuscivo a trovare un modo per mettere dentro un iframe questo url: ./folderview?id=…&usp=sharing

 <iframesrc="https://drive.google.com/folderview?id=0BwEXJh1LGDgxV1RBb0REMm4ydEk&usp=sharing"frameborder="0"></iframe>

Dopo tante ricerche stavo quasi per rinunciare quando, finalmente, ho trovato la soluzione: embeddedfolderview

In pratica, molto semplicemente, bisogna cambiare “folderview” in “embeddedfolderview” e indicare alla fine se vogliamo una vista a “griglia” o “lista” semplice

Griglia: #grid

 <iframesrc="https://drive.google.com/embeddedfolderview?id=0BwEXJh1LGDgxV1RBb0REMm4ydEk#grid"frameborder="0"></iframe>

Lista: #list

 <iframesrc="https://drive.google.com/embeddedfolderview?id=0BwEXJh1LGDgxV1RBb0REMm4ydEk#list"frameborder="0"></iframe>

Ovviamente, ricordatevi di cambiare l’id con quello della vostra cartella preferita 😉

Così facendo, avremo la nostra cartella Google Drive integrata nel nostro sito web!

Facile, non trovate? 😀

—

Non soddisfatto da scegliere se “#list o #grid”, mi son fatto uno scriptino in jquery che passa da una vista all’altra con un semplice click!

Vi avviso che non sono un grande esperto di jquery, quindi non è il massimo, sicuramente migliorabile, ma funziona:

 <pclass=""style="float: right; margin-top:-15px">   <aid="listlink"title="List View"href="#"onclick="listview();returnfalse;"style="display:inline">List View</a>   <aid="gridlink"title="Grid View"href="#"onclick="gridview();returnfalse;"style="display: none">Grid View</a></p><scripttype='text/javascript'>varGDriveLink="https://drive.google.com/embeddedfolderview?id=0BwEXJh1LGDgxV1RBb0REMm4ydEk#";function listview(){   $("#listlink").hide();   $("#gridlink").show();   $("#googledriveiframe").attr("src",""+GDriveLink+"list");}function gridview(){   $("#gridlink").hide();   $("#listlink").show();   $("#googledriveiframe").attr("src",""+GDriveLink+"grid");} document.write('<iframe id="googledriveiframe" src="'+GDriveLink+'grid" style="width:100%; height:470px;" frameborder="0"></iframe>');</script>

Ovviamente richiede la libreria jquery!

Il risultato potete vederlo qui: Hacker Journal

Pubblicare sul drive fa indubbiamente comodo (quella directory, ad esempio, peserebbe alcuni gigabyte)… Poter integrare il risultato nel sito, però, è essenziale e adesso sapete come fare 🙂

Immagino quei siti che non hanno molto spazio, o non dispongono di uno script per un’area download… Bene, basterà creare una directory su gdrive e integratela nel sito tramite iframe! Facile, zero spese, sempre online e veloce!

---

---

---