Menu
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.
746
Right-click on your page and click on View Page Source. Then check if you're able to find the og:image tag added in the source code. If the og:image tag is not found, that means Rank Math is either disabled or not able to print your social tags.
Optimizing the Image Size for Facebook Open Graph For the best display on high-resolution devices, the company suggests choosing an image that's at least 1200 x 630 pixels. If your image is smaller than 600 x 314 pixels, it'll still display in your post, but appear as a thumbnail-sized picture.
The thumbnail is generated automatically as the Facebook system scans the link for any associated image files. Most links have several image files associated with them, in one way or another, and Facebook won't always select the best one by default.
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.
180
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
