Using Instagram Content in Emails

read
Last updated at:

Overview

With a custom web feed, you can connect your Instagram content to your emails and dynamically display your latest Instagram photos, captions, and more.

In this article, you will 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. 

Set Up an Instagram Web Feed

To set up an Instagram web feed without the help of a developer or Klaviyo Partner, use this RSS Feed Generator. Create an account, then navigate to My Feeds. In the upper right, click New Feed. In the Enter Webpage URL field, add your Instagram URL, following the format https://www.instagram.com/YOUR_USERNAME. Then, click Generate. Your feed should appear. Once it does, click Save to My Feeds

Note that this RSS feed generator app requires a paid plan in order to host an Instagram RSS feed. You can use any RSS feed generator, but if you use a different app, you may need to customize the sample code in the section below. 

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

Copy_Feed_URL.png

As an alternative to this method, you can set up an Instagram web feed using their Basic Display API, or by using a third-party app. Certain Klaviyo Partners offer this as a service, including Yotpo and FourSixty

Set up Your Feed in Klaviyo 

Once you’ve set up your RSS feed, log in to Klaviyo and navigate to the Data Feeds tab. Click Add Web Feed

Add_Web_Feed.png

Name your feed, and enter the RSS feed URL you just generated as the Feed URL. Set the Request Method to GET and the Content Type to XML, then click Add Data Feed

Data_feed_settings.png

Pull Instagram Content into Your Emails

If you are using a third-party platform or Instagram’s Basic Display API to generate your feed, follow our guide on adding a custom web feed to an email. If you’ve used the RSS Feed app recommended above, use the code below to display the three most recent items from your Instagram feed in an email. 

In the footer of the email editor, click the Data Feeds link and select your Instagram feed. 

Add_feed_to_campaign.gif

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. 

{% 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 %}

Your Instagram feed will not load when previewing the message in Klaviyo. Send a preview email to your own inbox to make sure it appears correctly.

If you’d like to show more than three 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. 

Klaviyo’s Support team is not able to offer direct troubleshooting for custom HTML. If you need developer assistance to set this up, reach out to one of Klaviyo’s Partners

Additional Resources 

x
Was this article helpful?
66 out of 168 found this helpful