Instagram images not displaying. Seeing error 'net::ERR_BLOCKED_BY_RESPONSE'

[scottjh-daylight]

We're seeing an issue where images are not displaying. In the console there is the following error

net::ERR_BLOCKED_BY_RESPONSE

Unclear if this is related specifically to Instagram's CDN or if there is some way to adjust on our end.

Example here: https://dev.meadowoutdoor.com/creative-services#block-instagram-5

[andrew-ireland]

I'm having the same issue on two site's that were working previously on production, and locally.

[austenc]

Darn, sorry folks. I'm seeing this too. Will look into it soon. For more stability I'd recommend using Instagram's actual API... unfortunately this package relies on web scraping and Instagram isn't too keen on that :(

[daylightstudio]

We wound up extending the class and adding an image_64 option so it didn't need to serve it up from their server if it helps:

class InstagramFeedExtended extends Tags
{
    public function index()
    {
        if (empty(config('instagram-feed.username')) || empty(config('instagram-feed.password'))) {
            return [];
        }

        try {
            $cachePool = new FilesystemAdapter('Instagram', 0, config('cache.stores.file.path'));
            $api = new Api($cachePool);
            $api->login(config('instagram-feed.username'), config('instagram-feed.password'));
            $profile = $api->getProfile($this->profile());

            return collect($profile->getMedias())->transform(function ($media) {
                return [
                    'id' => $media->getId(),
                    'width' => $media->getWidth(),
                    'height' => $media->getHeight(),
                    'image' => $media->getDisplaySrc(),
                    'thumb' => $media->getThumbnailSrc(),
                    'date' => $media->getDate()->format('Y-m-d H:i:s'),
                    'caption' => $media->getCaption(),
                    'comments' => $media->getComments(),
                    'likes' => $media->getLikes(),
                    'link' => $media->getLink(),
                    'image_64' => $this->base64EncodeImage($media->getDisplaySrc(), $media->getId()),
                ];
            })->take($this->params->get('limit', 12))->all();

        } catch (\Throwable $th) {
            if (config('app.debug')) {
                return $th->getMessage()."\n".$th->getTraceAsString();
            }

            return [];
        }
    }

    protected function base64EncodeImage($path, $id)
    {
        if (Cache::has($id)) {
            $data = Cache::pull($id);
            return $data;
        }else{
            $img = file_get_contents($path);
            // Encode the image string data into base64
            $data = base64_encode($img);
            Cache::put($id, $data);
            return $data;
        }
    }

    protected function profile()
    {
        return $this->params->get(
            'profile',
            config('instagram-feed.profile') ?? config('instagram-feed.username')
        );
    }
}

Then, in the template you use something like the following (note the data:image/jpeg;base64,{{image_64}} in the <img.. tag:

{{ instagram_feed_extended limit="12" }}
    <a href="{{ link }}" target="_blank" class="instagram--post bg-dark-gray overflow-hidden relative pb-full hover:bg-fuscous-gray">
        <img src="data:image/jpeg;base64,{{image_64}}" alt="{{ caption }}" class="instagram--img block absolute object-cover w-full h-full">
        <div class="instagram--meta absolute p-2 w-full inline-flex items-center justify-center">
            <div class="likes p-2"><p><span class="icon-instagram-likes"></span> {{likes}}</p></div>
            <div class="comments p-2"><p><span class="icon-instagram-comments"></span> {{comments}}</p></div>
        </div>
    </a>
{{ /instagram_feed_extended }}

[andrew-ireland]

Couldn't get @daylightstudio's code to work on my end, but +1 for a PR with this logic 👍