Facebook Share Doesn't Show My Description or My Thumbnail

Facebook Share doesn't show my description or my thumbnail

To those (like me) for whom the other answer did not work:

In the <head> and </head>section, add

<meta property="og:url" content="https://www.mathnuggets.com/" />
<meta property="og:image" content="https://www.mathnuggets.com/images/fb-logo.jpg" />
<meta property="og:title" content="Math website for your gifted student" />
<meta property="og:description" content="Challenging word problems for gifted elementary students" />`

Then go to FB Linter and enter your URL there to refresh FB's cache of your page.

^^^ Refreshing the cache is important.

Facebook don't show thumbnail image when share in the first time

Add this in head section and change your app id and Image width and height should be same as og:image:width and og:image:height

<meta property="fb:app_id" content=" your facebookAppId  " />
<meta property="og:title" content=" This is title of post " />
<meta property="og:url" content="http://www.example.com/a.jpg">
<meta property="og:image" content="http://www.example.com/a.jpg" />
<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="442" />
<meta property="og:description" content=" This is description of post" />

and also this code may help you

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>

<script>
/********* Code for deleting facebook cache ************/
FB.api(
'/',
'POST',
{"scrape": "true", "id": "http://www.example.com/a.jpg"},
function (response) {
}
);
/********* Code for deleting facebook cache ************/

(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7&appId=xxxxxxxxxxfacebookAppId";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="http://www.example.com/a.jpg" data-layout="button"></div>

Facebook share button doesn't display Image and Description

You need to use the Open Graph Protocol. As given on their site, here is a full example of a movie page:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
...
</head>
...
</html>

If you check your w3c, you'll want to change the DocType to XHTML + RDFa

Facebook Sharer Doesn't Get Thumbnail

This could be for a number of reasons, but without seeing your actual code (not blanked out with IMAGE, SITE NAME etc) I can only hazard a few guesses.

  1. Your site is hosted locally or password protected

    It's sometimes a silly mistake people make, if you're developing this locally and you put in a locally hosted image as the og:image content then facebook wont be able to load the image correctly.

  2. Not a valid URL

    Load the og:image URL and see if loads. If it doesn't, that's your problem.

  3. Your image is invalid. This is what facebooks documentation has to say on the image properties:

    og:image - An image URL which should represent your object within the graph. The image must be at least 50px by 50px, although a minimum 200px by 200px is preferred and 1500px by 1500px is recommended for the best possible user experience. The image can have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page. (Note: image sizes must be no more than 5MB in size.)

  4. Facebook has blocked your domain

    Unlikely, but possible. See below regarding using the facebook debugger.

You are able to use Facebooks debugger - just type your URL in and it will give you all the information you need. Including the og:image property.

If nothing is picked up, make sure you're including the tags correctly in your page, which you can see here.

If absolutely none of the above works, and you really can't get anything to work for you, you can include the URL directly in the share URL link - I've made an example here for you.

Facebook Share Dialog does not display thumbnails one first load

I finally I think I found the issue. The images I want to share are delivered by a PHP script instead of a plain file. It seems to be related to the way PHP delivers the images:

Bad:

echo readfile($image_thumb_file);

Good:

$fp   = fopen($image_thumb_file, "rb");
fpassthru($fp);

After doing this change my images finally appear in the Facebook debugger.

Facebook share doesn't show images

Use Open Graph protocol

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>

To test each links use URL Linter


Look at this forum, most of them will ask same questions, why OG image is not working on like button. It's a bug maybe? Bug 16580

Sharing url link does not show thumbnail image on facebook

Your meta tag should look like this:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

And it has to be placed on the page you want to share (this is unclear in your question).

If you have shared the page before the image (or the meta tag) was present, then it is possible, that facebook has the page in its "memory" without an image. In this case simply enter the URL of your page in the debug tool http://developers.facebook.com/tools/debug. After that, the image should be present when the page is shared the next time.

Facebook does not show thumbnail when a photo is shared

Facebook doesn't support sharing of plain images, only hyperlinks can be shared. Try posting the same image's link on your profile as status. Facebook won't show you any thumbnail for it but just the link. To share a image on facebook, you have to somehow upload it -_-

Facebook doesn't detect video while sharing my own page

Do you have HTTPS URLs for your video files in the OG meta tags as well?

You will need HTTPS sources as well, since most Facebook users surf over HTTPS already (and Facebook is in the process of getting the rest of them there).



Related Topics



Leave a reply



Submit