Facebook Open Graph not loading image
I have put together a micro site that allows users to decorate a tree to be used on facebook / twitter / etc ...
http://jajo.net/odditree/share.php?file=u/1418759317.png
Some php magic build and load their image and then set a variable to be retrieved on the last page.
$file = $_GET["file"];
$url = "http://www.jajo.net/odditree/" . $file;
Everything works fine except for the Facebook share dialog.
I first tried using the image sharing url:
<a class="btn fb" href="" onclick="window.open('http://www.facebook.com/sharer.php?s=100&p[url]=<?echo $url?>&p[images][0]=<?echo $url?>&p[title]=Jajo - Holiday Odditree=', 'newwindow', 'width=600, height=250'); return false;"><span class="icon"><i class="icon-facebook"></i></span> Share on Facebook</a>
Sometimes it loads a description, sometimes an image. Never both.
After trying to make this work, I gave in to Facebook and created an app.
After following the dev documentation, I put this together:
<a style="cursor:pointer;" onclick="window.open('https://www.facebook.com/sharer/sharer.php?app_id=823686387676926&u=http%3A%2F%2Fwww.jajo.net%2Fodditree&display=popup&ref=plugin' , 'newwindow', 'width=600, height=250'); return flase;">Facebook Again</a>
The site now relies on Facebook for the hard work, and all I have to do is provide open graph data.
This is what it looks like:
<meta property="og:title" content="Jajo Holiday Odditree">
<meta property="og:site_name" content="Jajo Holiday Odditree">
<meta property="og:url" content="http://www.jajo.net/odditree/">
<meta property="og:description" content="<?if ($url) {?>Behold my @Jajo Holiday #Odditree! Share your own Odditree creation. http://jajo.net/odditree<?}else{?>Create your own Odditree. http://jajo.net/odditree<?}?>">
<meta property="og:image" content="<?php echo $params['image']; ?>">
<meta property="fb:app_id" content="823686387676926">
<meta property="og:type" content="website">
As far as I can tell, everything is where it should be, it even echoes correctly when I look at the source. However, the share button only shows this:
The logo image it pulls in there goes away when it is shared, and in my timeline, it's just an empty box. Instead of an open graphic:
I've debugged and deferred a few times, but my og: image always seems blank. https://developers.facebook.com/tools/debug/og/object/
I'm at a loss here.
If someone can help me troubleshoot this issue, I would really appreciate it.
=== UPDATE === After bringing in a few people, continuing the chat and pulling out the hair ... We weren't able to get the job done until the site went live. So we dropped stuff on facebook and it became a twitter campaign.
After all was said and done, I figured it had something to do with the dimensions of the images.
source to share
I had problems before where no matter what I do it makes it possible to use the image using the left / right arrows. Reading a few things online. One of them involves the use of a tag image_src
in the page title.
<link rel="image_src" href="http://URL-TO-YOUR-IMAGE" / >
But this looks like the old way, not an open graph. Saw something else that sounds more promising, but clearing the FB cache.
To force Facebook to update its cache so that your changes are reflected on Facebook, you must force your page to "clear". The page is cleared when the page administrator clicks the Favorites button or when the URL is entered into the Facebook Linter URL.
from this article: http://www.hyperarts.com/blog/how-to-control-facebook-image-thumbnail-text-popup-dialogs/
I wonder what happened if you added the second one og:image
.
source to share