Skip to content
July 23, 2012 / Danii Oliver

Facebook Open Graph Issue

Why things need to be setup a certain way for Facebook Plugin to work.

I was given code generated from Facebook from a none developer. I had already written in the appropriate code but as they were the requester I put in their codes. Naturally given that many considerations were not met I ran into a few issues that are stopping the Facebook scraper from seeing my Open Graph data; and not allowing them to see the desired results in the Staging phase.

What’s happening:
I have setup the plugin with the needed iframe and og meta data. Once on the server I click the button and the like I get on my Facebook page is a random image from I don’t know where and text from the page itself. The text just happens to be a disclosure statement which makes for the worse description text ever.

While debugging I came across a few issue triggers that I will test for and record findings.
Issue possiblitiy #1: Cookie/Sessions to display another page or JS to change page content.
Issue possiblity #2: Facebook is pulling meta data from the OG:URL tag which is a redirected link and the the origin link of the “LIKE” click.

after debugging a staging link and a link live on a testing server this is what I got back:
Both gave me:

Open Graph Warnings That Should Be Fixed
Inferred Property: The ‘og:url’ property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The ‘og:title’ property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The ‘og:description’ property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags.
Tiny og:image: All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.

Staging test:

Critical Errors That Must Be Fixed
Bad Response Code: URL returned a bad HTTP response code.
Errors That Must Be Fixed
Missing Required Property: The ‘og:url’ property is required, but not present.
Missing Required Property: The ‘og:type’ property is required, but not present.
Missing Required Property: The ‘og:title’ property is required, but not present.

Live Testing Server test:

Scrape Information
Response Code: 200
Fetched URL: http://testingServer.com/LIKE.html
Canonical URL: http://linkItRedirectsTo/LIKE.html
Redirect Path
original: http://testingServer.com/LIKE.html
og:url: http://linkItRedirectsTo/LIKE.html
Final URL is in bold (this is the URL we tried to extract metadata from).
This is a great deal of help.
From the first test I can see that the staging link is really non existing (duh! it’s staging) so no info can be pulled which is why those who need to view the page in action CAN NOT see desired results.
Note: *Facebook Plugin needs to be n a live page viewable to the outside world and great public. 
From the second test I am told the full reason why the link share data isn’t working. I am asking it to pull from a page that contains no meta data for Facebook to utilize.
Observation: *It’s strange that Facebook doesn’t have a policy against or (if there is a policy) a code blocker to stop redirects that might be malicious.
I changed the OG:URL to be the same page the “LIKE” is coming from.
Once changed the above listed issues were removed. I notice that Facebook complained of some white space which was inadvertently in one of the meta tags. I removed as well and got a cleaner test result.
Note: *Do not have white-spaces before or after the start and end of a meta tag’s content=”” quotes.
The test gave me back:
Scrape Information
Response Code: 206
Like Button Warnings That Should Be Fixed
Admins And App ID Missing: fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

Note: *Meta fb:admins and fb:app_id are needed to make the icon button work. 

With the fb:admin the page still doesn’t display the proper description and image.
Scrape Information
Response Code: 206

206 Partial Content

The server is delivering only part of the resource due to a range header sent by the client. The range header is used by tools like wget to enable resuming of interrupted downloads, or split a download into multiple simultaneous streams.

You must be sure that the both the app_id and the admin are set. Then you must insure that the link to be liked that is placed in the plugin is the same link placed in the OG:URL. They don’t have to be the current page but the two must be the same.
Note: *If the OG:URL is different from the driver url; the linked URL must contain the desired OG: meta data as Facebook will be pulling the data from THAT redirected link. E.g. (Final URL is in bold (this is the URL we tried to extract metadata from))
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: