Spaces:
Running
Running
| <html><head><base href="https://graph.facebook.com/"> | |
| <title>Instagram Graph API Response - User Media</title> | |
| <style> | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| line-height: 1.6; | |
| color: #1c1e21; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f0f2f5; | |
| } | |
| header { | |
| background: #4267B2; | |
| color: white; | |
| text-align: center; | |
| padding: 1em; | |
| margin-bottom: 2em; | |
| border-radius: 8px; | |
| } | |
| h1, h2, h3 { | |
| color: #1c1e21; | |
| } | |
| .container { | |
| background-color: #fff; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .note { | |
| background-color: #e7f3ff; | |
| border-left: 4px solid #1877f2; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| pre { | |
| background-color: #f6f7f9; | |
| border: 1px solid #dddfe2; | |
| border-radius: 6px; | |
| padding: 15px; | |
| overflow-x: auto; | |
| } | |
| code { | |
| font-family: Menlo, Monaco, 'Courier New', monospace; | |
| font-size: 14px; | |
| } | |
| .media-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .media-item { | |
| background-color: #fff; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| transition: transform 0.3s ease; | |
| } | |
| .media-item:hover { | |
| transform: scale(1.03); | |
| } | |
| .media-item img, | |
| .media-item video { | |
| width: 100%; | |
| height: 300px; | |
| object-fit: cover; | |
| } | |
| .media-info { | |
| padding: 15px; | |
| } | |
| .media-caption { | |
| font-size: 14px; | |
| color: #1c1e21; | |
| margin-bottom: 10px; | |
| } | |
| .media-meta { | |
| font-size: 12px; | |
| color: #65676b; | |
| } | |
| .pagination { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 20px; | |
| } | |
| .pagination button { | |
| background-color: #1877f2; | |
| color: white; | |
| border: none; | |
| padding: 10px 15px; | |
| margin: 0 5px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .pagination button:disabled { | |
| background-color: #e4e6eb; | |
| cursor: not-allowed; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Instagram Graph API Response</h1> | |
| <p>GET /{ig-user-id}/media</p> | |
| </header> | |
| <div class="container"> | |
| <h2>User Media</h2> | |
| <p>Displaying recent media from the Instagram Business Account</p> | |
| <div class="media-grid"> | |
| <div class="media-item"> | |
| <img src="https://example.com/img1.jpg" alt="A colorful sunset over the ocean"> | |
| <div class="media-info"> | |
| <div class="media-caption">Chasing sunsets 🌅 #beachlife #summervibes</div> | |
| <div class="media-meta"> | |
| <span>Photo</span> • | |
| <span>Posted 2 days ago</span> • | |
| <span>@instagramuser</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="media-item"> | |
| <video src="https://example.com/video1.mp4" controls></video> | |
| <div class="media-info"> | |
| <div class="media-caption">Behind the scenes at our latest photoshoot! 📸 #fashionweek</div> | |
| <div class="media-meta"> | |
| <span>Video</span> • | |
| <span>Posted 5 days ago</span> • | |
| <span>@instagramuser</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="media-item"> | |
| <img src="https://example.com/img2.jpg" alt="A delicious looking plate of pasta"> | |
| <div class="media-info"> | |
| <div class="media-caption">Homemade pasta night! 🍝 Recipe in bio. #foodie #homecooking</div> | |
| <div class="media-meta"> | |
| <span>Photo</span> • | |
| <span>Posted 1 week ago</span> • | |
| <span>@instagramuser</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- More media items would be dynamically added here based on API response --> | |
| </div> | |
| <div class="pagination"> | |
| <button disabled>Previous</button> | |
| <button>Next</button> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <h3>API Response Sample</h3> | |
| <pre><code> | |
| { | |
| "data": [ | |
| { | |
| "id": "17895695668004550", | |
| "caption": "Chasing sunsets 🌅 #beachlife #summervibes", | |
| "media_type": "IMAGE", | |
| "media_url": "https://example.com/img1.jpg", | |
| "permalink": "https://www.instagram.com/p/abcd1234/", | |
| "thumbnail_url": null, | |
| "timestamp": "2023-07-15T18:45:00+0000", | |
| "username": "instagramuser" | |
| }, | |
| { | |
| "id": "17895695668004551", | |
| "caption": "Behind the scenes at our latest photoshoot! 📸 #fashionweek", | |
| "media_type": "VIDEO", | |
| "media_url": "https://example.com/video1.mp4", | |
| "permalink": "https://www.instagram.com/p/efgh5678/", | |
| "thumbnail_url": "https://example.com/video1_thumbnail.jpg", | |
| "timestamp": "2023-07-12T14:30:00+0000", | |
| "username": "instagramuser" | |
| }, | |
| { | |
| "id": "17895695668004552", | |
| "caption": "Homemade pasta night! 🍝 Recipe in bio. #foodie #homecooking", | |
| "media_type": "IMAGE", | |
| "media_url": "https://example.com/img2.jpg", | |
| "permalink": "https://www.instagram.com/p/ijkl9012/", | |
| "thumbnail_url": null, | |
| "timestamp": "2023-07-08T20:15:00+0000", | |
| "username": "instagramuser" | |
| } | |
| ], | |
| "paging": { | |
| "cursors": { | |
| "before": "QVFIUmNOeGZA1aGZABZAVhSN1JIeC1B...", | |
| "after": "QVFIUmNkNkZA2RmNubWpn..." | |
| }, | |
| "next": "https://graph.facebook.com/v13.0/17841405309211844/media?fields=id%2Ccaption%2Cmedia_type%2Cmedia_url%2Cpermalink%2Cthumbnail_url%2Ctimestamp%2Cusername&limit=25&after=QVFIUmNkNkZA2RmNubWpn..." | |
| } | |
| } | |
| </code></pre> | |
| </div> | |
| <div class="note"> | |
| <p><strong>Note:</strong> This is a simulated response based on typical Instagram Graph API results. In a real scenario, you would need to provide a valid access token and user ID to receive actual data.</p> | |
| </div> | |
| <script> | |
| // This script would handle pagination and dynamic loading of media | |
| document.querySelector('.pagination button:last-child').addEventListener('click', function() { | |
| alert('This would load the next page of media in a real implementation.'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |