Instagram Feed

Instagram Feed

The Instagram Feed widget pulls real photos and videos from a connected Instagram account and displays them on your page as a responsive grid or a horizontal slider. Each post is rendered as a clickable tile with an optional hover overlay showing the caption, post date, and an Instagram icon that links back to the original post. The widget also includes an optional “Follow on Instagram” button and a “Load More” button that reveals additional posts without a page reload. Because it talks to the real Instagram API, no images or captions are hardcoded — everything is fetched live (and then cached) from the account you connect.

Prerequisites

Before adding this widget you need a working Instagram account and a token issued through the Instagram Basic Display API. The widget code pulls posts from the graph.instagram.com/me/media endpoint using an access token, and the plugin’s own settings page explicitly describes it as a “long-lived Instagram Basic Display API access token.” Practically, this means:

• An Instagram account (Basic Display API tokens work with regular personal accounts, not only Business/Creator accounts).
• A Meta Developer app configured with the Instagram Basic Display product, from which you generate a long-lived access token.
• No app-secret, client-ID, or redirect-URI fields exist anywhere in the widget or its settings — you are not asked to register an app inside WordPress. You only ever paste in a finished token.

Setup: connecting your Instagram account

This widget does not use an in-dashboard “Connect with Instagram” OAuth button. There is no authorize URL, no popup login, and no redirect handling anywhere in the code. Instead, both the widget and the plugin’s global settings page expose a single plain text field labeled Access Token, and you are expected to obtain that token yourself from Meta and paste it in.

1. In the Meta Developer Dashboard, create (or use) an app and add the “Instagram Basic Display” product.
2. Authorize your Instagram account against that app and generate a long-lived access token. The plugin’s own settings screen states this token is “valid 60 days, renewable” — grab the long-lived version, not the short-lived one that expires in about an hour.
3. Copy the token string (it typically starts with characters like IGQVJx…, the placeholder shown in the widget’s own field).
4. Set the token in either of two places, both surfaced by the widget when empty:
   • Site-wide: Tiger Elements → API Settings → Instagram, “Access Token” field. Stored as an encrypted option (tiger_instagram_access_token) and shared by every Instagram Feed widget that doesn’t set its own token. Saving here auto-verifies the token against Instagram’s profile endpoint and stores the connected username.
   • Per-widget: the widget’s own “Account & API” section in Elementor has its own password-masked “Access Token” field, which overrides the global token for that instance only — useful for two widgets pulling from two accounts.
5. Optionally set an “Instagram Username” (widget field, or auto-saved globally after verification) used only to build the Follow button’s URL; left empty, the widget tries to auto-detect it from the token.

In short: a raw access-token paste-in field backed by the Instagram Basic Display API, not an OAuth “Connect” button inside WordPress.

Layout and display controls

The “Layout” section chooses between Grid and Slider. In Grid mode, a responsive Columns control (1–6, default 3/2/1 desktop/tablet/mobile) sets images per row. In Slider mode, Items Visible governs visible tiles, with Previous/Next navigation buttons (their own size, arrow size, radius, and Normal/Hover color controls). A shared Gap Between Items slider controls spacing, and Image Aspect Ratio offers Square (1:1), Portrait (4:5), Landscape (4:3), Wide (16:9), or a Custom responsive height.

“Account & API” also has Total Posts to Fetch (1–24, default 12) and Cache Duration (hours) (0–72, default 12), which sets how long fetched posts are cached as a transient before the API is hit again.

“Post Display” toggles Show Caption on Hover (with a Caption Words Limit), Show Media Type Badge (play icon for videos, grid icon for carousel albums), Show Post Date (Relative or site Date Format), and On Click, which disables linking or opens the original post on Instagram in a new/same tab. “Follow Button” adds an optional button with text, icon, position (above/below feed), alignment, and new-tab behavior. “Load More” reveals a limited number of posts first (Initially Visible Posts) and adds more per click (Posts to Add Per Click), with custom button and “all loaded” text. The Style tab covers the feed container, post item (radius, shadow, border, hover zoom/transition/lift), overlay color and icon, media badge, caption typography, and timestamp styling.

Practical tips / Troubleshooting

• Token expiration: long-lived tokens last 60 days and are renewable, but the plugin does not auto-refresh them — no refresh cron exists in the code. When a token expires, the feed fails and you must generate a fresh long-lived token from Meta and re-paste it into the Access Token field.
• Nothing showing on the page: with no token set anywhere, the widget shows an on-page notice to add one. With a set-but-failing token (expired, revoked, network error), it shows a red “Instagram Feed Error” notice with the raw API message — check that first.
• Empty feed with a valid token: if the API returns zero usable posts, the widget shows a plain “No Instagram posts found” message.
• Caching and stale content: posts are cached as transients keyed by token and post count for “Cache Duration” hours. New Instagram posts not appearing? Wait out the cache, lower the duration, or use “Clear Instagram Cache” on the API Settings page. Setting Cache Duration to 0 disables caching but increases live API calls — not recommended in production.