Featured image doesn't show when link is shared in Facebook - facebook

Hello Dear Stack Overflow friends! I've been trying to solve this problem for a couple of days with no success. I've read almost every post available here at Stack Overflow but I can't find out how to solve this.
When I share a link on Facebook, the thumbnail corresponds to the image I defined in the
meta property="og:image"
It works and everything is fine there... But,
I would like that each post could display its own featured image as a thumbnail when shared. How on earth can I do that?
I've tried with this code in function.php
function insert_image_src_rel_in_head() {
global $post;
if ( !is_singular()) //if it is not a post or a page
return;
if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
$default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
echo '<meta property="og:image" content="' . $default_image . '"/>';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
}
echo "
";
} add_action( 'wp_head', 'insert_image_src_rel_in_head', 5 );
And nothing happens...
I've also tried this code in header.php
<?php
global $wp_query;
$thePostID = $wp_query->post->ID;
if( has_post_thumbnail( $thePostID )){
$thumb_id = get_post_thumbnail_id( $thePostID );
$image = wp_get_attachment_image_src( $thumb_id );
echo '<meta property="og:image" content="'.$image[0].'" />';
} ?>
No success there either.
The featured image is activated in the functions.php like this.
add_theme_support('post-thumbnails');
As I said, all og tags are set.
What Is happening? It's not a cache thing because I'm using the facebook debugger to flush it.
I will be eternally grateful if anybody out there can help me.
Thanks a lot.
Benjamin.

I think you should try like
echo '<meta property=\"og:image\" content=\"'.$image[0].'\" />';
also, pls check your source code after updating this if <meta property is displaying correct when site is rendered

Ok I fixed this... Maybe this will help other users with the same problem... The reason it was using the same thumbnail in every link despite rendering the correct image in the source code is because of the
<meta property="og:url" content=" line.
I entered there the URL of the site and of course, the canonical URL ruled them all, and the debugger went there to fetch the featured image. I replaced that value with
<?php echo get_permalink(); ?>
And that did it. Thank you for your kind help I hope this question helps others solve similar issues.

You can use meta property like this.
<meta property="fb:app_id" content="facebook app id" />
<meta property="og:url" content="post url">
<meta property="og:title" content="post title">
<meta property="og:description" content="post description">
<meta property="og:image" content="image url"/>

Related

Facebook share with custom image single page app [duplicate]

I'm dynamically changing my <meta property="og:image" content="#"> and <meta property="og:title" content="#"> tags using jQuery (below). When I view the code via 'inspect' in Chrome, the tags have successfully been changed.
HTML:
<meta property="og:title" content="#">
<meta property="og:image" content="#">
jQuery:
$("meta[property='og:title']").attr("content", data.name);
$("meta[property='og:image']").attr("content", data.thumbnail.url);
But the Facebook debugger tool is still showing content="#" for each. I'm assuming this is because Facebook reads the source code, before Javascript has a chance to replace the content.
Is there a way around this?
Thank you.
Facebook does not parse JavaScript at all, you can´t use dynamic Open Graph tags. It does not really make sense to change them on the fly anyway.
You can only change the OG tags dynamically on the server - obviously. For example: https://yourdomain.com/dynamicogtags.php?title=xxx&description=xxx
<meta property="og:title" content="<?php echo $_GET['title'];?>">
Not sure if that´s what you want to do though, the URL looks pretty ugly that way. Rewrite would be nice, of course.
You also may want to try something like prerender.io, but i am not sure if it will handle dynamic og tags.
As said previously, Facebook doesn't parse JavaScript at all.
One way of doing it (the way I do it) is to use a prerendering service like prerender.io to prerender your pages and redirect requests coming from web crawlers to that prerendering server based on the user-agent (you can easily find how to do that with your Nginx/Apache server on google).
Prerendering services produce an HTML/CSS render of your page, but they wait until the page is fully loaded and the JavaScript is executed before doing so. That way, Facebook gets a render of your website where the JavaScript has been executed and the OpenGraph tags are set correctly!
Prerender is open-source so you can run your own prerender server for free!
Try this it worked for me.
<?php
$params = array();
if(count($_GET) > 0) {
$params = $_GET;
} else {
$params = $_POST;
}
// defaults
if($params['type'] == "") $params['type'] = "restaurant";
if($params['locale'] == "") $params['locale'] = "en_US";
if($params['title'] == "") $params['title'] = "default title";
if($params['image'] == "") $params['image'] = "thumb";
if($params['description'] == "") $params['description'] = "default description";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Open Graph meta tags -->
<meta property="fb:app_id" content="MY_APP_ID" />
<meta property="og:site_name" content="meta site name"/>
<meta property="og:url" content="http://URL/index.php?type=<?php echo $params['type']; ?>&locale=<?php echo $params['locale']; ?>&title=<?php echo $params['title']; ?>&image=<?php echo $params['image']; ?>&description=<?php echo $params['description']; ?>"/>
<meta property="og:type" content="MY_APP_NAME_SPACE:<?php echo $params['type']; ?>"/>
<meta property="og:locale" content="<?php echo $params['locale']; ?>"/>
<meta property="og:title" content="<?php echo $params['title']; ?>"/>
<meta property="og:image" content="http://URL/img/<?php echo $params['image']; ?>.png"/>
<meta property="og:description" content="<?php echo $params['description']; ?>"/>
</head>
</html>

How to change meta tags in a joomla site?

I want to change og code from my joomla site. Meta tag is showing
<meta property="og:image" content="http://119.18.55.52/~videosco/images/video_thumb/funnycat_thumb.jpg" />
This is not a video thumbnail. It is a simple image, that i provide in a article.
I'm using ja_fubix template. When I click on share button only that image is shown which i added in my article.
Please help me out to show a video thumbnail.
Try this ,
$doc = JFactory::getDocument();
$doc->addCustomTag( '<meta property="og:title" content="'.$shareTitle.'" />' );
$doc->addCustomTag( '<meta property="og:description" content="'.$shareDesc.'" />' );
$doc->addCustomTag( '<meta property="og:image" content="'.$shareImg.'" />' );
For more read.
Hope its helps..

Seriously, do Facebook thumbnails actually work?

I see a TON of questions on here and around the web in general about how to set these Facebook thumbnails. Most answers involve the og: meta tags, but I'm just not convinced this works. To be fair, it could be Facebook's fault, but I'm pretty sure I have the code written out properly. Can anyone tell me if something is wrong?
The website: http://nopadc.com/
Here is what I have in my header.php file (this is a Wordpress website BTW):
<?php if( get_option('spark_logo') ): ?>
<meta property="og:image" content="<?php echo get_option('spark_logo'); ?>">
<link rel="image_src" href="<?php echo get_option('spark_logo'); ?>">
<?php endif; ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
And here is what is output in the source:
<meta property="og:image" content="http://nopadc.com/wp-content/uploads/2013/04/logo-nopa.png">
<link rel="image_src" href="http://nopadc.com/wp-content/uploads/2013/04/logo-nopa.png">
<meta property="og:title" content="NoPA">
<meta property="og:description" content="An American brasserie in the heart of Penn Quarter.">
I have made sure the logo URL is correct. I have tried this without the < link > tag and tried linking to the website on Facebook on the first, second, and third day after the change. The same goes for having the < link > tag. I noticed some solutions mentioned that Facebook could take up to a day to rescrape for images, that's why I gave it three days with each change.
In any case I cannot tell what is wrong with this code. Unless there is some other Javascript library to include on the website, what am I missing? Or is this just Facebook not scraping the site correctly?
I seriously doubt there's anything wrong with Facebook.
Try using this plugin: Easy Facebook Share Thumbnails

How do I stop facebook sharer.php from ignoring numbers from the target url?

This is the url that I want the user to be able to share:
http://dealsfortherich.com/product/6379316
So my application (PHP) constructs this URL:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F6379316
If you check out that link, you will see that the product number has been truncated.
Sharer.php is ignoring the number after the slash (%2F)
If I make that number alpha-number, it works:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F6379316X
or
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2FX6379316
or
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F637X9316
Adding the trailing slash doesn't help:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F6379316%2F
Obviously, I can write a condition in my application to handle a url like:
http://dealsfortherich.com/product/6379316X
But then I have duplicated content as far as search engines are concerned.
Should I just give up and do it without using sharer.php?
Figured it out!
The problem was that facebook was not scraping the page:
http://dealsfortherich.com/product/6379316
The facebook object debugger was showing that the scraper was seeing a canonical name of:
http://dealsfortherich.com/product/
This was happening even though I issued:
remove_action('wp_head', 'rel_canonical');
before calling wordpress' get_header() (which in turn calls wp_head()), which should have been removing the wrong canonical link.
The problem was that the filter fb_meta_tags (from a plug-in) was adding a bunch of OG tags before the OG tags that I thought I was setting!
Sure enough, one of the tags beting set was:
<meta property="http://ogp.me/ns#url" content="http://dealsfortherich.com/product/" />
This is how I solved it, in my php, before get_header() is called:
add_filter( 'fb_meta_tags', 'remove_og_tags' );
function remove_og_tags( $meta_tags )
{
$meta_tags['http://ogp.me/ns/fb#app_id'] = null;
$meta_tags['http://ogp.me/ns#type'] = null;
$meta_tags['http://ogp.me/ns#title'] = null;
$meta_tags['http://ogp.me/ns#image'] = null;
$meta_tags['http://ogp.me/ns#description'] = null;
$meta_tags['http://ogp.me/ns#url'] = null;
return $meta_tags;
}
That prevented the wrong OG tags from getting added before I added mine:
<link rel="canonical" href="<?php echo $page_path; ?>"/>
<meta property="fb:app_id" content="xxxxxxxxxxxxx" />
<meta property="og:type" content="product" />
<meta property="og:title" content="<?php echo $the_title; ?>" />
<meta property="og:image" content="<?php echo $image_url; ?>" />
<meta property="og:description" content="<?php echo $tweet_text.$the_title; ?>" />
<meta property="http://ogp.me/ns#url" content="<?php echo $page_path; ?>" />
Everything is now working beautifully.

Wordpress thumbnail and meta data being ignored when posting to facebook wall

I'm having a problem that I can't seem to figure out, though I'm not sure if I'm on the right track. Can anyone please advise?
I've just created a wordpress website, that post's will be shared on facebook.
I'm using featured images and I would like my featured image facebook thumbnail to be used.
It seems when I post a link to facebook, facebook just picks up images on the page and you can choose a thumbnail.
I'm not really up for that because the images are landscape and don't look good. So I started looking into meta tag with the open graph property to see if I could dynamically populate the content that facebook captures when posting a link to the wall.
This is what I tried...
<meta name="description" content="" />
<meta name="author" content="" />
<meta charset="utf-8" />
<meta property="fb:app_id" content="0000000000000000" />
<?php if ( is_single() || is_page() ) { ?>
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<meta property="og:image" content="<?php $fbthumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'facebook-thumb' ); echo $fbthumb[0]; ?>" />
<meta property="og:site_name" content="myblog.co.uk"/>
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<?php } ?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
But all of this is ignored!!!
Can anyone help me understand how to control the content facebook draws in via a link being posted to a wall. I would appreciated your help very much.
Thanks
I had this problem the other day. Facebook wants og:images to be larger than 200px in both directions, or it will ignore them. I found I got the best result when I used wp_get_attachment_image_src($img.ID, 'large')
Have you tried looking at your site with the Facebook Debugger to see what it has to say about your site? https://developers.facebook.com/tools/debug