1

I am trying to make google+, facebook and twitter to show the image I've selected when sharing. I wrote an html code as it should be, but it doesn't work for some reason. That's in the body:

<a href="https://www.facebook.com/sharer/sharer.php?u=incodedURL" target="_blank">
    <img src="other/facelog.png" alt="Facebook Logo" id="facelog"></a>

<a href="https://plus.google.com/share?url=incodedURL" target="_blank">
    <img src="other/googlog.png" alt="Google Plus Logo" id="googlog"></a>

<a href="https://twitter.com/intent/tweet?url=incodedURL" target="_blank">
    <img src="other/twitlog.png" alt="Twitter Logo" id="twitlog"></a>

In the head I've tried Open Graphs, meta tags and item props from 1, 2, 3, and 4.

and from many others, but none of them works. My image, title and discription is not displayed. I am using 450x450 px .jpg image. HTML.

Community
  • 1
  • 1
Alex Mercer
  • 27
  • 6

1 Answers1

1

You need to use meta tags for this.
The following is a list of meta tags for all the 3 social networks:

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.jpg">

<!-- Facebook - Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numberic ID" />

On the Facebook case, you can use the Debugger tool to check if these meta tags are being implemented correctly.

Chun
  • 2,230
  • 5
  • 24
  • 46
  • I told you, those does not work. this is the problem I am trying to find the solution to. I just copied, all that code and changed some values (pictures and URLs), but it still doesnt work. I wrote in the question that I've tride all this. I just don't get, what can be the problem... – Alex Mercer May 13 '15 at 01:24
  • do you have a link of the page you are trying to share? – Chun May 13 '15 at 01:31
  • well... can you share it, so we can see what's happening and scrap the URL with the Facebook debugger? Also add the meta tags from my answer again in case you have removed them – Chun May 13 '15 at 01:41
  • I did not remove any meta tags. I will not share the url. it is an ordinary html page with css and js. – Alex Mercer May 13 '15 at 01:44
  • make sure the meta tags are placed on your `` below the `` tag. After doing this try to share a link, if it's still not appearing paste your URL on **[Facebook Debugger Tool](https://developers.facebook.com/tools/debug/og/object/)** and click on **Fetch new scrape information** do this action 2/3 times if the information did not show at the first time. Check for any errors. With this being done it should be working unless it will show some error. This is as far as I can help you cuz I don't have a live link to test or see what's wrong. Good Luck :) – Chun May 13 '15 at 02:01
  • you're welcome @AlexMercer . there's no better way of saying thank you on stackoverflow than upvoting the answer or marking it as correct :) – Chun May 13 '15 at 05:30
  • 1
    Facebook Debugger Tool and page scrapping is frustrating to say the least. I've found that adding a version query param like `http://example.com?v=1` and then clicking debug will trick it into see a new url in which it will ask to fetch details. Each time you want to try a new scape then change the value of the version query param value. – Shane Rowatt May 31 '21 at 09:11