Search code examples
urltwittergoogle-plussharingfacebook-sharer

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

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

Solution

  • 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