How to use Instagram content in emails (classic editor)

You will learn

Learn how to set up a custom web feed with your Instagram account using an RSS feed generator, and how to display the feed in your emails. With a custom web feed, you can connect your Instagram content to your emails and dynamically display your latest Instagram photos, captions, and more. 

Set up an Instagram web feed

To set up an Instagram web feed without the help of a developer or Klaviyo Partner: 

1. Create an account with an RSS feed generator tool
2. Navigate to My Feeds
3. In the upper right, click New Feed
4. In the Enter Webpage URL field, add your Instagram URL, following the format https://www.instagram.com/YOUR_USERNAME
5. Click Generate
6. Click Save to My Feeds

Once the feed is saved, navigate to the feed page and locate the feed URL. It should follow this format: https://rss.app/feeds/UNIQUE_FEED_ID.xml. 

Set up your feed in Klaviyo 

Once you’ve set up your RSS feed:

1. Navigate to the Data Feeds tab
2. Click Add Web Feed
3. Name your feed 
4. Enter the RSS feed URL you just generated as the Feed URL
5. Set the Request Method to GET and the Content Type to XML
6. Click Add Data Feed
   

Pull Instagram content into your emails

If you are using the classic template editor, in the footer of the email editor click the Data Feeds link and select your Instagram feed. If you're using the new template editor, skip ahead to the next step. 

Add a new text block to your template, and click Source in the block editor. Copy the following code into the Source of the block, and make sure to replace FEED_NAME with your feed name. 

<div>{% for item in feeds.FEED_NAME.rss.channel.item|slice:":3" %}
<table style="display:inline-block; margin-left:auto; margin-right:auto">
	<tbody>
		<tr>
			<td style="padding-right:15px;padding-left:18px; width:150px"><a href="{{ item.link }}">
			<img src="{% if item|lookup:'media:content'|lookup:'0'|lookup:'@url' %}{{ item|lookup:'media:content'|lookup:'0'|lookup:'@url' }}{% else %}{{ item|lookup:'media:content'|lookup:'@url' }}{% endif %}" style="margin: 1px; max-width: 150px; height: auto;" /></a>
			</td>
		</tr>
	</tbody>
</table>
{% endfor %}</div>

If you’d like to show more than 3 recent posts, adjust the filter |slice:":3" to include the number of posts you’d like to display (e.g. |slice:":6" to show six posts). 

If you’d like to add additional fields to your table (e.g., captions or the date an image was posted), follow our guides on adding custom web feeds to emails to adjust the code above as needed. 

Additional resources 

• Guide to adding a custom web feed in an email
• Troubleshooting your Instagram web feed in emails
• How to create a base template