I am currently working a new feature to allow users to select the thumbnail they would like to use when sharing an page on Facebook. The user should be able to use the Facebook widgets like the send dialog or share buttons as well as simply cutting and pasting the URL into their udpate status dialog on Facebook.
I have read much of the documentation, which seems to indicate that I simply need to add multiple og:image tags in the page being shared. I have done this and run the page through the linter so the cache gets updated.
When passing the page to the share.php directly, effectively removing any of my client side code and letting the dialog present what it is scraping, I am seeing 3 images from the page available.
I am not sure what I am doing wrong here.
Here is the linter result, the graph object, the sharer.php link and the page. Anyone have ideas of what I could be doing incorrectly?
I have confirmed that at least the og:title tag is being respected by the share dialog. I have also tested the size of the images, and included file extensions as suggested below.
I know this works because buzzfeed has the exact functionality I am going for. I have reduced my example down to only the core pieces I think should work. You can find the full source here.
On the Buzzfeed article, the content attributes in the og:image links point to named .jpg files, vs your links which do not have a filename/extension at the end.
It may be required to include a filename in the links, especially if it's basing image detection on the file extension.
EG:
Buzzfeed:
<meta property="og:image" content="http://s3-ak.buzzfeed.com/static/campaign_images/webdr02/2013/3/18/11/10-lifechanging-ways-to-make-your-day-more-effici-1-2774-1363621197-4_big.jpg" />
Yours:
<meta property="og:image" content="http://statics.stage3.cheezdev.com/mediumSquare/3845/4AC356E3/1"/>
After some tests, I guess it's a caching issue.
Looks like the sharer is caching the graph, using the og:url
as a key, so that different querystrings in the sharer won't bypass the cache, if they do not impact the og:url
value.
Obviously, the debug tool don't use such cache.
If I'm right (this is just an insight), you can either wait that the cache entry expires or try with a different og:url
. Moreover, to ease the test, keep the new og:url
equal to the new page location.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With