FB, TWITTER,G+ share url and fixed preview image

Question

i have these simple social sharing links:

FB share link
     <a href="#" class="share-fb" onclick='window.open( "https://www.facebook.com/sharer/sharer.php?u=http://mysite.org", "myWindow", 
                  "status = 1, height = 300, width = 600, resizable = 0" )'></a>

TWITTER share link
<a href="#" class="share-tw" onclick='window.open( "https://twitter.com/intent/tweet?url=http://mysite.org", "myWindow", 
              "status = 1, height = 300, width = 600, resizable = 0" )'></a>
GOOGLE PLUS
 <a href="#" class="share-g" onclick='window.open( "https://plus.google.com/share?url=http://mysite.org", "myWindow", 
              "status = 1, height = 300, width = 600, resizable = 0" )'>
             </a>

these links opens up a popup window where to share the page link.

What i would like is to add a fixed site image preview for each of the links user gonna sharing.

How can i add the preview image , fixed , foreach (FB,TWITTER, G+) of them?

NB: with preview image i mean the one showed in this photo (next to the link www.google.it):

For the FB sharer i tryed :<meta property="og:image" content="URL of your image" />

but it doesn't seems to work

Kendallkendell

Answer 1

For the sharer.php to work you should fill in some more Open Graph Tags. Take a look at this site: http://ogp.me/

You can always test your site in the Facebook Debugger: https://developers.facebook.com/tools/debug The debugger also shows warnings/errors, so it´s perfect for testing.

Twitter does not have images. Well, that´s not correct, you have to create a "Twitter Card" for your page. That is explained here: https://dev.twitter.com/docs/cards

About Google+, this should work:

<meta itemprop="image" content="http://www.....">

(Compare here: http://www.google.com/intl/en/webmasters/+1/button/index.html)

Also take a look at this thread: Google +1 Generated Thumbmail in Profile

Twiddle

don't know why but <meta property="og:image" content="ia.media-imdb.com/images/rock.jpg" /> this doesn't works for me , maybe cause i'm not including fb api? i just use sharing urls on a links – Kendallkendell

did you try the link with the facebook debugger? it might tell you what´s wrong with the image. make sure that it´s minimum 200x200 pixels btw. – Twiddle

oh great ok, just i'm sharing google.it link so i think the image should be related to the shared link, is it true? – Kendallkendell

well, it could be possible that the image has to be on the same server, but i doubt that, to be honest...but: you should use an absolute url in the metatag (http and stuff). – Twiddle