Change image when using share buttons

Question

I'm using the following code to share using custom buttons on my website:

<div id="share_buttons">
    <img src="images/facebook.png" onclick="popup('http://www.facebook.com/share.php?u=<?php echo $URL; ?>', 'Share on Facebook');">
    <img src="images/twitter.png" onclick="popup('http://twitter.com/intent/tweet?status=<?php echo $coil->name . " at: " . $URL; ?>', 'Share on Twitter');">
    <img src="images/googleplus.png" onclick="popup('https://plus.google.com/share?url=<?php echo $URL; ?>', 'Share on Google+');">
</div>

The issue is that when I share the page it selects the image from the button that was clicked. I'm not using any of Twitter's, Facebooks, or google's API's because they don't allow me to use custom images (to my knowledge). I want to define an image for the share to have when someone shares it. How would this be done? Thanks.

Did you check this post: http://stackoverflow.com/questions/689295/how-to-show-particular-image-as-thumbnail-while-implementing-share-on-facebook — Maihan Nijat, Jan 11 '16 at 23:59
And what is wrong? Facebook will scrape the URL and use the og:image. — WizKid, Jan 12 '16 at 00:22
@WizKid How long does this take and does it matter if I'm using the API? — Joe Scotto, Jan 12 '16 at 00:27
Long does what take? Why does it matter? The same URL should share the same image — WizKid, Jan 12 '16 at 00:27
@WizKid What I mean is that after adding this: `` the page is still grabbing a random image, not the one I want it to. — Joe Scotto, Jan 12 '16 at 00:29
Then debug using https://developers.facebook.com/tools/debug/og/object/ — WizKid, Jan 12 '16 at 01:18

score 1 · Accepted Answer · answered Jan 12 '16 at 01:14

I added the following meta tags to get it working. From my testing it only works if you have all four of these.

<meta property="og:image" content="url/path/to/image" />
<meta property="og:description" content="Text that will be displayed below title" />
<meta property="og:url"content="URL of page" />
<meta property="og:title" content="Title of shared post" />

If you're having issues you can try to use the Facebook debugger to see what Facebook is seeing. https://developers.facebook.com/tools/debug/

Change image when using share buttons

1 Answers1