CODEWITHSUNDEEP
phphtmlfacebookgoogle-plusshare
Joe Scotto
Joe Scotto

Reputation: 10877

Change image when using share buttons

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.

Upvotes: 1

Views: 260

Answers (1)

Joe Scotto
Joe Scotto

Reputation: 10877

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/

Upvotes: 1

Related Questions