Instagram feed not showing up

Hello

I followed the example form http://www.campaignmonitor.com/blog/post/4023/instagram-photos-in-email-campaigns

FYI: line 3 - <rssitemlink><rsstitle></rsstitle></rssitemlink>> 
there's an extra ">" at the end of the line
--------------
It seems pretty straight forward, but for some reason the images are not showing up.
Within the CM interface, in the left "edit" sidebar I can see the images listed out, but the selected images do not present on the right. I've added my code below


<datarepeater type="rss" src="http://statigr.am/feed/meddletonequine">
   <layout label="Instagram Photos" />
        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
            <tbody>
                <tr>
                    <td class="w580" width="580" valign="top" align="center">  
                        
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0" align="center">
                            <tbody>
                                <tr>
                                    <td class="w580" width="580"><span align="left" class="article-title"><rssitemlink><rsstitle></rsstitle></rssitemlink></span> </td>
                                </tr>
                                <tr><td class="w580" width="580" height="5"></td></tr>                                    
                                <tr>
                                    <td class="w580" width="580">                                        
                                    <div class="article-content">Posted by <rssauthor></rssauthor> on <rssitemday></rssitemday> <rssitemmonthname></rssitemmonthname>, <rssitemyear></rssitemyear></div>
                                    </td>
                                </tr>
                                <tr><td class="w580" width="580" height="5"></td></tr>                                    
                                <tr>
                                    <td class="w580" width="580">                                        
                                        <div><rssimage width="300" height="300"></rssimage></div>                                            
                                    </td>
                                </tr>
                                <tr><td class="w580" width="580" height="5"></td></tr>                                    
                                <tr>
                                    <td class="w580" width="580">  
                                        <div class="article-content"><rssbody paragraphs="all"></rssbody></div>
                                    </td>
                                </tr>
                               
                            </tbody>
                        </table>                       
                    
                    </td>
                </tr>
            </tbody>
        </table> 
   </layout>
</datarepeater>

Thanks for the assits!
Jules

roshodgekiss roshodgekiss, 2 years ago

Hi Jules, thank you so much for posting here, it looks like a few folks have been having mixed results with this technique as of late. It seems that either Instagram, or Statigram may be either limiting the frequency with which images are served, but we can't be entirely sure yet. I've emailed my contact at Statigram for a little more insight and will let you know if I hear anything from them.

In the interim, there's an alternate service - Webstagram - which offers a similar RSS feed. The URL is as follows:

http://widget.stagram.com/rss/n/USERNAME

If you give that a go, let us know how it works out for you - it would be good for us to narrow down if something is up on Statigram's side, or with Instagram's API here.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
JulesWebb JulesWebb, 2 years ago

HI roshodgekiss

Thanks for the assist!
I tried the service you suggested and I'm getting the same result.

To try and remove any possibles of human error on my part I added the RSS feed code to one of your  custom "simple announcement" templates from http://www.campaignmonitor.com/templates/

Below is a screen shot of what I'm seeing in your edit interface
http://webbdemo.com/images/campaign-interface_instagram-feed.png

Any ideas on what may be preventing the images from showing up? Since they are listed in the left sidebar the feed is obviously connecting....

Fee URL: http://widget.stagram.com/rss/n/meddletonequine

Thanks for any insights!
Jules

JulesWebb JulesWebb, 2 years ago

In case I didn't communicate this well enough:

On http://www.campaignmonitor.com/blog/post/4023/instagram-photos-in-email-campaigns

There is a typo on line 3 of your second code example

-------

FYI: line 3 - <rssitemlink><rsstitle></rsstitle></rssitemlink>> 
there's an extra ">" at the end of the line

Cheers!
Jules

JulesWebb JulesWebb, 2 years ago

HI roshodgekiss

Do you have any feedback on this?

roshodgekiss roshodgekiss, 2 years ago

Hi Jules, thanks for following this up. I just received the following response from Statigram earlier:

Hi Ros,

I’ve checked with our tech team: the content comes straight from Amazon, so this is unfortunately not something we can fix. We do not have more info about the reasons why it’s erratic either, I’m sorry.

Best,

Celine

... so, hard to say exactly what's happening here, but we'll continue to investigate. In the interim, we'll get that doc updated, thanks for that :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
JulesWebb JulesWebb, 2 years ago

Thanks for the response roshodgekiss.

So Is this working for other people?

Will you post here when you resolve the issue, or is there some bug fix ticket that I can subscribe to?

Thanks!
Jules

Peter111, 2 years ago

Any ideas on what may be preventing the images from showing up? Since they are listed in the left sidebar the feed is obviously connecting....

roshodgekiss roshodgekiss, 1 year ago

Hi folks, sorry for taking so long to respond here. Well, as it turns out, things have certainly changed since I wrote the article! Websta (previously Webstagram) no longer provides a feed with images within the RSS enclosures that we support.

As a result, our RSS image tag, <rssimage /> does not work with Websta feeds.

Instead, I recommend using an alternate service, instagrss: http://instagrss-mgng.rhcloud.com

instagrss is the only service I’ve come across allows you to link back to content hosted on Instagram, not some 3rd-party site. It also has relatively clean output (more on that in a moment). However, it only outputs a 150px x 150px image. For larger images, I recommend using these feeds:

Websta: https://widget.websta.me/rss/n/yarrcat
Iconosquare (previously Statigram): http://iconosquare.com/feed/yourinstagramname

So, none of these feeds have output supported by <rssimage />, however with a bit of code tweaking - in essence, selectively displaying the output of the <rssbody /> tag - you can use our RSS tags to display a row of images, descriptions and links back to the image on Instagram.

With instagrss, <rssbody /> outputs similar to the following:

<div>
   <img src="http://...link to Instagram photo.../yourphoto.jpg">
</div>
<div>
   <a href="http://..." target="_blank">image size:thumbnail</a>
</div>
<div>
   <a href="http://..." target="_blank">image size:low</a>
</div>
<div>
   <a href="http://..." target="_blank">image size:standard</a>
</div>

As you can see, there's 4 sets of div tags - only the first of which is useful to us, as it provides an <img> tag for a 150px x 150px Instagram thumbnail.

Next up, we want a link with a description - and luckily, instagrss outputs the following for <rssitemlink />:

<a href="http://...link to Instagram photo page..." title="Your Instagram photo description" target="_blank">Your Instagram photo description</a>

Now we've got the data, let's make it pretty.

Building a table layout for Instagram photos

For the same of keeping things simple, we'll create a table, put these two pieces together in a table cell, then add more cells as you add photos to an email layout.
While we're at it, we have to display only the first set of div tags produced by <rssbody />… And hide the rest. Here's the CSS and HTML we'll use to do this:

CSS:

td.rssimages div a {
   font-size: 0; max-height: 0; overflow: hidden; display: none; mso-hide: all;
   /* hide everything except the first div - even in Gmail!*/
}
td.rssimages div img {
   width: 100%; height: auto; /*stretch image to the cell width */
}

HTML:

<table width="600" cellpadding="5" cellspacing="0" style="table-layout: fixed;">
   <tr>
   <datarepeater type="rss" src="http://instagrss-mgng.rhcloud.com/your instagram account">
      <td class="rssimages" valign="top">
      <rssbody />
      <rssitemlink />
   </td>
   </datarepeater>
   </tr>
</table>

One thing that's worth noting is that the cells and images have fluid widths, therefore automatically stretch to fill the available area. As you add images, you'll notice that the images and captions will resize as more are added to a row. Here's what this looks like in the email editor.

And with that, you can now add a row of Instagram images and captions to your email campaigns. Here's the design & spam test on a demo template.

If you're feeling particularly expert level, you can use media queries to make this layout responsive with ease. I recommend reading our recent article, How to set the order of stacked columns in a responsive email design for practical advice on how to do this.

Thank you again for the prompts and sorry for not looking at this earlier. Let me know how you go with this technique - I'm certainly keen to hear your experiences!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098