Google +按钮没有显示

Google Plus button not showing up

本文关键字：显示 按钮 Google      更新时间：2023-09-26

我是一个网页设计的新手，一直在通过这样的论坛学习，到目前为止还没有找到一个非常恼人的错误的答案。我使用谷歌Chrome金丝雀47.0.2506.0渲染，notepad++编辑，不能得到谷歌+跟随按钮出现。我完全从谷歌开发者页面复制了代码，并尝试了所有方法:我确保JavaScript是启用的，它是，我甚至重新安装了chrome。我的代码是:

头:

    <head>
        <title>iBot Brainiacs</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
        <script src="https://apis.google.com/js/platform.js" async defer></script>
    </head>
page content:
      <main class="mdl-layout__content">
        <div class="page-content">
            </br>
            <div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="https://plus.google.com/107623689080156420982" data-rel="author"></div>
            </br>
(note these are excerpts)
Does anyone have a solution, or a different way to do this?
Thanks
UPDATE: enitre code:
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.red-light_green.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!DOCTYPE html>
<html>
<head><title>iBot Brainiacs</title><link rel="stylesheet" type="text/css" href="stylesheet.css"><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css"><script src="https://apis.google.com/js/platform.js" async defer></script></head>
<!-- Uses a header that contracts as the page scrolls down. -->
<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--waterfall">
    <!-- Top row, always visible -->
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">iBot Brainiacs</span>
      <div class="mdl-layout-spacer"></div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right">
        <a href="mailto:ibotbrainiacs@gmail.com" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
            <i class="material-icons">mail</i>
        </a>
        <div class="mdl-textfield__expandable-holder">
          <input class="mdl-textfield__input" type="text" name="sample"
                 id="waterfall-exp" />
        </div>
      </div>
    </div>
    <!-- Bottom row, not visible on scroll -->
    <div class="mdl-layout__header-row">
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="about.html"><i class="material-icons">subject</i></a>
        <a class="mdl-navigation__link" href=""><i class="material-icons">collections</i></a>
        <a class="mdl-navigation__link" href=""><i class="material-icons">event</i></a>
        <a class="mdl-navigation__link" href=""><i class="material-icons">chat_bubble</i></a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Social Media</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content">
    </br>
<div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="https://plus.google.com/107623689080156420982" data-rel="author"></div>
</br>
        <div class="demo-card-wide mdl-card mdl-shadow--16dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
    </br>
  </div>
  <div class="mdl-card__supporting-text">
    Thank you for visting our website! I hope you enjoy your stay while learning about FLL 
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a href="#Starting"class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
    </br>
  </div>
    </div>
    </br>
    </br>
    </br>
    </br>
    </br>
    <div id="Starting">
        <div class="demo-card1-wide mdl-card mdl-shadow--16dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Getting Started</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Thank you for visting our website! I hope you enjoy your stay while learning about FLL 
  </div>
  <!--about section-->
  <a href="about.html"class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
      <i class="material-icons">subject</i>
    </a>
    <!--images-->
    </br>
    <p align=center>ABOUT</p>
    <a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
      <i class="material-icons">collections</i>
    </a>
    <!--events-->
    </br>
    <p align=center>IMAGES</p>
    <a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
      <i class="material-icons">event</i>
    </a>
    <!--blog-->
    </br>
    <p align=center>EVENT</p>
    <a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
      <i class="material-icons">chat_bubble</i>
    </a>
    </br>b 
    <p align=center>BLOG</p>
  <!--return to top-->
  </br>
  <a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
      <i class="material-icons">keyboard_arrow_up</i>
    </a>
  </br>
  <p align=center>RETURN TO TOP</p>
  </br>
    </div>
    </br>
    </div>
    </div>
  </div>
  </main>
</div>
<script>
    var $userAgent = '';
    if(/MSIE/i['test'](navigator['userAgent'])==true||/rv/i['test'](navigator['userAgent'])==true||/Edge/i['test'](navigator['userAgent'])==true){
       $userAgent='ie';
    } else {
       $userAgent='other';
    }
    if($userAgent==='ie'){
        alert("Oh, it looks like you are using Internet Explorer. Just a heads up: This website may not work on the browser. Consider using another one.")
    }
</script>
</html>

查看整个页面的代码，除非有错误，否则您没有包含文档主体的<body>元素。

当它单独作为div时，您正在正确地实现google+标签。

最后，只是以防你的代码只是一个复制粘贴错误与缺失的<body>元素，如果你不是预览你的代码从一个实际的web服务器，只是通过"file:///"而不是"http://"访问你的HTML文件(即你不是通过一个实际的web服务器如Apache访问你的HTML文件等)，那么浏览器可能会阻止谷歌+服务，因为安全问题。例如，我以前在尝试实现Facebook共享按钮时看到过这个问题，但是试图从计算机的硬盘上预览HTML文件，而不是通过某种类型的web服务器服务(即使它访问本地主机上的web服务器)。

例如，虽然你的页面布局看起来有点破碎，但google +元素在像codePen这样的web服务上查看时是正常的:http://codepen.io/anon/pen/xwwQeM

相关文章：