Facebook Share Dialog Box Not Showing Image the First Time You Share a Story?

Photo adapted from “Share” by GotCredit (Flickr, Creative Commons).

A few people have asked me lately about a specific problem with Facebook image sharing. Here’s what happens: When you post a new article and then try to share it on Facebook, the image does not show up in the Facebook sharing pop-up box. However, later (trying it again, or having someone else try it), it does show up. But that very first share doesn’t seem to work.

I’ve been asked a few times lately: Why? This article will explain this particular issue because what you want, of course, is a proper-looking share dialog box sch as the following:

This is an interesting technical issue, actually. What you’re experiencing isn’t in fact an error; what’s happening when you first click share on a new article is that Facebook has never seen your article before. That’s not problematic when it comes to the text and description of your share. (Most people report that the title and description are fine.) But, for images in particular, it’s different.

Here’s the deal: Facebook likes to know some information about your images before it shares them. Yes, it needs the URL for the image, but most people are supplying that already (which usually happens automatically via whatever sharing utility you’re using — the URL is properly inserted as an “og:image” tag). More specifically, though, it likes to know the *dimensions* of that image. And this is the root of this issue.

On the very first share, Facebook has never seen or cached your image. Basically, Facebook likes to make a copy of your image, and then examine it (meaning, it likes to get the width and height) so that it can then properly render the many different versions of your image for various devices people use for Facebook.

So, the first time you share the article, it doesn’t yet know these things, and the result is a share dialog without an image. It knows you have an image, but it doesn’t know the size and therefore doesn’t know how to display, crop, and present it.

Is there a fix for this? First the Easy Way…

Of course! There are a few ways to fix this issue. For most people, the easiest is to click share once just after posting. This will display the image-less share box, which you *don’t* want. But, this also exposes Facebook to the image you want to share, and thus Facebook will then know the dimensions. So, usually, all you have to do is close that dialog box after it loads, and then re-share it. Quite often, you’ll then see the normal share box *with* the image. This is what others will also see going forward. (I’ve seen sites where you may have to click share a couple of times to get the image cached, but usually it’s once, if this is the issue you’re having).

While the above works well, and is a workable solution for many people, others do not want to have to add anything to their publishing process. They’d rather all of this was 100% automatic, and also want the first share to work properly no matter who executes it. In this case, we enter the more technical side.

Now the Tougher Way…

Facebook recognizes that this is an issue, so they have provided a way for you to get that first share to work. The solution is that have to specify the dimensions of the image within your Open Graph tags. As you can imagine, this presents a few technical issues.

The first tech issue is: If you’re using a CMS and a sharing utility (some program to handle sharing), you would have to figure out how to get the proper image width/height Open Graph tags inserted into your HTML (in the <head> section of your source). That can be tough depending on your setup.

The next tech issue with this is: Is your share image *always* going to be the same width/height dimensions? If so, that’s easier than if not, as you can just hard-code the width and height right into your HTML template. However, for most people, the share image might change sometimes. So, hard-coding specific dimensions isn’t usually a good idea. Instead, you’d need to dynamically generate these tags.

Which brings us to the next issue: *Programmatically* determining the width and height of an image is indeed possible using PHP, so that might sound like a good approach — meaning, you’d have some program that looks at the share image each time a page loads, and then writes the width and height tags dynamically. But, that also wastes a ton of time and server resources. After all, Facebook only needs this info once, and what you’re doing is calculating that every single time a page loads. In the end, this approach would needlessly slow down your web site, likely considerably. I would strongly recommend not doing it this way.

If a dynamic approach is definitely needed, I think maybe the *best* approach would be some sort of PHP utility that stores image width and height information in your database in some way, and that would optimally be calculated any time your post is saved with a new main image (or something like that, if you’re using straight HTML and not using your CMS to select the main image). Then, upon generating the page, the PHP code that writes your site’s HTML could just grab the width and height of the share image and insert the proper, dynamically-driven, width and height meta tags.

So, again, not so simple, but it does solve the issue and such an approach would probably be good for larger sites. In my view, the best solution is to simply click share after initially posting a piece, and then do it again to ensure that the image displays. Once you see the image, everyone else will as well (provided the above is the root of your issue with image sharing, of course). There are other things that can cause an image to not display, such as having an image that’s too small or too large, for example. But, I hope this helps a few people. :-)

Jim Dee heads up Array Web Development, LLC in Portland, OR. He’s the editor of “Web Designer | Web Developer” magazine and a contributor to many online publications. You can reach him at: Jim [at] ArrayWebDevelopment.com.