Code for Show Notion pages No password

คุณรู้ใช่ไหม? ว่าเขียน iframe เพื่อรับ notion page ไม่ได้ ช่วยเขียน html, css, script แบบ responsive เพื่อฝัง notion page สำหรับ Url = 'https://tested-green-016.notion.site/Daily-Good-News-1b48076d7a6b80279c2ae6df53739366' ให้สมบูรณ์แบบอย่างไร

หากต้องการฝัง Notion Page แบบ Responsive ผ่าน Public URL (ไม่ต้องใช้ API) สามารถทำได้ตามนี้ โดยมีเงื่อนไขว่าหน้านั้นต้องตั้งค่า "Public Access" และ "Allow Embedding" ใน Notion ไว้แล้ว:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedded Notion Page</title>
    <style>
        /* Container สำหรับควบคุมขนาด Responsive */
        .notion-embed-container {
            position: relative;
            width: 100%;
            padding-top: min(120vh, 100%); /* ปรับตามความสูงของเนื้อหา */
            margin: 20px 0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            background: #fff;
        }

        /* Iframe */
        #notion-iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* ตัวโหลด */
        .loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: #666;
            display: none;
        }
    </style>
</head>
<body>
    <div class="notion-embed-container">
        <div class="loader">กำลังโหลด...</div>
        <iframe
            id="notion-iframe"
            src="<https://tested-green-016.notion.site/Daily-Good-News-1b48076d7a6b80279c2ae6df53739366?embed>"
            loading="lazy"
            allowfullscreen
        ></iframe>
    </div>

    <script>
        // แสดงตัวโหลดเมื่อเริ่มโหลด
        const loader = document.querySelector('.loader');
        const iframe = document.getElementById('notion-iframe');

        iframe.addEventListener('load', () => {
            loader.style.display = 'none';
        });

        iframe.addEventListener('error', () => {
            loader.textContent = 'โหลดเนื้อหาไม่สำเร็จ';
        });
    </script>
</body>
</html>

🔑 เงื่อนไขสำคัญที่ต้องตรวจสอบ

ตั้งค่า Public Access ใน Notion
- ไปที่หน้า Notion > Share > Publish to web > Enable
- เปิดตัวเลือก "Allow Embedding"
แก้ปัญหา CORS/X-Frame-Options
- หากยังไม่แสดงผล ให้ลองเพิ่มพารามิเตอร์ ?embed ต่อท้าย URL
- ถ้าเว็บคุณใช้ HTTPS ต้องฝังใน HTTPS เท่านั้น

ปรับแต่งเพิ่มเติม

<!-- เปลี่ยน Theme สี (light/dark) -->
<iframe src="https://...?embed&theme=dark"></iframe>

<!-- ซ่อนหัวเรื่อง -->
<iframe src="https://...?embed&hideTitle=1"></iframe>

🚨 หากเกิดปัญหา

แสดงหน้าเปล่า: ตรวจสอบว่า Notion Page ตั้งค่า "Public Access" และ "Allow Embedding" ไว้
เนื้อหาล้น: เพิ่ม CSS นี้ใน Notion Page เอง (Settings > Custom CSS)
```
.notion-page-content { max-width: 100% !important; }
```

วิธีนี้ทำงานได้ดีกว่าใช้ API เพราะใช้ระบบ Embed โดยตรงของ Notion เอง และไม่ต้องจัดการกับ Token ความปลอดภัยใดๆ

ช่วยเขียน responsive web app code black ground สี ชมภู สําหรับรับแสดง notion page ของ 'https://tested-green-016.notion.site/Daily-Good-News-1b48076d7a6b80279c2ae6df53739366'