Pedro Chagas
asked on
Facebook Share Website Content
Hi E's,
I have a website and I want implement the Facebook Share Button.
I following the examples in Facebook Developers Site: Facebook Developers:
My example is located in my website, and this is the code:
The best regards, JC
I have a website and I want implement the Facebook Share Button.
I following the examples in Facebook Developers Site: Facebook Developers:
My example is located in my website, and this is the code:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Honda Civic Quiz</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css" media="screen">
@import "estilo.css";
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- You can use open graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://www.purefun.tk" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Qual o seu proximo honda" />
<meta property="og:description" content="Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste " />
<meta property="og:image" content="http://www.purefun.tk/imagem/quiz1/2.jpg" />
</head>
<body>
<div id="fb-root"></div>
<script>(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>
<?
include "navbar.php";
?>
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="imagem/quiz1/<? echo "$_GET[r]" . ".jpg"; ?>" alt="honda civic">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="fb-share-button" data-href="http://purefun.tk/quiz1.php?r=2" data-layout="button_count"></div>
</div>
</div>
<?
include "rodape.php";
?>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Navbar.php:
<div class="container example2">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="imagem/logo.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><img src="imagem/br.png" alt="brasil" style="margin-right: 20px;"></li>
<li class="active"><img src="imagem/us.png" alt="estados unidos" style="margin-right: 20px;"></li>
<li class="active"><img src="imagem/es.png" alt="espanha"></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
Rodape.php:
<hr>
<footer>
<div class="row">
<div class="col-md-12" style="text-align: center; margin-bottom: 50px;">
<ul class="nav nav-pills" style="padding: 15px 0 15px 0;">
<a class="fundo_separacao" href="/">home</a>
<a class="fundo_separacao" href="about.php">about</a>
<a class="fundo_separacao" href="politica.php">política</a>
<a class="fundo_separacao" href="contacto.php">contactos</a>
</ul>
</div>
</div>
</footer>
The problem is, when I click in the FB share button, the script don't assume the informations of:
<meta property="og:url" content="http://www.purefun.tk" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Qual o seu proximo honda" />
<meta property="og:description" content="Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste Quiz teste " />
<meta property="og:image" content="http://www.purefun.tk/imagem/quiz1/2.jpg" />
and this is the image of share window:What is wrong in my code? Or what is wrong in entire process?The best regards, JC
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi @rbudj,
Like you can see in my snippet code, the first line is "<!DOCTYPE html>"!
~JC
Like you can see in my snippet code, the first line is "<!DOCTYPE html>"!
~JC
Indeed. My apologies.
<!DOCTYPE html>