CODEWITHSUNDEEP
htmlfacebookfacebook-graph-api
seismicmike
seismicmike

Reputation: 103

Unable to Change Facebook Icon for My Website on Status Updates

I am having trouble getting the proper image to show up when I a link to my website in a status update. It is either grabbing an image from the front page which I don't want it to use (links to the front page) or no image at all (links to specific pages).

I found several tutorials that all gave the same advice about using a meta tag to specify which image to use, which I have done. Example Tutorial. Example:

<link rel="image_src" href="http://URL-TO-IMAGE" />

This had no effect. The article mentions that Facebook caches these lookups and provided a link to a URL Debugger, which was supposed to scrub that cache for me. I used it to verify that my meta tag was inserted properly (it was), but it had no effect on new status updates. Am I missing something? The way the tutorials talk gives me the indication that using this debugger will clear the Facebook cache for the page so that the next lookup will load and re-cache the proper image. Instead it seems that all this does is bypass the cache this one time for the purposes of testing.

Is there a way to actually force clear this cache, or do I just need to wait? It's been several days. How long does this cache take to expire?

Steps to Reproduce:

  1. Visit Facebook News Feed or Timeline
  2. Enter URL of my website in status update (can provide if neeeded)

Expected Outcome

The Favicon of my website is loaded as the icon for the status update

Actual Outcome

An image of a person (appears in the sidebar of our site) is used as the icon (for links to the front page. Links to the inner pages of the website load no icon at all.)

Further:

  1. Visit the URL Debugger
  2. Enter URL for website
  3. Verify proper icon is loading
  4. Post link in new status update.

Expected Outcome

FB's cache will be updated and the Favicon will now be used.

Actual Outcome

Nope... still the person from the sidebar on front page links and no icon at all for inner page links.

UPDATE 2/22/2013:

The image that loads when I post my URL to Facebook has changed! But it's still wrong :(.

I went to test it this morning and I now have an additional image as an option, which means Facebook did update what it's loading from the site, but it's still not the image that I specified in my tag. It's just grabbing another image from one of my other side bars, and I'm still not getting an image at all for my inner page.

It's weird.... the URL Debugger tool grabs the correct image, so I don't think the problem is my Meta tags. That's what the URL Debugger is supposed to help me identify. I think there's some disconnect between the lookup and what Facebook actually posts. I think this is a problem with Facebook, unless I'm missing something huge, but I don't see it....

UPDATE 2/25/2013:

I've made progress, but there's still something weird going on. Martey set me straight on the using the og: meta tags rather than just the tag. The tutorial I had been following said to ignore the Open Graph warnings, but once I started paying attention to them, I got some good information. Like, it actually said that my image is too small and that it will use another image instead. Guess I should have paid attention :)

Anyway, so the issue was that the favicon is too small. According to the Open Graph warning, it needs to be 200 pixels in both directions. So I grabbed the actual header logo and tried to use that. It's 340 pixels wide. Oops, it was only 164 pixels tall.

So I used The GIMP to set it onto a transparent background that was 200 pixels tall and tried again, but it's still telling me it's too small. It's no longer telling me that it needs to be 200 pixels. It just says that it's too small.

I'm stumped again...

Update 2/25/2013: Issue Resolved

The problem was transparency. I filled the background in white and tried again and now it's loading fine.

Thanks for your help, Martey!

Upvotes: 2

Views: 3290

Answers (1)

Martey
Martey

Reputation: 1631

Instead of using a third party tutorial, you should refer to Facebook's official OpenGraph documentation. They recommend using an og:image metatag to refer to document images.

As I noted in my comment, issues with data not updating on Facebook is likely to be the result of misformatted or wrong OpenGraph metatags. Without the URL of the troublesome page, or information on the URL Debugger's warnings, it is difficult to recommend solutions.

Upvotes: 1

Related Questions