Link to home
Start Free TrialLog in
Avatar of Pedro Chagas
Pedro ChagasFlag for Portugal

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:User generated image
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>

Open in new window

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>

Open in new window

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>

Open in new window

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" />

Open in new window

and this is the image of share window:User generated imageWhat is wrong in my code? Or what is wrong in entire process?

The best regards, JC
Avatar of rbudj
rbudj
Flag of United States of America image

First and foremost you do not have a doctype set. Add this above your <html> tag and test:

<!DOCTYPE html>
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Pedro Chagas

ASKER

Hi @rbudj,
Like you can see in my snippet code, the first line is "<!DOCTYPE html>"!

~JC
Indeed. My apologies.