Instagram feed module
This article explains how to use the "Instagram Feed" module in ChurchDesk to display images from your Instagram account directly on your website. Every time you add a new image to Instagram, it will automatically appear in the Instagram Feed module as well. We will guide you through the connection steps, design options, and settings.
There are several ways to display Instagram on your website:
Connecting to Instagram via the "Instagram Feed" module
Connecting to Instagram via the "HTML module"
Embedding a single Instagram post
Add an Instagram Feed module by selecting "*Instagram Feed*" in the Social Media category.
Click "*CONNECT INSTAGRAM"* on the module, log in to your Instagram account, and authorize the module to retrieve images from your Instagram account and display them on your website.
Once the module is synchronized with your Instagram account, it will automatically display any new images you add to Instagram.
The Instagram Feed displays up to a maximum of 100 images from your Instagram account. If you have more than 100 images, the most recently added images will be displayed.
Important: Only images from Instagram are displayed in the Instagram Feed module. Videos are not displayed, not even as a preview image. For posts with multiple images, only the first image of the post is displayed in the Instagram Feed module. When visitors click on the image, they are redirected to Instagram and can browse the other images of the same post.
In the Design category, you can change the background, border, and spacing in your Instagram Feed module. You can also add an animation to the module to give it a more dynamic appearance.
In the "Settings" category, you can change a number of display options:
Aspect Ratio: By default, the module displays images in the same square format as they appear on Instagram. However, you have the option to display the images in a different aspect ratio that better fits the overall layout of your website.
Number of Images to Show: Choose how many images you want to display in the module, up to a maximum of 100.
Number of Columns: Choose how many columns you want to divide your Instagram Feed into.
Margin between Images: Add spacing between the images in the feed.
Show Images in Lightbox on Click: If visitors click on an image in the feed and this option is not enabled, they will be redirected to the URL of that image on Instagram. If the option is enabled, the image will be displayed above the content of your page, with the content in the background darkened. The text of the image caption from Instagram will also be displayed in the lower left corner of the lightbox (see example below).
If you no longer want the Instagram Feed module to display images from your Instagram account, you can easily disconnect the connection. Open the Instagram Feed module and click DISCONNECT. Once the module is disconnected, no user data or images from your Instagram account will be stored in the editor.
Note: As described earlier, the Instagram module can only display images and omits videos. By using the HTML module, the associated cover images are displayed for the videos present in the feed.
Insert an HTML module into an empty column:
In the content field, enter the following code and replace the uppercase parts with your URL and Instagram name:
<iframe width="100%" height="500" src="[https://www.instagram.com/YOURINSTAGRAMURL/embed/"name="YOURNAME"frameborder="0"></iframe>
Depending on your own page layout, you also have the option to adjust the displayed height after "height".
Add the Instagram Embed module from the Social Media category.
Paste the URL of the post you want to embed:
There are several ways to display Instagram on your website:
Connecting to Instagram via the "Instagram Feed" module
Connecting to Instagram via the "HTML module"
Embedding a single Instagram post
Connecting to Instagram via the "Instagram Feed" module
Adding the Instagram module
Add an Instagram Feed module by selecting "*Instagram Feed*" in the Social Media category.
Connect Instagram
Click "*CONNECT INSTAGRAM"* on the module, log in to your Instagram account, and authorize the module to retrieve images from your Instagram account and display them on your website.
Once the module is synchronized with your Instagram account, it will automatically display any new images you add to Instagram.
The Instagram Feed displays up to a maximum of 100 images from your Instagram account. If you have more than 100 images, the most recently added images will be displayed.
Important: Only images from Instagram are displayed in the Instagram Feed module. Videos are not displayed, not even as a preview image. For posts with multiple images, only the first image of the post is displayed in the Instagram Feed module. When visitors click on the image, they are redirected to Instagram and can browse the other images of the same post.
Design
In the Design category, you can change the background, border, and spacing in your Instagram Feed module. You can also add an animation to the module to give it a more dynamic appearance.
Settings
In the "Settings" category, you can change a number of display options:
Aspect Ratio: By default, the module displays images in the same square format as they appear on Instagram. However, you have the option to display the images in a different aspect ratio that better fits the overall layout of your website.
Number of Images to Show: Choose how many images you want to display in the module, up to a maximum of 100.
Number of Columns: Choose how many columns you want to divide your Instagram Feed into.
Margin between Images: Add spacing between the images in the feed.
Show Images in Lightbox on Click: If visitors click on an image in the feed and this option is not enabled, they will be redirected to the URL of that image on Instagram. If the option is enabled, the image will be displayed above the content of your page, with the content in the background darkened. The text of the image caption from Instagram will also be displayed in the lower left corner of the lightbox (see example below).
Disconnect from Instagram
If you no longer want the Instagram Feed module to display images from your Instagram account, you can easily disconnect the connection. Open the Instagram Feed module and click DISCONNECT. Once the module is disconnected, no user data or images from your Instagram account will be stored in the editor.
Connecting to Instagram via the "HTML module"
Note: As described earlier, the Instagram module can only display images and omits videos. By using the HTML module, the associated cover images are displayed for the videos present in the feed.
Insert an HTML module into an empty column:
In the content field, enter the following code and replace the uppercase parts with your URL and Instagram name:
<iframe width="100%" height="500" src="[https://www.instagram.com/YOURINSTAGRAMURL/embed/"name="YOURNAME"frameborder="0"></iframe>
Depending on your own page layout, you also have the option to adjust the displayed height after "height".
Embedding a single post from Instagram
Add the Instagram Embed module from the Social Media category.
Paste the URL of the post you want to embed:
Updated on: 05/05/2025
Thank you!