Problem adding thumbnail to Facebook?

Thumbnails not showing on Facebook

This isn’t a little bug or glitch, this is serious business nowadays! Anyone with the intelligence of a teenager knows 1) the importance of Facebook as social media supreme, whether you like it or not , and 2) importance of images in every blog, site and outlet in the whole world. As we artists have always known. :)

This problem of no thumbnails on Facebook had been going on for some 3 weeks for my new blog of chocolate cartoons, Dark.? Every time I tried to post a link on Facebook, in either my personal Facebook page, or my chocolate book page, I would get the ugly blue no-show icon. Not the best draw for visitors when you are starting a new art blog.

I finally had to find an answer. I had been blaming my theme (template, for you non – WordPress people), which is Elegant Grunge. It has fancy and quite attractive frames around each image. As everyone who does SEO knows, frames used to be lethal for indexing by Google and other scrapers, as bots couldn’t read the text or see images through frames. Now, Google has grown up, and has been indexing my images just fine, so why couldn’t Facebook see them?

But it wasn’t just Facebook who wouldn’t show thumbnails; bitly wouldn’t index images, either, which is on my backend. Not public, but still annoying when I am trying to keep track of posts.

So I started hunting for info on images in frames for a few days, and couldn’t find anything helpful. Either Elegant Grunge is the only theme that uses frames on images (not true) or no one else had a problem with them. I found Fix, on ansonalex.com, to be helpful, and finally started trying his suggestions there, one by one. Here are his suggestions that I tried:

• Installed the Add Facebook Share Thumbnail + Meta Plugin. Nothing.
• Even with the plugin, you have to add another line of code.? I think this was when my bitly links suddenly showed thumbnails, but nothing on Facebook yet.
• The images were named properly, so that was okay.
• Alex Anson at Fix suggests adding 3 lines of code to your header. I thought my title and description were fine, but added this one, just in case: <link rel=”image_src” type=”
  image/jpeg” href=”
  http://www.yourdomain.com/image/path.jpg

  “/> No change. (Also, I’m a dummy nerd, I guess, because I wasn’t sure what the actual code should be. Do I keep image and path in the code?)

• Removed the http and the final /on the post url, as he suggested last. No change. Feeling discouraged…

Facebook Linter Tool

While I was testing these pieces of codes, I also tried the Facebook Lint Tool, which they call the Linter, or? Object Debugger. Thumbnails didn’t show up there, either, for my posts, and I didn’t understand the warnings they gave. When I tried links from my other blogs, thumbnails did show, however, so that gave me the idea of looking at my other blogs more closely.

The Lint Tool gives you a helpful link at the bottom which has your Scraped Url. It’s not the same as your source page, but similar, only cleaner and more simple. Unfortunately, after I had put several post links from my chocolate blog in the Linter, the lint tool crapped out on me and stopped working, with the error: “”Error Parsing URL: Error parsing input URL, no data was scraped.” Whatever.

Favicon in WordPress Header

But one thing I remembered the Linter said before it broke , was that the og:image property wasn’t big enough. (Facebook won’t show any image below a certain size.) Was it possibly picking up my favicon (the little image in the left of most search bars and tabs in Firefox)? instead of the cartoon or photo in each post? I won’t give up my favicons, all of which I’ve designed, for nuthin’!? All of my blogs have a favicon in the Header file. Then I went back to my other blogs AGAIN, testing the Lint tool on them, and 2 of them passed, even with the favicon in the header.

Here is what the Linter spit out: <link rel="shortcut icon" href="http://chocolatecartoons.com/wp-content/themes/elegant-grunge/favicon.ico.jpg"> <link rel="image_src" href=""> It can only see the favicon, no other images!

Finally, I just tried moving things around. (In WordPress, if nothing else works, make a SAFE copy of the file you’re working on (index, function, style, whatever) and just try things out. I’ve had WordPress blogs for 5 years now, and still don’t understand the CSS language, but at least I’m not afraid to experiment!) I was still in the header file of Elegant Grunge, where the favicon lives, and I noticed the php with 3 lines about thumbnails. I confirmed that this was part of the thumbnail plugin I had activated earlier.

First I tried to move the favicon code below the thumbnail code, so Facebook would see the thumbnail instead of the favicon, but that broke the favicon. (Oddly, there was still a favicon, but instead of the site one, it changed each image in each post to also be the favicon for that post!)

I then moved the thumbnail php code from where the plugin had parked it, directly above /head, to directly underneath the favicon line, at the top of the header php. (<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico.jpg”/>) VOILA!? Facebook started showing thumbnails again instantly!

I don’t understand why. This makes no sense to me. The code lines are still in the same header file, just higher up in the file. But sometimes you just gotta believe.

I hope this is helpful to others, and if you have explanations or other experiences, feel free to leave in comments.

Trying another one – Facebook Like Thumbnail plugin

Aaannndd…we’re back to the beginning. Thumbnails stopped working again in both bitly and Facebook. Trying out this other plugin, Facebook Like Thumbnail and we’ll see how long this one lasts. (Use the exact title of plugin – the search for plugins on WordPress is totally inept and broken.) The author, Ashfame, talks more about the plugin here.You can also use your logo or a default image for the thumbnail. (Why would someone want the same image for every thumbnail on Facebook? But at least it’s an option.)

And I’m not publishing this post til I’ve tested it for a while! *

* Well, I published it immediately, by mistake. Thumbnails still don’t show on bitly, but are okay on my Facebook page.

great photo from old-computers.com