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

url twitter google-plus sharing facebook-sharer
itsme picture itsme · Nov 21, 2012 · Viewed 8.9k times · Source

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

Answer

luschn picture luschn · Nov 21, 2012

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

Related questions

What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

I've just noticed that the long, convoluted Facebook URLs that we're used to now look like this: http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345 As far as I can recall, earlier this year it was just a normal URL-fragment-like …

Read More
How to open an installed app from an email URL in Android?

I want to open my app from an email URL, basically like the example shown below for Twitter.com. Email with link: Selection to open app or browser: After you click on the app choice, the Twitter app opens: I …

Read More
Facebook, Twitter, and Google +1 buttons using only HTML (No Javascript)

I would like to know if there is a method to create "share" buttons for Facebook, Twitter and Google +1 using only HTML, without any Javascript having to be inserted into the code at any point. For example, you can use …

Read More