Overview

The At-Instagram extension is a flexible and editor-friendly TYPO3 extension that allows you to display Instagram profile posts directly on your website. It provides a dedicated content element that makes it easy to showcase Instagram posts as a grid or slider without using external embed scripts.

With At-Instagram, editors can control how Instagram posts are displayed, how users interact with them, and where they appear on the website — all from the TYPO3 backend.

This extension is ideal for portfolios, company websites, blogs, and social-media-driven landing pages.

At-Instagram is compatible with TYPO3 v12 and v13.

Key Points

• No manual embed code required – Instagram posts are rendered using a TYPO3 content element
• Fully configurable backend layout for editors
• Supports grid and slider layouts
• Responsive and mobile-friendly output
• Can be placed on any page and any column

Features

• Display Instagram profile posts on your website
• Dedicated Instagram Posts Slider content element
• Control number of posts displayed
• Configure posts per row
• Choose post interaction behavior:
  • Open on Instagram
  • Open in lightbox
  • Display in slider
• Add custom container CSS classes
• Editor-friendly backend UI
• TYPO3 caching supported for performance

At-Instagram (Normal / Free Version)	At-Instagram (Pro Version)
Users can select the total number of Instagram posts to display.	Users can manually choose which Instagram posts to display.
Posts are fetched automatically in chronological order from Instagram.	Full control over post selection, ordering, and visibility.
Best for simple sliders or grids without manual control.	Ideal for highlighting specific campaigns, products, or featured posts.

Backend Configuration

Once the extension is installed and activated, editors can add the Instagram Posts Slider content element to any page.

Available Backend Fields

• Internal Title (not displayed)
  Backend-only reference name for editors.
• Container CSS Class
  Add layout classes such as:
  • container
  • container-fluid
  • page-container
    Leave empty to use default styling.
• Post Interaction Type
  Define how posts behave when clicked:
  • Open on Instagram
  • Open in Lightbox
  • Slider View
• Number of Posts to Display
  Total Instagram posts to fetch and display.
• Posts per Row
  Controls how many posts appear in a single row and how many items are visible in slider mode.

⚠️ Note: When using slider mode, the total number of posts should be greater than the number of posts per row to ensure smooth sliding.

Frontend Output

Based on the backend configuration, At-Instagram renders:

• Responsive Instagram post grid or slider
• Optimized images
• Clean HTML markup
• Click behavior based on selected interaction type

The output automatically adapts to desktop, tablet, and mobile screens.

How to Install At-Instagram

Installation via Composer

composer require aashro/at-instagram

Installation via Non-Composer

1. Log in to the TYPO3 Backend.
2. Go to the Extension Manager module.
3. From the top drop-down menu, select Get Extensions.
4. Search for at_instagram and install the extension.
5. Alternatively, you can download the extension from the TYPO3 Extension Repository (TER) and upload it manually: https://extensions.typo3.org/extension/at_instagram

Activate Extension

1. Log in to TYPO3 backend
2. Go to Admin Tools → Extensions
3. Activate At Instagram

Include At Instagram TypoScript

1. Go to Web → TypoScript
2. Edit the TypoScript record on your root page (or root page)
3. Under Include TypoScript sets:
   • Move At Instagram (at_instagram) from Available Items to Selected Items
4. Click Save
5. Flush TYPO3 & PHP caches

Analyze Database & Flush Caches

1. Go to Admin Tools → Maintenance
2. Select Analyze Database
3. Apply all suggested database updates
4. Click Flush TYPO3 and PHP Cache

How to Generate Instagram Access Token

https://www.youtube.com/watch?v=0RBVHzbJTtY

Access Token Generation Error – Insufficient Developer Role

If you encounter an error while generating an access token due to an Insufficient Developer Role, follow the steps below to resolve it.

Solution: Add Your Instagram Account as a Developer/Tester

1. Go to the Meta (Facebook) Developer Dashboard.
2. Open your app and navigate to Roles → Instagram Users or App Roles.
3. Add your Instagram account as a Developer or Instagram Tester.
4. Visit
   https://www.instagram.com/accounts/manage_access/
5. Accept the invitation under the Tester Invites tab.
6. Retry the access token generation or integration process.

After completing these steps, the error should be resolved and token generation should work correctly.

Configure Token in TYPO3 (At-Instagram Extension)

1. Log in to TYPO3 Backend
2. Go to
   Site Management → TypoScript → Constant Editor

3. Select category:

   plugin.tx_atinstagram

4. Paste your Instagram Access Token into:

   Add Instagram Access Token

   plugin.tx_atinstagram_instagramfeeds.settings.graphapi

5. (Optional) Enable jQuery if your site does not load it:

   Include jQuery = 1 

6. Click Save

Configure Instagram Token (PRO)

1. Log in to TYPO3 Backend
2. Go to
   Admin Tools → Settings → Extension Configuration

3. Select category:

   at_instagram

4. Paste your Instagram Access Token into:

   Add Instagram Access Token

   Instagram Graph API Token

5. Click Save

How to Use At-Instagram

1. Open a page in TYPO3 backend
2. Add a new content element
3. Select Instagram Posts Slider
4. Configure layout and interaction options
5. Save and preview the page

No technical knowledge is required.

Use Cases

• Company Instagram feed on homepage
• Portfolio showcase
• Social proof section
• Marketing and campaign pages
• Blog and news pages

Compatibility

• TYPO3 v12 LTS
• TYPO3 v13 LTS
• PHP 8.1+