Disqus Recommendation Missing Image Fix

Introduction

Many people have been using Disqus on their website to manage the comments from the readers. However, after the website has been updated several times, some people might find that the images in the Disqus recommendations become invalid, which makes the website looks ugly if the Disqus recommendations were present.

In this blog post, I would like to talk about a trick that will bring the Disqus recommendation back to normal again.

Root Cause

Whenever we publish something that has the Disqus embedded code on our website, the Disqus server will try to scrape an image that is related to the publication or website and store its URL in its database. The Disqus recommendation will use the scraped image URL to display an image for the recommended publication.

If some of the images on the website have been removed, some of the Disqus scraped image URLs might no longer be valid and thus some of the images in the Disqus recommendations will not display correctly.

Disqus Official Solution

It seems that Disqus has an official solution to set the images in the Disqus recommendations. However, from my own experiences, this will only affect the new publications but not the old publications whose image URLs are no longer valid. So if the Disqus server does not want to scrape our entire website again, the missing images in the Disqus recommendations will never be fix. I have never seen the Disqus server did so, either.

Unofficial Solution

Ultimately, the root cause to the problem is Disqus could not find a valid image via the image URL it has scraped previously. So if we could find out the invalid image URL that the Disqus server has scraped, we could create a new image on our website so that the image URL will be valid again.

The key is to use Inspect tool for the webpage in the Chromium based browsers, such as Chrome and Brave. It could as simple as right clicking the webpage where the invalid Disqus recommendation images are present, and click Inspect.

With some exploitation, we could find the image URL for each of the Disqus recommendations. More specifically, it is in a div class of recommend-image-wrapper.

In one of my cases, the image URL is

https://c.disquscdn.com/get?url=https%3A%2F%2Fleimao.github.io%2Fapple-touch-icon.png&key=V4Np_gF9OzuHTYk4vs6bwg&h=200

Although some of the URL characters have been replaced, it is not difficult to identify what file path the Disqus server is looking for. We could just create an image for the file path and the image will display normally again.

References

• Embed: Images Are Not Updated In Recommendations