How to use Instagram Feed Widget of Sky Addons for Elementor

The Sky Addons Instagram Feed widget pulls posts directly from your Instagram Business or Creator account and displays them as a responsive grid on any Elementor page. It connects through the official Instagram Graph API, supports both Instagram Login (no Facebook required) and Facebook Page authentication, caches the feed server-side to stay fast, and includes an optional “Load More” button so visitors can browse deeper without leaving the page. This documentation will guide you through the process of using the Instagram Feed Widget to create a live, always-updated Instagram gallery on your website.

Features:

1. Dual API Connection: Connect via Instagram Login (graph.instagram.com) without needing a Facebook account, or through a Facebook Page linked to your Instagram Business account.
2. Server-Side Caching: Feed data is cached as a WordPress transient (up to 50 posts) so every page load stays fast and Instagram API rate limits are respected.
3. Masonry Layout: Toggle Pinterest-style masonry packing so expanded cards never leave empty gaps beside their row.
4. Responsive Columns: Set 1–4 columns independently for desktop, tablet, and mobile.
5. Entrance Animations: Posts animate in as they scroll into view with a staggered Fade In, Fade Up, or Zoom In effect — with automatic respect for reduced-motion preferences.
6. Load More Button: Progressively reveal additional posts without a page reload, paging through the cached set at zero API cost.
7. Caption Controls: Limit caption word count, show a “Read More” link that expands inline or opens Instagram, and highlight hashtags with a custom accent color.
8. Video Autoplay: Reel and video posts play muted and looped when scrolled into view, with a thumbnail fallback.

Before You Start — Connect Your Instagram Account

The Instagram Feed widget requires a valid API access token before it can display posts. Set this up once in your WordPress dashboard and every Instagram widget on the site will use it automatically.

1. In your WordPress dashboard, go to Sky Addons → Settings → API.
2. Under the Instagram section, choose your connection type: Instagram Login (no Facebook needed — requires an Instagram Business or Creator account) or Facebook Page (uses a Facebook Page token linked to your Instagram account).
3. Paste your Access Token. For Instagram Login, generate a long-lived token through the Instagram Graph API. For Facebook Page, use a Page access token with instagram_basic permission.
4. Optionally paste your Instagram Account ID if you want to display a specific account; otherwise the token’s own account is used automatically.
5. Save settings. The token is now available to all Instagram widgets sitewide.

Insert Instagram Feed Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Instagram Feed in the widget panel and drag it onto the canvas.

Configure Layout

The Layout section controls how the grid is arranged on screen.

1. Masonry: Toggle on to pack cards column-by-column (Pinterest style), preventing empty space when posts have varying heights.
2. Columns: Choose 1–4 columns per breakpoint (desktop default: 3, tablet: 2, mobile: 1).
3. Column / Row Gap: Adjust the spacing between cards (0–80 px), applied uniformly to both axes.
4. Entrance Animation: Select None, Fade In, Fade Up, or Zoom In. Cards animate in with a subtle stagger as they scroll into view.

Configure Instagram Source

The Instagram Source section determines which account the widget reads from and whether to use the global API credentials or a custom set for this widget.

1. Connection: Choose Instagram Login (no Facebook) or Facebook Page (linked account).
2. API Source: Global uses the credentials saved in Sky Addons Settings (recommended). Custom lets you enter a token and account ID specific to this widget.
3. Instagram Account ID (Custom only): The numeric Instagram account ID. Leave blank to use the token’s own account.
4. Access Token (Custom only): An Instagram Login token or a Facebook Page token with instagram_basic permission.
5. Cache Feed: Strongly recommended — on by default. Caches posts as a WordPress transient to cut API calls.
6. Refresh Cache Every: How long before the cache is rebuilt. Options range from 30 minutes to 7 days (default: 12 hours).

Configure Feed Options

The Feed section controls which parts of each post are shown and how many posts appear initially.

1. Number of Posts: How many posts to display initially (1–50, default: 6).
2. Profile Image: Toggle the account avatar in the card header on or off.
3. Username: Show or hide the Instagram username in the card header.
4. Menu Dots: Toggle the three-dot menu that links to the original post on Instagram.
5. Media: Show or hide the post image or video thumbnail.
6. Autoplay Videos: When on, video and Reel posts play muted and looped when scrolled into view.
7. Caption: Show or hide the post caption text.
8. Caption Word Limit: Truncate captions after this many words (0 = full caption).
9. Read More Link: Adds a “more” link after a truncated caption. The action can expand the caption inline or open the post on Instagram.
10. Load More Button: When enabled, a button appears below the grid that loads the next batch of posts from the cached set at no extra API cost.

Style Your Instagram Feed

Use the Style tab to customize every visual element of the feed.

1. Item:
   Controls border radius, padding, background, box shadow, and a Normal / Hover state transition for each post card. Set an accent color to tint hashtags and links across the whole feed.
2. Header:
   Style the profile image size, username typography and color, and the spacing between the header and the media block.
3. Media:
   Control the aspect ratio, border radius applied to the image/video block, and an optional overlay that appears on hover.
4. Caption:
   Typography, color, spacing below the text, and the “Read More” link color and hover color.
5. Load More Button:
   Typography, background (Normal / Hover), border, border radius, padding, and box shadow for the Load More button.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your Instagram Feed widget in action.

Best Practices

1. Always use the global API settings rather than pasting your token into each widget individually — it is easier to rotate tokens when they expire.
2. Keep the cache duration at 12 hours or longer in production. Shorter durations increase Instagram API call frequency and may hit rate limits on high-traffic pages.
3. Use 3 columns on desktop with a 20 px gap for the closest match to the native Instagram grid aesthetic.
4. Set a caption word limit (15–20 words) to keep cards uniform in height when masonry is off — this prevents awkward layout jumps between tall and short captions.

Troubleshooting

1. Feed shows nothing after saving: Check that the Access Token in Sky Addons → Settings → API → Instagram is valid and not expired. Instagram Login tokens expire after 60 days unless refreshed; Facebook Page tokens can be made long-lived through the Graph API.
2. Posts are stale / not updating: The cache is set to your chosen refresh interval. To force an immediate refresh, temporarily reduce the cache duration to 30 minutes, save the page, then restore it.
3. Videos show a placeholder image instead of playing: The browser’s autoplay policy requires user interaction on some devices. The widget uses muted inline playback (which is allowed), but certain iOS versions still require a tap. Ensure the “Autoplay Videos” option is on and the video has a thumbnail_url on the API side.

Frequently Asked Questions

Do I need a Facebook account to use this widget?

No. The Instagram Login connection type uses graph.instagram.com directly and only requires an Instagram Business or Creator account. You need a Facebook account only if you choose the Facebook Page connection type.

Can I show posts from multiple Instagram accounts on the same page?

Yes. Add multiple Instagram Feed widgets to the page and set each one to Custom API Source with a different account token and account ID. The cache is keyed per account, so each feed is stored independently.

How many posts can the widget show?

The widget fetches and caches up to 50 posts from the API. The Number of Posts control sets how many are visible initially; the Load More button pages through the cached set without any additional API calls. If you need more than 50, the cache must be refreshed on each request — contact Sky Addons support for guidance.

Does the widget display Reels?

Yes. Reels appear as video posts. If Autoplay Videos is on, they play muted and looped when scrolled into view. If the Reel has a thumbnail_url from the API it is used as the poster image.

Will the feed still show if Instagram’s API is temporarily unavailable?

Yes, as long as the server-side cache has not expired. The cached posts are served from your WordPress database even when Instagram is unreachable. Only after the cache expires and a live API call fails will the widget render nothing.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Instagram Feed widget:

• Instagram Feed Carousel: Display the same Instagram posts in a swipeable Swiper carousel with autoplay, navigation arrows, and pagination dots.
• Loop Grid: Build a post grid using custom Elementor Loop templates for full design control over each card.
• Offcanvas: Slide in a panel containing social feeds or contact details without cluttering the main layout.

Conclusion

The Instagram Feed widget makes it straightforward to show a live, cached Instagram gallery on any Elementor page — with full control over layout, captions, video playback, and visual styling. If you have any questions or need help, visit the Sky Addons support center.