I want to share a link on Google plus posts with parameters Title, Image and Description.
But even this simple code doesn't work for me.
Issue is that:
Image is not shown,
Title is not shown,
Description is not shown.
For Test Purpose here is the link of of site for this code.
http://getreferralace.com/gonawazgo.php
<html>
<head>
<title>Basic page</title>
<link rel="canonical" href="http://www.getreferralace.com/campagins_view?id=21" />
<meta property="og:title" content="This is Referral Ace" />
<meta property="og:description" content="This is decription for Referral Ace" />
<meta property="og:url" content="http://www.getreferralace.com/campagins_view?id=21" />
<meta property="og:image" content="http://www.getreferralace.com/campaign_images/Tulips.jpg" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
</head>
<body>
Share
</body>
</html>
Your href tag is not sharing the correct link to google plus:
The link your sharing is: http://www.getreferralace.com/campagins_view?id=21 which results in a 404 error page.
So you can use the below link:
Share
Discription is not shown.
Everthing else is working fine.
<html>
<head>
<title>Basic page</title>
<link rel="canonical" href="http://www.getreferralace.com/gonawazgo.php" />
<meta property="og:title" content="This is Referral Ace" />
<meta property="og:description" content="This is decription for Referral Ace" />
<meta property="og:url" content="http://www.getreferralace.com/gonawazgo.php" />
<meta property="og:image" content="http://www.getreferralace.com/campaign_images/Tulips.jpg" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
</head>
<body class="body_style" itemscope itemtype="http://schema.org/Product">
<div class="abc" style="display: none;">
<h1 itemprop="name">Title Pizza</h1>
<img itemprop="image" src="http://www.getreferralace.com/campaign_images/Tulips.jpg" />
<p itemprop="description">This is decription for Referral Ace</p>
</div>
Share
</body>
</html>
</html>
Related
I am developing my personal portfolio . I am facing a problem that is ..
I have placed all the important meta tags in my header.php file and they're visible in the page source code too .. But they are not working . I got to know this when I placed the Meta OG to get the link preview on social sites.
Here's the image of my the website from where I am checking the rich link preview
And here's my website source code image in which you can clearly see the meta tags included
If something isn't clear from the image then here's the link of my website
EDIT : Here's the code of my website's head section
<!DOCTYPE html>
<html lang="en">
<head>
<?php
global $baseUrl;
$baseUrl='https://www.iamosama.cf/' ;
?>
<!-- Basic -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Osama - Web Designer and Developer</title>
<meta name="description" content="Hello , I am Osama . A creative web designer and developer from Karachi , Pakistan" />
<meta name="keywords" content="Web Designer , Web developer , Front end Developer , UI/UX Designer" />
<meta property="og:site_name" content="Osama - The Web Developer" />
<link rel="shortcut icon" href="<?php echo $baseUrl ; ?>images/favicons/favicon.ico" />
<meta property="og:title" content="Personal Portfolio" />
<meta property="og:description" content="Hello , I am Osama . A creative web designer and developer from Karachi , Pakistan " />
<meta property="og:image" content="<?php echo $baseUrl ; ?>images/thumb.jpg" />
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script%7CPoppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/basic.css" />
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/layout.css" />
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/blogs.css" />
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/ionicons.css" />
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/magnific-popup.css" />
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/animate.css" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicon -->
<script type="application/ld+json">
{
"#context": "http://schema.org/",
"#type": "Person",
"name": "Osama",
"alternateName": "Muhammad Osama",
"url": "https://www.iamosama.cf/",
"image": "https://www.iamosama.cf/images/profile.jpg",
"sameAs": "https://www.iamosama.cf/",
"jobTitle": "Web Designer and Developer"
}
</script>
</head>
I am trying to make a facebook share button popup within the same page to share a specific link based on the specific url , i used this code and it works but all it gives me is the url. I would like it to look like this
my current code i have is this
<li> <a
id="fb-share"
style='text-decoration:none;'
type="icon_link"
onClick="window.open(
'http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]='
+ 'YOUR_DESCRIPTION&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE',
'sharer',
'toolbar=0,status=0,width=580,height=325');"
href="javascript: void(0)"
>
<img class="logo" src="images/facebook.png" width="60" height="50" alt="Our Facebook Page "></a></li>
it only displays the correct url.Not the title , description or image. The images, and description and title comes from the db
<meta property="og:title" content="<?php echo title; ?>">
the other issue is the
<meta property="og:image"
must this be a url or can it come from the db similar to the og:title? as each main image must be displayed differently based on specific url.
i currently have this , will this be able to display the image , i do see the image name
<?php echo '<meta property="og:image" content="' . $image . '"/>'; ?>
Expected OG tags format,
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Read more
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 have a image tag that gets a php variable from another page,
<img src="<?php echo urldecode($_GET['pic']); ?>" width="100%" alt="" />.
It works fine. I would like to know how to take that and make it work with the meta tags og:image and itemprop="image". I've tried several ways, but had no luck.
Thanks,
Darrell
It needs to be in the HTML head.
Here is a modified example from http://ogp.me/
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="<?php echo urldecode($_GET['pic']); ?>" />
...
</head>
...
</html>
i am using jquery think box as light box it works in normal but if i loop though a php it fails..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Description" content="ThickBox is a webpage UI dialog widget written in javascript on top of the jQuery library. It's function is too show a single image, multiple images, inline content, iframed content, and content served through AJAX in a hybrid modal." />
<meta name="author" content="Cody Lindley" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="false" />
<title>ThickBox 3.1</title>
<style type="text/css" media="all">
#import "css/global.css";
#import "thickbox-code/thickbox.css";
</style>
<link rel="alternate stylesheet" type="text/css" href="css/1024.css" title="1024 x 768" />
<link rel="alternate stylesheet" type="text/css" href="css/thickbox.css" title="1024 x 768" />
<script src="js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="js/thickbox-compressed.js" type="text/javascript"></script>
<script src="js/global.js" type="text/javascript"></script>
<script src="js/thickbox.js" type="text/javascript"></script>
</head>
<body id="pageTop">
<?php
for($i=0;$i<10;$i++)
{?>
<?php echo $i;?>
<div id="hiddenModalContent" style="display:none">
<p><?php echo $i;?></p>
<p style="text-align:center"><input type="submit" id="Login" value=" Ok " onclick="tb_remove()" /></p>
</div>
<?php
}
?>
can any one tell me how can i do that
Add a rel tag to the link ie. rel="gallery". That should do the trick.
See "Give each link element the same rel element and value. (Example: rel="gallery-plants")" at http://jquery.com/demo/thickbox/