InstagramFeed icon indicating copy to clipboard operation
InstagramFeed copied to clipboard

images are not showing on all feed

Open Anmartawfik opened this issue 3 years ago • 26 comments

Looks like images are not showing in any feed , seems like same CORS issue

Many thanks A

Anmartawfik avatar Apr 27 '21 03:04 Anmartawfik

Same issue. Waiting for fixing...

nguyenhc-bitvn avatar Apr 27 '21 04:04 nguyenhc-bitvn

Same issue. Even examples on plugin's site don't show images but only texts. https://www.sowecms.com/demos/InstagramFeed/#examples https://prnt.sc/124z128

SpbSprut avatar Apr 27 '21 09:04 SpbSprut

@jsanahuja, any suggestions about this issue? Attempts to access images via direct links return 403 with "URL signature expired" message:

403: image

The message: image

Also as far as I concerned, the issue with CORS and image access can be reproduced while your computer connects to some internet-endpoints (e.g. Wi-Fi).

ghost avatar Apr 27 '21 12:04 ghost

Yep.. Look like this image The problem is also shown in the examples

A1exMoody avatar Apr 27 '21 23:04 A1exMoody

ugh I thought the problem was due to my apache cache thing; good to know I am not alone

xchopin avatar Apr 28 '21 08:04 xchopin

I hope @jsanahuja will come soon :/ I'm using it on so many websites..

Nicolas-Cargo avatar Apr 28 '21 13:04 Nicolas-Cargo

Me too... I have to pass the order, but it all comes down to Instagram. I don't want used Insta API...

A1exMoody avatar Apr 28 '21 16:04 A1exMoody

Adding myself on here, to follow for (hopefully) a solution soon...

CobeSean avatar Apr 28 '21 17:04 CobeSean

@jsanahuja, help us)

NosovN avatar Apr 28 '21 18:04 NosovN

@jsanahuja Adding myself here.

Eugene1984 avatar Apr 28 '21 18:04 Eugene1984

@jsanahuja Adding myself here.

igoluciano avatar Apr 29 '21 13:04 igoluciano

same problem on all website where i use it. @jsanahuja if you fix it give me your paypal, you need a donation for this.

NoOneDesign avatar Apr 29 '21 14:04 NoOneDesign

@jsanahuja is the repo alive?

nrayann avatar Apr 29 '21 17:04 nrayann

If you have Cloudflare account you can fix this issue using Cloudflare workers by following these steps https://gist.github.com/restyler/6c51e3ad20d7596e799d76e87cf93236

I've tried and it works.

evaleries avatar Apr 30 '21 12:04 evaleries

Was someone able to fix this issue..?

vgavrilovikj avatar Apr 30 '21 17:04 vgavrilovikj

As mentioned here we can use rapidapi as proxy. But there're limitations: 100 requests/month with free plan. There're a bunch of API's, but they have even harder limit: 20 requests/month or 20 requests/day.

ghost avatar Apr 30 '21 19:04 ghost

Hello, not wanting to be negative, but I believe that it will be very unlikely to find a solution since instagram is very strict in unauthenticated access.

As I have several sites that depend on a smilar script, I searched and improved two scripts that use the new official method via the graph.instagram API.

The first uses javascript and the second PHP cURL, I am still testing it but the results have been great.

ribeiroeder avatar May 01 '21 02:05 ribeiroeder

jQuery Ajax for feed Instagram Graph API https://github.com/ribeiroeder/jquery-feed-instagram-graph

PHP cURL for feed Instagram Graph API https://github.com/ribeiroeder/php-curl-instagram-graph

@jsanahuja Sorry for posting another third party solution here, your script is incredible, much more complex and well developed than the scripts above and it helped me for a long time. But either way I need to be generating alternatives because customers keep asking about a solution :(

ribeiroeder avatar May 01 '21 02:05 ribeiroeder

If you have Cloudflare account you can fix this issue using Cloudflare workers by following these steps https://gist.github.com/restyler/6c51e3ad20d7596e799d76e87cf93236

I've tried and it works.

This is a good solution to the problem, but what if I have a hosting that is already optimized for everything you need, and I don't need to use Cloudflare?

A1exMoody avatar May 01 '21 11:05 A1exMoody

If you have Cloudflare account you can fix this issue using Cloudflare workers by following these steps https://gist.github.com/restyler/6c51e3ad20d7596e799d76e87cf93236 I've tried and it works.

This is a good solution to the problem, but what if I have a hosting that is already optimized for everything you need, and I don't need to use Cloudflare?

Good question. You can create Cloudflare workers for free (100k requests/daily) and then you need modify a little bit of the library (See #62). Let's say you have created Cloudflare workers, you can use my modified version of this library. Then, you need customize the instance of InstagramFeed a little bit, e.g

new InstagramFeed({
    'username': 'travisci',
    'container': document.getElementById("instagram-feed5"),
    'display_profile': true,
    'cdnUrlResolver': function(url) {
        return 'https://your-cloudflare.workers.dev/' + url;
    }
});

Check my live demo: Main Site - Check Latest Instagram section https://pemro.id/plugins/insta-feed/insta-feed.js https://pemro.id/plugins/insta-feed/InstagramFeed.min.js - This uses my modified version of this library

evaleries avatar May 01 '21 12:05 evaleries

Если у вас есть учетная запись Cloudflare, вы можете решить эту проблему с помощью работников Cloudflare, выполнив следующие действия: https://gist.github.com/restyler/6c51e3ad20d7596e799d76e87cf93236 Я пробовал, и он работает.

Это хорошее решение проблемы, но что, если у меня есть хостинг, который уже оптимизирован для всего, что вам нужно, и мне не нужно использовать Cloudflare?

Хороший вопрос. Вы можете создать воркеров Cloudflare бесплатно (100 тыс. Запросов в день), а затем вам нужно будет немного изменить библиотеку (см. № 62 ). Допустим, вы создали воркеров Cloudflare, вы можете использовать мою модифицированную версию этой библиотеки . Затем вам нужно немного настроить экземпляр InstagramFeed, например

новый  InstagramFeed ( { 
    'username' : 'travisci' , 
    'container' : document . getElementById ( "instagram-feed5" ) , 
    'display_profile' : true , 
    'cdnUrlResolver' : function ( url )  { 
        return  'https: // your- cloudflare.workers.dev/ '  +  url ; 
    } 
} ) ;

Проверьте мою живую демонстрацию: Основной сайт - проверьте последний раздел **Instagram ** https://pemro.id/plugins/insta-feed/insta-feed.js https://pemro.id/plugins/insta-feed/InstagramFeed.min.js - Здесь используется моя модифицированная версия этой библиотеки

Yes, but if I understand correctly, will I still need to migrate my domain's dns to cloudflare?

A1exMoody avatar May 01 '21 13:05 A1exMoody

Yes, but if I understand correctly, will I still need to migrate my domain's dns to cloudflare?

No, You don't need to do that. Migrate your domain to Cloudflare is optional. But, If you need your cdn to be customized to your domain, then you need migrate your domain to Cloudflare (e.g: cdn.your-domain.com) as pointed No 1 on tutorial.

evaleries avatar May 01 '21 13:05 evaleries

Yes, but if I understand correctly, will I still need to migrate my domain's dns to cloudflare?

No, You don't need to do that. Migrate your domain to Cloudflare is optional. But, If you need your cdn to be customized to your domain, then you need migrate your domain to Cloudflare (e.g: cdn.your-domain.com) as pointed No 1 on tutorial.

awesome! Thx for ur solution )

A1exMoody avatar May 01 '21 13:05 A1exMoody

@evaleries great solution! Could you share the configuration inserted in your cloudflare worker?

I tested it here just by creating one, and the default settings return me the 404 error.

ribeiroeder avatar May 02 '21 01:05 ribeiroeder

@evaleries great solution! Could you share the configuration inserted in your cloudflare worker?

I tested it here just by creating one, and the default settings return me the 404 error.

@ribeiroeder First of all, I don't know your default settings. As far as I know if you copy the whole script on tutorial, you can't directly access the workers (It will says 404 Bad url). The workers require Instagram's post url. So the final example would be: https://your.workers.dev/Instagram_post_url e.g Check this link structure

evaleries avatar May 02 '21 01:05 evaleries

Yes, the script is assembling the url correctly, see here

Similar to your worker, but it seems to be missing some configuration within the cloudflare worker to not return the 404

ribeiroeder avatar May 02 '21 01:05 ribeiroeder