5

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):

enter image description here

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

but it doesn't seems to work

1 Answer 1

12

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

4
  • 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 Nov 21, 2012 at 18:34
  • 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.
    – andyrandy
    Nov 21, 2012 at 18:35
  • 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? Nov 21, 2012 at 18:37
  • 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).
    – andyrandy
    Nov 21, 2012 at 18:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.