Thumbnails for posts of my site https://business-students.net/ is not appearing in Facebook.
When I share a link on Facebook, It shows the correct preview of the link thumbnail, but when posted, Thumbnail disappears. (see below)
Post Link for example: https://business-students.net/f3-fa-mcqs-quiz-1-acca/
Screenshot before posting/sharing a link. (preview)
Screenshot after posting/sharing a link.
Even Facebook debugger shows a correct image of the post. See this.
But it disappears when it is shared on facebook. [see 2]
Even, the homepage of the site doesn't show any thumbnail image there.
(See here.)
I tried to scrape so many times but no use.
I thought My website might be missing Meta Tag for Social Media, So I added these
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo current_url(); ?>" />
<meta property="og:description" content="<?php echo $seo_description; ?>" />
<meta property="og:keywords" content="<?php echo $seo_keywords; ?>" />
<meta property="og:image" content="<?php echo $thumb; ?>" />
<meta property="og:image:secure_url" content="<?php echo $thumb; ?>" />
<link rel="image_src" href="<?php echo $thumb; ?>" />
<meta name="description" content="YOUR_DESCRIPTION_HERE" />
<meta name="keywords" content="YOUR_KEYWORDS_HERE, SEPERATED_BY_COMA" />
<meta content='English' name='language'/>
<meta http-equiv="content-language" content="en-us"/>
<html lang="en-us"/>
<title lang="en-us"/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex, nofollow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='keywords'/>
<meta content='index, follow' name='robots'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta content='global' name='distribution'/>
<meta content='1 days' name='revisit'/>
<meta content='1 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='en-us' name='language'/>
<meta content='USA' name='country'/>
<meta content='#twitter.com/example.Com' name='twitter:site'/>
<meta content='#example.Com' name='twitter:creator'/>
<meta content='example.Com' name='author'/>
<meta content='contact#example.Com' name='email'/>
</b:if>
But still the issue is not resolved.
Please help to resolve this strange issue.
I think because the image has been changed since, You would need to run it through the Facebook sharing debugger.
https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fbusiness-students.net%2Ff3-fa-mcqs-quiz-1-acca%2F
Once I clicked 'Scrape Again' it updated to the newest image.
Related
I've got a share button that I am trying to modify to my specific needs. Here is the code.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<html>
<meta property="fb:app_id" content="lotsanumbers" />
<meta property="og:title" content="FOR SALE"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.website.com.au/php_test.php"/>
<meta property="og:image" content="http://www.website.com.au/ddfut14-1148.jpg"/>
<meta property="og:description" content="http://www.website.com.au/php_test.php<?php echo $title; ?>" />
Everything is working as requires except for the og:description. When I debug in facebook facebook is only seeing
<meta property="og:description" content="http://www.website.com.au/php_test.php
it is not scraping
<?php echo $title; ?>
from the same line what am I missing?
og:description is a tag that should contain text, you should be doing like:
<meta property="og:description" content="<?php echo $title; ?>" />
//where $title should be a defined variable that contains some text
or
<meta property="og:description" content="<?php echo file_get_contents("http://www.website.com.au/php_test.php"); ?>" />
//where your php_test.php file should echo out text
<html lang="en">
<head>
<?php
$th = $_GET['th'];
?>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Test"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.rapsodia.com/ar/admin/shares.php "/>
<meta property="og:site_name" content="Rapsodia Verano 15'"/>
<meta property="og:description" content="Test"/>
<meta property="og:image" content="http://www.rapsodia.com/ar/img/lookbook/<?php print $th; ?> "/>
<title>Rapsodia 2015</title>
</head>
<body>
<img src="http://www.rapsodia.com/ar/img/lookbook/<?php echo $th; ?>">
</body>
</html>
If I enter this:
http://www.rapsodia.com/ar/admin/shares.php?th=09.jpg
at
https://developers.facebook.com/tools/debug/og/object/
I get
<meta property="og:title" content="Test" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.rapsodia.com/ar/admin/shares.php " />
<meta property="og:site_name" content="Rapsodia Verano 15'" />
<meta property="og:description" content="Test" />
<meta property="og:image" content="http://www.rapsodia.com/ar/img/lookbook/ " />
for some reason the php variable is not making its way in to the facebook server :(
If I go to http://www.rapsodia.com/ar/admin/shares.php?th=09.jpg
manually everything works just fine :(
How can I make this work? I really dont know what else to try. I really must have dynamic og tags or else I will probably get fired or something.
<html lang="en">
<head>
<?php
$th = $_GET['th'];
?>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Test"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.rapsodia.com/ar/admin/shares.php?th=<?php print $th; ?> "/>
<meta property="og:site_name" content="Rapsodia Verano 15'"/>
<meta property="og:description" content="Test"/>
<meta property="og:image" content="http://www.rapsodia.com/ar/img/lookbook/<?php print $th; ?> "/>
<title>Rapsodia 2015</title>
</head>
<body>
<img src="http://www.rapsodia.com/ar/img/lookbook/<?php echo $th; ?>">
</body>
</html>
As WizKid pointed out, I had to also include the parameters in the og:url and it works!
I got a wordpress "single-page" with different posts on it, that doesnt need to reload. A post is loaded in when you click on a post name without reloading the whole page.
All posts have a individual ID & subURL though. Each post also has share buttons for facebook, twitter, google+, linkedin and xing.
I want to provide the shares with the information about the individual post the user wants to share, for example ID, image, some text content and so on.
This is what my share buttons look like atm:
<div class="share-twitter">
<img src="exampleimg.jpg">
</div>
Now I read in another article here on stackoverflow that i should use meta tags to give them the information.
This is how i tried to do this:
<!-- for Google -->
<meta name="description" content="<?php the_content();?>" />
<meta name="keywords" content="app" />
<meta name="author" content="<?php the_author();?>" />
<meta name="copyright" content="corporate name" />
<meta name="application-name" content="<?php the_title();?>" />
<!-- for Facebook -->
<meta property="og:title" content="<?php the_title();?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="imgexample.png" />
<meta property="og:url" content="http://example.de/%23/?p=<?php the_id();?>/<?php the_title();?>" />
<meta property="og:description" content="<?php the_content();?>" />
<!-- for Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<?php the_title();?>" />
<meta name="twitter:description" content="<?php the_content();?>" />
<meta name="twitter:image" content="imgexample.png" />
Well, my actual problem now is that the meta tags I added change nothing. the link URL is provided correctly as before, cause i already do this with href, but it still uses a random img of the page, no content provided or anything else I provided over the meta tags...
Any clues why this doesnt work?
Try this:
<php if(is_single()) { ?>
<meta property="og:image" content="<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), '' ); ?>" />
<?php } else { ?>
<meta property="og:image" content="imgexample.png" />
I am trying to share songs on facebook via niftyplayer. this is my open graph code.
<meta property="og:image" content="IMAGE_LINK" />
<meta property="fb:app_id" content="XXXXXXXXXXXXXXXXX">
<meta property="og:title" content="<?= $songs['title']; ?>">
<meta property="og:description" content="<?= $songs['description'] ?>">
<meta property="og:type" content="video">
<meta property="og:site_name" content="<?= $song['name'] ?> - <?= SITE_NAME ?>">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video" content="http://<?= S3_BUCKET; ?>/niftyplayer/niftyplayer.swf?file=<?= 'http://' . S3_BUCKET . '/music/'. $songs['link'] . '&as=0'; ?>">
<meta property="og:video:width" content="300">
<meta property="og:video:height" content="75">
I used facebook debuger and everything looks OK. but it is not. it is not loading even the image or the player.
thanks in advance.
I found the problem. It was the app_id for some reason facebook does not like the app_id and i have to remove in order to make the player working.
Thanks.
I have a dynamic PHP page that basically displays a video. When a Facebook user clicks on the video, a timeline event is posted to their Facebook profile, but my OG meta tags don't seem to want to cooperate with the PHP variables the video information is stored in.
If I type the correct strings directly into the meta tags, everything works great, but the page by design picks a video from my Database.
These are the current tags with PHP Variables included:
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# visiovert: http://ogp.me/ns/fb/visiovert#'>
<meta property='fb:app_id' content='261459743887413'>
<meta property='og:type' content='visiovert:advertisement'>
<meta property='og:url' content='http://visiovert.net/ad.php'>
<meta property='og:site_name' content='VisioVert'>
<?php
echo("<meta property=\"og:title\" content=\"".$Video->title."\" />\n");
echo("<meta property=\"og:description\" content=\"".$Video->description."\" />\n");
echo("<meta property=\"og:image\" content=\"".$Video->location.".jpg\" />\n");
echo("<meta property=\"og:video\" content=\"".$Video->location.".mp4\" />\n");
?>
<meta property='og:video:height' content='432' >
<meta property='og:video:width' content='768'>
</head>
If you view the page source, this is what you can see in the header:
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# visiovert: http://ogp.me/ns/fb/visiovert#'>
<meta property='fb:app_id' content='261459743887413'>
<meta property='og:type' content='visiovert:advertisement'>
<meta property='og:url' content='http://visiovert.net/ad.php'>
<meta property='og:site_name' content='VisioVert'>
<meta property="og:title" content="Echo" />
<meta property="og:description" content="An example video ad for VisioVert." />
<meta property="og:image" content="http://visiovert.net/Videos/echo.jpg" />
<meta property="og:video" content="http://visiovert.net/Videos/echo.mp4" />
<meta property='og:video:height' content='432' >
<meta property='og:video:width' content='768'>
</head>
That matches exactly what I would like it to, but when testing using the Facebook Object Debugger, it is not getting anything out of PHP variables. I could be missing something right in front of me...but I've looked around and haven't found an answer.
Veliisx
try adding fb namespace to your html tag.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xmlns:shawnsspace="http://www.shawnsspace.com/ns#">
p.s. in your source only half of the tags are closed. Not sure if this would be ignored but will cause errors in some browsers.
I often have issues with escaping too, have you tried something like below to avoid the heavy escaping?
The below is basicly how dynamically add my meta, i know its a bit more code to echo each but it avoids a lot of confusion with escaping.
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# visiovert: http://ogp.me/ns/fb/visiovert#'>
<meta property='fb:app_id' content='261459743887413'>
<meta property='og:type' content='visiovert:advertisement'>
<meta property='og:url' content='http://visiovert.net/ad.php'>
<meta property='og:site_name' content='VisioVert'>
<meta property="og:title" content="<?php echo $Video->title; ?>" />
<meta property="og:description" content="<?php echo $Video->description; ?>" />
<meta property="og:image" content="<?php echo $Video->location; ?>.jpg" />
<meta property="og:video" content="<?php echo $Video->location; ?>.mp4" />
<meta property='og:video:height' content='432' >
<meta property='og:video:width' content='768'>
</head>