How to add an Instagram feed to TYPO3
TYPO3 is an open-source content management system powering websites for brands like Phillips, Lufthansa, Villeroy & Boch, and many more. Some of the many benefits of TYPO3 are flexibility and modularity, allowing developers to build a custom CMS for websites, intranets, and other digital services.
It’s easy to embed an Instagram image to TYPO3’s homepage or any other page because of the complete customizability. But instead of embedding each Instagram image and video manually, most marketers and website developers are looking for a widget to display a live-updating social media feed.
That’s where a social media aggregator comes into play. With Flockler, you can gather content by any Instagram Business account or create user-generated content campaigns. If you like, you can combine content from multiple social media channels and show all the content in one place (see the list of supported social media sources). You don’t need any coding skills, and embedding your feed on TYPO3 only takes a couple of minutes.
Here’s a three-step guide on how to add an Instagram feed to TYPO3:
- Set up a live-updating Instagram feed.
- Pick a display layout: Wall, Grid, or Carousel.
- Embed an Instagram feed on a TYPO3 page.
1. Set up a live-updating Instagram feed
The first step is to sign in to your Flockler account and set up an automatically updating Instagram feed. Flockler’s easy-to-use tools help you collect content by a particular business or posts by any user mentioning a specific hashtag.
Here’s a short video on how to gather content by any business:
2. Pick a display layout: Wall, Grid, or Carousel
After you’ve collected some content, the second step is to pick a display layout for your Instagram feed. Flockler has got three options out-of-the-box, and it’s relatively easy to customize them further or create a bespoke version.
Click ‘Display’ in Flockler’s navigation and select Wall, Grid, or Carousel.
After selecting your layout, an embed code shows up. You can add the embed code to any TYPO3 page (see detailed instructions below) and other digital services of your organisation.
Here are examples of each layout:
Wall
The Social Wall layout shows caption texts of each post – It’s the preferred choice if you’re looking to display content from various social media channels in one place.
Grid
The Grid layout creates a look & feel similar to the Instagram profile page and has become the most popular Flockler layout.
Carousel
The Carousel layout saves space on your homepage and other landing pages where the social media feed competes for attention with other elements and call-to-actions.
3. Embed an Instagram feed on a TYPO3 page
The final step is to copy and paste the embed code from Flockler’s 'Display' tab to the TYPO3 content editor.
Open the editor of a page (e.g., homepage) or blog post and click '+Content' button.
From the options, select 'Special elements' tab and a 'Plain HTML' element.
Then add Flockler’s embed code to the editor and click ‘Save’.
Voilà – in less than five minutes, you’ve set up a beautiful, automatically updating Instagram feed to display on your TYPO3 website! You can add Flockler to any page on your website and use all three layouts without any additional costs.