When sharing my blog posts on Facebook, sometimes the list of thumbnails to choose from is a bit buggy. On too many occasions, the images in my post don’t show up in the list of available thumbnails at all. I click the little arrow to flip through images to attach to my post, and see only my blog header and images from my sidebar, nothing else. So frustrating!
When I take the time to find, create and/or include images in my posts, I want to use one of those images as the thumbnail for my corresponding Facebook post. I hope this fix will help some of you who are facing the same problem.
Ready? Here we go!
1. Look at your post in “Compose” mode. Take note of the placement of the image you want to use as thumbnail. Is it the first image? The third? The fifth? Just remember that number… it will help you later as you look through your post’s code. Now, click the HTML button.
2. Scroll down to the very end of your post’s HTML. Add the following bit of code:
<link href=”IMAGELINK” rel=”image_src”></link>
I’ve underlined “IMAGELINK” because I want you to see it, but it’s just a placeholder.
3. Now, search and find the code for the image you want as your thumbnail. Remember that number I asked you to make note of? If the image you want is the fifth image in your post, find the fifth instance of the IMG tag. If it’s the third image you want, find the third instance. And so on. Use Ctrl-F to search for “IMG” if you don’t want to sift through the HTML.
Once you’ve found the IMG tag for your image, find the URL that appears immediately after SRC=. Highlight that URL (just the url, don’t include the quotation marks) and copy it to your clipboard (hit Ctrl-C to copy).
4. Scroll down to the very bottom, where earlier you inserted that new piece of code. Remember that IMAGEHERE was just a placeholder. Now you’re going to delete IMAGEHERE and replace it with your image’s URL (hit Ctrl-V to paste).
Now… if you have never tried to share this particular post on Facebook, you’re done! You can skip to the very last step and share away.
5. If you’ve already made an attempt to share your post on Facebook, which is how we usually find out we need to go through this process, you’ll need to debug the link. I’ve made it a habit to include that bit of code on every post I make, just so I don’t have to go through all of this again.
Go to the Facebook URL Linter:
At this point, you have to be acting as yourself, not as your page. That’s okay, because nothing gets posted on your behalf at this point. You can switch back to your page later.
Insert your post’s URL (the permalink). Then click “debug.”
The next screen will show you the results. If you scroll down to “object properties” and see your image in the og:image section, you’ve succeeded!
6. Now, share your link on Facebook. The image you specified will show up in the list of available thumbnails.
I’m sure I’m not the only person who gets picky about this sort of thing. 😉 Hope some of you found this post helpful!