Google 加号按钮未显示

Question

我是网页设计的新手，一直在通过这样的论坛学习，但到目前为止还没有找到解决我遇到的一个非常烦人的错误的答案。我正在使用 Google Chrome Canary 47.0.2506.0 进行渲染，使用 Notepad++ 进行编辑，但无法显示 Google Plus 跟随按钮。我完全从 Google 开发者页面复制了代码，并尝试了所有方法：我确保 JavaScript 已启用，是的，我什至重新安装了 chrome。我的代码是这样的：

Header:

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

Answer 1

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

当作为 div 单独隔离时，您正在正确实施 google+ 标记。

最后，以防万一您的代码只是一个缺少 <body> 元素的复制粘贴错误，如果您不是从实际的网络服务器预览您的代码，而只是访问您的 HTML 文件通过“file:///”而不是“http://”（即您没有访问您的 html 文件通过实际的网络服务器，如 Apache 等），那么浏览器可能会由于安全问题而阻止 google+ 服务。例如，我之前在尝试实现 Facebook 共享按钮时遇到过这个问题，但试图从计算机的硬盘驱动器而不是通过某种类型的网络服务器服务预览 HTML 文件（即使它正在访问本地主机上的网络服务器）。

例如，虽然您的页面布局确实看起来有点破损，但在此处的 codePen 等网络服务上查看时，google plus 元素可以正常工作：http://codepen.io/anon/pen/xwwQeM

Google 加号按钮未显示

Google Plus button not showing up

javascript

google-plus