[TUTORIAL] Trik Cara Pasang (Embed) Dokumen Google Docs di Blog / Website

Google Docs Viewer memudahkan kita melihat secara online berbagai dokumen dari berbagai situs di internet, dan memasangnya (embed) di blog. Masalahnya, justru Google Docs tidak menyediakan kode embed untuk dokumen kita yang ada di akun Google Docs milik kita sendiri.

Layanan office edit dokumen online Google Docs milik Google menyediakan fasilitas Google Docs Viewer agar kita bisa langsung menampilkan konten berbagai type file yang kita dapatkan dari berbagai situs internet secara online di browser tanpa perlu harus download terlebih dulu. Kita juga bisa pasang (embed) tampilan file dokumen tersebut di blog/website.

Namun Google Docs justru tidak menyediakan fasilitas embed code dokumen yang ada di dalam akun Google Docs.

Contohnya, kita bisa dengan mudah embed dokumen dari luar Google Docs misalnya sebuah dokumen pdf yang beralamat di http://example.com/namadokumen.pdf untuk dipasang di blog kita (baca caranya di sini). Tapi anehnya, bila kita ingin embed file dokumen kita sendiri di akun Google Docs milik kita, justru Google tidak menyediakan kode embed untuk itu.

Jadi bagaimana caranya?

*

Cara Pemasangan

Berikut ini tips / trik embed Google Docs di blog atau website.

1. Masuk ke akun Google Docs di sini, lalu klik salah satu dokumen misalnya sebuah dokumen pdf, maka file tersebut akan ditampilkan di Google Docs Viewer.


2. Klik tombol Share yang ada di pojok kanan atas untuk mendapatkan link file tersebut. Agar kita bisa mendapatkan link embed tampilan file itu ke dalam website/blog, maka file itu harus diset sebagai publik, artnya bisa diakses semua orang. Bila belum diset sebagai publik, ikuti langkah berikut ini:
   
   
   
   • Pada jendela Share Setting, klik link bertuliskan "change"
   
   
   • Pilih opsi "Public on the web".
   
   
   
   


3. Copy link yang diberikan, lalu paste ke aplikasi Notepad di Windows (atau ke aplikasi teks-editor lain). Pada teks link ini, akan terlihat file id (srcid) dokumen tersebut, yaitu kode deretan huruf dan angka diantara teks &srcid= dan &hl=, misalnya kode id seperti ini (perhatikan teks yang diberi warna hijau):
   https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=17E9WF6cemEsDpcFe3RcTxfAVBpiImPNcWCcQtMLSn_EgHUsM1c94z3-kQ6to&hl=en_US


4. Pasang kode HTML iframe berikut ini ke dalam konten blog / website:
   

   <iframe src="https://docs.google.com/viewer?srcid=17E9WF6cemEsDpcFe3RcTxfAVBpiImPNcWCcQtMLSn_EgHUsM1c94z3-kQ6to&pid=explorer&chrome=false&embedded=true" width="500" height="500"></iframe>

   
   


5. Ganti kode srcid (yang berwarna merah) dengan kode scrid yang didapat pada langkah 3 di atas. Silahkan atur juga atribut width dan height sesuai keinginan.

*

Demo Pemasangan

Sebagai informasi, Google Docs kita bisa upload berbagai type file, bukan hanya file dokumen (office), tapi termasuk juga type file lainnya seperti file image/gambar, bahkan file zip. Dan, kita juga bisa menampilkan isi file tersebut secara online.

Contohnya embed file zip di Google Docs yang isinya ditampilkan di bawah ini (bisa juga dilihat di sini).

Sedangkan yang berikut ini adalah embed file pdf jadwal imsakiyah dari sini.

.