Facebook share not showing image from open graph metatags
Question
I'm trying to integrate the Facebook share button to my employer's site, the title, url, description/intro are all displaying correctly, however no image is being attached. When the share dialog opens, an image container flickers and then disappears as though facebook is trying to process the image(s) but fails.
I'm using og:image and a link relation to try and specify the image to use for shared links:
<meta property="og:image" content="/images/logo_white_150px.png" />
<link rel="image_src" type="image/png" href="/images/logo_white_150px.png" />
That image used to work (it scaled appropriately) but no longer does, I've also tried other images of differing size and format with no luck.
Here's the open meta-tags I'm using in the header:
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" itemscope itemtype="http://schema.org/Article" xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:type" content="landing page" />
<meta property="og:title" content="Social Media Test Page" />
<meta property="og:description" content="This is a page for testing the behavior of social media buttons..." />
<meta property="og:image" content="/images/logo_white_150px.png" />
<link rel="image_src" type="image/png" href="/images/logo_white_150px.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:url" content="<%=shortUrl%>" />
<meta property="og:site_name" content="site name" />
<meta property="og:medium" content="mult" />
</head>
Here's the JavaScript I'm using at the start of the body:
<body>
<script type="text/javascript">
(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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
...
And here is how I'm using the button:
<div class="left" style="text-align: center;">
<a name="fb_share" type="button" share_url="<%=shortUrl%>">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
Any help is much appreciated, thanks in advance
Chris.
3 answers
solution1
1 2016-01-06 14:34:17
If everything is OK on the scraped result, try to fetch new scrap information using Facebook Debugger .
This is because Facebook use its own cache for og:data.
solution2
0 2016-12-28 11:59:32
In my experience :
- All the URLs should be absolute (even the og:image value)
- If your image is served equally over https you should add a og:image:secure_url meta property with absolute url as well (if you serve everything only over https you can skip this)
- Add as well a og:image:width and og:image:height meta properties
Main url redirection is very tricky, you should make absolutely sure your content is correctly (and fully) fetched, for complex dynamic content I often end up doing a detection in the .htaccess to serve FB's crawler appropriate content as follow :
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} facebookexternalhit/[0-9]
RewriteRule ^(.*)$ OG_GENERATOR_SCRIPT_HERE.php [L,QSA]
solution3
0 2012-01-11 05:08:46
Without seeing the HTML output from your code, I could only make a guess as to the issue. Don't use a relative url like <%=shortUrl%> , but be sure to use the fully-qualified Url....something that has the http(s):// on it.
Also, http://developers.facebook.com/docs/share/ says that this share button is being deprecated. Please change over to using the Like button instead: http://developers.facebook.com/docs/reference/plugins/like/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.