📸 Instagram Feed for Elementor

Modern, Responsive Instagram Feed Widget for WordPress & Elementor

Features • Installation • Configuration • Usage • Screenshots • Troubleshooting

---

📷 Screenshots

🖼️ Widget Preview 📌 Widget preview screenshot will be added here screenshots/widget-preview.png

⚙️ Admin Panel 📌 Admin panel screenshot will be added here screenshots/admin-panel.png

---

✨ Features

🎨 Design & Layout Grid Layout - Clean, organized display Masonry Layout - Pinterest-style arrangement Slider Layout - Smooth carousel effects Responsive Design - Works on all devices Dark Mode Support - Seamless theme integration	⚡ Performance Built-in Caching - 1-hour auto-refresh Optimized API Calls - Minimal resource usage Lazy Loading - Fast page loads CDN Ready - Compatible with caching plugins
🔧 Customization Full Elementor Controls - Style everything visually Caption Display - Show/hide on hover Media Indicators - Video & carousel icons Custom Colors - Match your brand	🔐 Security & Ease Auto User ID Discovery - No manual entry Secure Token Storage - Protected credentials Easy Setup Wizard - Quick configuration Connection Testing - Verify API access

---

📋 Requirements

Requirement	Minimum Version	Recommended
WordPress	5.0+	6.4+
PHP	7.4+	8.0+
Elementor	3.0+	3.18+
Instagram Account	Business / Creator	-

---

🚀 Installation

Method 1: WordPress Admin Panel

1. Download the plugin ZIP file
2. Go to Plugins → Add New → Upload Plugin
3. Select the ZIP file and click Install Now
4. Activate the plugin

Method 2: FTP/SFTP Upload

1. Extract the ZIP file
2. Upload instagram-feed-elementor folder to /wp-content/plugins/
3. Activate from WordPress Plugins menu

Method 3: Composer (Coming Soon)

composer require sertanozcn/instagram-feed-elementor

---

⚙️ Configuration

Step 1️⃣ Create Instagram Business Account

1. Open Instagram app on your phone
2. Navigate to Settings → Account
3. Select Switch to Professional Account
4. Choose Business or Creator type
5. Connect to a Facebook Page

Step 2️⃣ Create Facebook Developer App

1. Visit developers.facebook.com
2. Click My Apps → Create App
3. Select Business type
4. Add Instagram Graph API product
5. Configure app settings

Step 3️⃣ Generate Access Token

1. Go to Graph API Explorer in your Facebook App
2. Select your app from the dropdown
3. Add required permissions:
   ├── instagram_basic
   └── pages_show_list
4. Click Generate Access Token
5. Exchange for Long-Lived Token (60 days)

Step 4️⃣ Configure Plugin

1. Navigate to Settings → Instagram Feed
2. Paste your Access Token
3. Click Save Settings
4. Click Test Connection to verify

💡 Tip: The plugin automatically discovers your Instagram User ID from the access token!

---

🎨 Usage

Adding the Widget

1. Open any page with Elementor Editor
2. Search for "Instagram Feed" in the widgets panel
3. Drag the widget to your page
4. Configure settings in the side panel

Content Settings

Option	Description	Values
Number of Posts	Posts to display	1-20
Filter by Type	Filter media type	All, Photos, Videos, Carousels
Layout	Display style	Grid, Masonry, Slider
Columns	Grid columns	2-6
Link Target	How links open	New Tab, Same Tab

Display Options

Option	Description
Show Header	Display section title with Instagram icon
Title Text	Customize header text
Show Caption	Display caption on hover
Show Media Icon	Video/Carousel type indicators
Show Timestamp	Display post date

Style Options

Option	Description
Gap	Space between grid items
Border Radius	Image corner roundness
Overlay Color	Hover overlay gradient
Caption Color	Caption text styling
Animation	Hover animation effects

---

🔧 Troubleshooting

❌ "API not configured" Error

• ✅ Verify Access Token is entered correctly
• ✅ Check token hasn't expired (valid for 60 days)
• ✅ Confirm token has required permissions
• ✅ Re-generate token if needed

❌ "No posts found" Error

• ✅ Ensure Instagram account has public posts
• ✅ Verify account is Business/Creator type
• ✅ Click Clear Cache and refresh
• ✅ Check Instagram account is connected to Facebook Page

❌ Widget not displaying

• ✅ Verify Elementor is active
• ✅ Check plugin is activated
• ✅ Clear browser and site cache
• ✅ Deactivate conflicting plugins

❌ Styles not loading correctly

• ✅ Clear all caches (browser, plugin, CDN)
• ✅ Check for CSS conflicts in browser console
• ✅ Ensure no custom CSS is overriding styles

---

📁 File Structure

instagram-feed-elementor/
├── 📄 instagram-feed-elementor.php    # Main plugin file
├── 📄 index.php                        # Security index
├── 📄 README.md                        # Documentation
├── 📄 CHANGELOG.md                     # Version history
├── 📄 LICENSE                          # GPL-2.0 license
│
├── 📂 includes/
│   ├── 📄 class-instagram-api.php     # Instagram API handler
│   └── 📄 class-instagram-admin.php   # Admin settings page
│
├── 📂 elementor/
│   ├── 📄 elementor-init.php          # Elementor integration
│   └── 📂 widgets/
│       └── 📄 instagram-widget.php    # Main widget class
│
└── 📂 assets/
    ├── 📂 css/                         # Stylesheets
    └── 📂 js/                          # JavaScript files

---

📝 Changelog

Version 1.0.0 (2024-01-21)

🎉 Initial Release

• ✅ Grid, Masonry, and Slider layouts
• ✅ Full Elementor integration
• ✅ Instagram Graph API support
• ✅ Auto User ID discovery
• ✅ Dark mode support
• ✅ Responsive design
• ✅ Built-in caching system
• ✅ Admin settings panel

---

🗺️ Roadmap

• [ ] Shortcode support for non-Elementor pages
• [ ] Multiple account support
• [ ] Hashtag feeds
• [ ] Stories integration
• [ ] Gutenberg block
• [ ] Auto token refresh

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the GPL-2.0 License - see the LICENSE file for details.

---

👨‍💻 Developer

Sertan Özcan

---

🆘 Support

Having issues? Check these resources:

• 📖 Documentation
• 🐛 Report a Bug
• 💡 Request a Feature
• 📧 Contact the developer

---

⭐ If you find this plugin helpful, please star the repository! ⭐

Made with ❤️ for WordPress & Elementor Community

© 2024 Sertan Özcan. All rights reserved.