我是网页设计的新手，并且已经通过这样的论坛学习，到目前为止还没有找到我真正烦恼的错误的答案。我使用Google Chrome Canary 47.0.2506.0进行渲染，Notepad ++进行编辑，并且无法显示Google Plus跟随按钮。我完全从Google Developers页面复制了代码，并尝试了所有内容：我确保启用了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>
答案 0 :(得分：1)
查看整个页面的代码，除非出现错误，否则您没有包含文档主体的<body>元素。
如果将其自身隔离为div，则表示您正在正确实施Google +标记。
最后，如果您的代码只是缺少<body>元素的复制和粘贴错误，如果您没有从实际的网络服务器预览代码，只是通过“< strong> file：/// “而不是” http：// “（即您不是通过像Apache这样的实际网络服务器访问您的html文件），然后是浏览器由于安全问题，可能会阻止Google +服务。例如，我在尝试实现Facebook共享按钮之前已经看过这个问题，但尝试从计算机的硬盘驱动器而不是通过某种类型的Web服务器服务预览HTML文件（即使它正在访问localhost上的web服务器） ）。
例如，虽然您的网页布局确实看起来有点破碎，但是在像codePen这样的网络服务上查看时，google plus元素正常工作：http://codepen.io/anon/pen/xwwQeM