Instafeed.js: Failed to load resource: the server responded with a status of 403 ()

[hopk1ns87]

Getting this error on 2 separate websites:
www.goalminenyc.com
www.zoganic.com

Any idea why these arent displaying images, been driving me crazy

[saturday1]

Same problem for me.

[LucaThemes]

I can confirm that. Recreating a client doesn't help.

Neither does changing redirect url to non-https.

(problem doesn't seem to be global, most instances of Instafeed work fine on other sites of mine).

EDIT:
Entering image url displayed in browser console gives following error:
"Invalid URL signature"

[saturday1]

I read this thread: https://github.com/stevenschobert/instafeed.js/issues/549

It has something with scaling to do. Something has changed. But changing image size to 150px seems to work, but the images is really low res... So I hope for a better solution by someone smart soon.

I fixed the problem temporary by changing this code:

url: e.images.thumbnail.url.replace('150x150', '640x640'), width: 640, height: 640

into this:

url: e.images.thumbnail.url.replace('150x150', '150x150'), width: 150, height: 150

[LucaThemes]

@saturday1 Neither is for me, I've removed the part as it's irrelevant now :)

You are onto something, for now it looks like accounts with non-square images are affected. I'm testing few more things to be able to draw more conclusions.

EDIT:
Worst case scenario is to display Insta pictures as backgrounds, but let's just find another way :)

[saturday1]

@LucaThemes So then I removed my comment. :)

Great, let me know if you find something out. I have tried to google for what changes are done by Instagram, but I have not found anything.

[LucaThemes]

I have almost finished writing a fix, but then realized:

from now on it seems to be impossible to get square image out of original portrait. API call always results in either 's' or 'p' in front of image size, which stands for "square" and "portrait". Changing one with another will stop the image work (even though size and height are equal in image address, API call seems to pull native size anyway).

In other words:
s150x150 changed to s320x320 will not work if the image is portrait. It has to be p320x320 which is now pointless as image will be potrait indeed.

If someone wants to play with it:
Square & landscape images (thanks @saturday1)
s150x150/e35
s320x320/e35
s640x640/sh0.08/e35 or e35
(surprisingly I can confirm multiple types of address for full resolution, needs to be checked)

Portrait images
s150x150/e35/c0.135.1080.1080
e35/p320x320
sh0.08/e35/p640x640

Solution:
I'll try to write my own template that still shows images as square in a moment.

EDIT:
Template:

<div class="insta-thumb">
    <a href="{{link}}" style="background: #000000 url('{{image}}')"></a>
</div>

Style:

<style>
    .insta-thumb {
        width: calc( 100% / 8 );
    }
    .insta-thumb a {
        height: 0;
        padding-top: 100%;
    }
</style>

Make sure to change image resolution to "low_resolution" or "standard_resolution" in Instafeed settings, so your widget doesn't display blurry images.

[saturday1]

@LucaThemes Aha! Great works!

Tried it out a bit, but only getting "invalid URL signature".

But I am not sure I follow. Looking at this image, for example: https://www.instagram.com/p/BdwqMZ9hX6u/

Search path to image is:
https://scontent-arn2-1.cdninstagram.com/vp/4c79c7153de472dc715d53a284fd45bd/5AD823A3/t51.2885-15/s640x640/sh0.08/e35/26395913_168502003762126_3554495323348926464_n.jpg

It says s640x640, but it is not square.

It is not through the API, but the size definition may be the same?

[LucaThemes]

@saturday1

Oh well, I haven't had chance to test landscape images :) It looks like it's still "s", otherwise it should be yet another obstacle for us. And yes, it looks like even though image is not square, it's address will always display equal width/height, like in portrait and square images.. At least today, until there's yet another helpful update.

If you want to preview all images sizes, use this url in your browser:
https://api.instagram.com/v1/users/self/media/recent/?access_token=ACCESS-TOKEN

[saturday1]

@LucaThemes Ah, now I see all available sizes. :) But still no clue how to handle the problem though. Did you find any solution?

[LucaThemes]

@saturday1 Kinda, I've provided template code that uses Insta pictures as background of square container. There's no longer need to resize the pictures.

[saturday1]

@LucaThemes Ok. Yeah, I see, that is a solution ofc. Overflow: hidden etc. Thanks. Have a great weekend!

[LucaThemes]

@saturday1 There's even no need for overflow, background will fit inside container, make sure to use "background-size: cover" property to ".insta-thumb a {" class :)

Have a great one as well!

[saturday1]

@LucaThemes Ah, ofc, you are right. I'll have to blame it is late friyay afternoon. ;)

[dec23rd1986]

Hi all, I can't seem to figure out how to get the client ID for my client or token. Per all the examples I have seen they are using their own Instagram ID. Can someone tell me how to obtain this? Do I have to have the client request it and then send it to me?

I'm trying to put an Instagram feed carousel on the homepage of their website.

[LucaThemes]

Hi @dec23rd1986, client ID is the first number you're gonna see after creating a client on https://www.instagram.com/developer/.

You may need to open new thread, this one is related to completely different problem :)

[saturday1]

Just for sharing: I found out that background-position: center and background-size: 100% fitted me the best using this template:

<div class="insta-obj">
  <div class="img-container">
    <a href="{{link}}" class="img-link" data-type="{{model.type}}" style="background: url(\'{{image}}\') no-repeat;"></a>
  </div>
  <div class="meta-data">
    <span class="likes">{{likes}}</span>
    <span class="comments">{{comments}}</span>
    <p>{{caption}}</p>
  </div>
</div>

Result is visible here: https://arenagodemo.axiell.com/web/arena

[surjithctly]

I'm fetching low resolution instead of thumbnail and it works fine for me.

https://demo.web3canvas.com/themeforest/unisco/

[LucaThemes]

@surjithctly Welll, true, but you are already using a background technique while most of us were simply displaying raw images :)

[surjithctly]

@LucaThemes Yes. Several techniques posted on the #527 issue.

And my solution works fine for me: https://github.com/stevenschobert/instafeed.js/issues/527#issuecomment-326204764

[LucaThemes]

Just a hint - if you need to make your Insta images responsive, try to use my CSS solution :)
https://github.com/stevenschobert/instafeed.js/issues/550#issuecomment-357213232

[JamoDevNich]

The recent url signing enforced by Instagram might be related to your prob; the fixes discussed in this thread may help: https://github.com/stevenschobert/instafeed.js/issues/549

[stale[bot]]

This issue has been automatically marked as stale because it hasn't had new comments in the last 3 months. It will be closed if no further activity occurs. If you still need assistance with this issue, or believe it shouldn't be closed, please respond with a new comment to let us know.
Thank you all for your contributions.