การดึง api ใน google sheet มาแสดง ที่ไม่ต้องใช้ package business plan

สำหรับ WordPress ที่ใช้แผนฟรีหรือแผนส่วนตัว (Personal Plan) และต้องการดึงข้อมูลจาก Google Sheets โดยไม่ต้องใช้ปลั๊กอินที่ต้องการ Business Plan แนะนำวิธีดังนี้:

1. ใช้ปลั๊กอินฟรีที่รองรับ Google Sheets API

คุณสามารถใช้ปลั๊กอินฟรี เช่น:

• WP Table Builder (เหมาะสำหรับแสดงข้อมูลเป็นตาราง)
• Inline Google Spreadsheet Viewer (ดึงข้อมูลจาก Google Sheets มาแสดงในรูปแบบ HTML)
• TablePress + TablePress Extension: Automatic URL Import (สามารถอัปเดตข้อมูลจาก Google Sheets อัตโนมัติ)

ขั้นตอนการใช้ Inline Google Spreadsheet Viewer

1. ติดตั้งปลั๊กอิน Inline Google Spreadsheet Viewer จาก WordPress Plugin Directory
2. เปิด Google Sheets และแชร์ไฟล์แบบ "Anyone with the link"
3. คัดลอก Sheet URL
4. ใช้ Shortcode เช่น:

   [gdoc key="URL_GOOGLE_SHEET"]
   

   หรือใช้ Table Format:

   [gdoc key="URL_GOOGLE_SHEET" class="my-table"]
   

---

2. ใช้ Custom HTML + Google Sheets API

หากต้องการให้ข้อมูลอัปเดตเรียลไทม์ สามารถใช้ Google Sheets API + JavaScript ได้โดยไม่ต้องใช้ปลั๊กอิน เช่น:

ขั้นตอนการทำ

1. เปิด Google Sheets และแชร์แบบ "Anyone with the link"
2. คัดลอก Sheet ID จาก URL
   ตัวอย่าง URL:

   https://docs.google.com/spreadsheets/d/1A2B3C4D5E6F7G8H9I0/edit#gid=0
   

   Sheet ID คือ 1A2B3C4D5E6F7G8H9I0
3. เพิ่มโค้ด Custom HTML + JavaScript ใน WordPress ไปที่ Custom HTML Block แล้ววางโค้ด:

   <div id="listings"></div>
   
   <script>
   async function fetchGoogleSheetData() {
       const sheetId = "1A2B3C4D5E6F7G8H9I0";
       const sheetName = "Sheet1"; // เปลี่ยนตามชื่อ Sheet ของคุณ
       const url = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?tqx=out:json&sheet=${sheetName}`;
   
       const response = await fetch(url);
       const text = await response.text();
       const json = JSON.parse(text.substring(47, text.length - 2));
   
       let html = "";
       json.table.rows.forEach(row => {
           const imageUrl = row.c[0].v;
           const title = row.c[1].v;
           const price = row.c[2].v;
           const location = row.c[3].v;
   
           html += `
               <div style="display: flex; border: 1px solid #ddd; margin-bottom: 10px; padding: 10px;">
                   <img src="${imageUrl}" style="width: 100px; height: 100px; object-fit: cover; margin-right: 10px;">
                   <div>
                       <h3>${title}</h3>
                       <p>฿ ${price}</p>
                       <p>📍 ${location}</p>
                   </div>
               </div>
           `;
       });
   
       document.getElementById("listings").innerHTML = html;
   }
   
   fetchGoogleSheetData();
   </script>
   

---

สรุป

• หากต้องการปลั๊กอิน → ใช้ Inline Google Spreadsheet Viewer หรือ TablePress
• หากต้องการใช้โค้ดเอง → ใช้ Google Sheets API + JavaScript
• ไม่ต้องใช้ Business Plan → ใช้วิธีดึง JSON จาก Google Sheets ผ่าน Google Visualization API