Instafeed and Tumblr weirdness

Question

I've run in to an interesting issue where I'm using a Tumblr static page and instafeedjs. When I'm editing the page Instafeed works fine. However, when I view the page outside of the editor the images don't load and the link won't take me to the instagram site. Here's code, but like I said, everything works fine in the editor.

<script type="text/javascript">
            var feed = new Instafeed({
                get: 'user',
                userId: USER_ID,
                accessToken: 'aTOKEN',
                clientId: 'cID',
                limit:4,
                template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>'
            });
            feed.run();
            </script>

Answer 1

Ok, I just got back to it, and as lharby suggested, it is in fact the use of the "template:" that causes the problem. Lots of thanks, now I just have to figure out a work around.

Thanks again,

...still think it's weird that it works in the editor... :^/

Answer 2

Change your template line to have spaces inside all the curly braces:

template: '<a href="{{ link }}" target="_blank"><img src="{{ image }}" /><div class="likes">&hearts; {{ likes }}</div></a>'

---

Because Tumblr uses single curly braces for its themes (ex: {SubmitLabel}), it sees your template line an treats {{link}} as a theme variable.

You can trick Tumblr into ignoring those tags by adding spaces inside the curly braces.

For reference, see:

• https://github.com/stevenschobert/instafeed.js/issues/41
• Custom Tumblr them with Handlebars