วันอาทิตย์ที่ 15 มีนาคม พ.ศ. 2558

Embed โค้ดจาก Google Document มาแสดงหน้าเว็บ

Embed โค้ดจาก Google Document มาแสดงหน้าเว็บ

ไม่ได้เขียนเว็บมาซะนาน พอดีวันนี้มีเรื่องที่จะต้องอับเดทเว็บ และต้องการนำเอกสารที่อับโหลดไปเก็บไว้ Google Document มาแสดงหน้าเว็บ ปรากฏว่าที่เคยทำมา ตอนนี้มันทำไม่ได้ไม่รู้ว่าต้องไป get code ตรงใหน(เหมือนกับการนำวิดีโอใน Youtube มาแสดงในหน้าเว็บเรา) ก็เลยต้องไปแกะเอาโค้ดมา แล้วก็เลยมาเขียนบันทึกไว้ที่นี่เพื่อเป็นแนวทาง เผื่อได้ใช้อีกในวันข้างหน้า

1. อับโหลดเอกสารไปเก็บไว้ที่ Google Document

2. ตั้งค่าเป็น Public on the web – Anyone on the Internet

3. ได้ลิงค์ไฟล์เอกสาร เป็น https://docs.google.com/open?id=xxxxxxxxxx

4. นำโค้ดนี้ไปใช้ <iframe width=100% height=1000px frameborder=0 src=https://docs.google.com/viewer?a=v&pid=explorer&chrome=false&embedded=true&srcid=xxxxxxxxxx&hl=th></iframe>

เมื่อ xxxxxxxxxx คือ ID ของไฟล์เอกสาร

/////////////////////

ต่อไปนี้เป็นตัวอย่าง

- ไฟล์เอกสาร คือ

https://docs.google.com/open?id=0B73xPWAb6m25M2FhODIyNDAtNWY1MS00MjE4LTk4NDctZGQ0YTFmZjRkODEw

- โค้ดที่นำมาแสดงคือ
<iframe width=100% height=400px frameborder=0 src=https://docs.google.com/viewer?a=v&pid=explorer&chrome=false&embedded=true&srcid=
0B73xPWAb6m25MmI0YjgzNzAtYTBkNC00YWI1LThiNDktNDhlMTM5OTQwOTMx
&hl=th><
/iframe>

/////////////////////
การแสดงผลจะได้ดัง iframe ด้างล่าง

หมายเหตุ
- แสดงผลได้ดีใน Chrome , Firefox
- Internet Explorer(IE) ไม่เวิร์ดเท่าไร ต้องทำลิงค์ให้เปิดเอกสารโยตรง เช่น

หากไม่สามารถอ่านไฟล์ได้ ->(คลิกที่นี่เพื่อเปิดไฟล์หน้าจอใหม่)


Whatsapp Button works on Mobile Device only

Start typing and press Enter to search