Question

我在大学里学习HTML5和CSS3，我需要在我的页面上放置一个Facebook Like按钮。我做了教科书指示的所有内容，并从Facebook Developer获得了代码，但它不会出现。感谢帮助！

HTML：

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Lakeland Reeds Bed &amp; Breakfast</title>
      <!-- 
         Lakeland Reeds Bed & Breakfast main web page
         Filename: index.html

         Author: Daniel Carter  
         Date:   5/3/2017   
         HTML5 and CSS3 Illustrated Unit N, Lessons
      -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <script src="modernizr.custom.40753.js"></script>
      <link href='http://fonts.googleapis.com/css?family=Bitter:400,700' 
rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="styles.css">
      <link rel="shortcut icon" href="images/favicon.ico">
      <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
      <link rel="icon" sizes="192x192" href="images/android.png">
   </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/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
      <p class="skipnavigation"><a href="#contentstart">Skip navigation</a>
</p> 
      <header>
         <h1><img src="images/lakeland.gif" width="659" height="165" 
alt="Lakeland Reeds Bed and Breakfast"></h1>
      </header>
      <nav class="sitenavigation">
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="reserve.html">Reservations</a></li>
            <li><a href="events.html">Events</a></li>
            <li><a href="http://wxug.us/1hn14">Weather</a></li>
         </ul>
         <div class="fb-like" data-href="https://facebook.com/cengagebrain" 
         data-width="20px" data-layout="button" data-action="like" data-
         size="small" data-show-faces="true" data-share="false"></div>
         <a href="https://twitter.com/share" class="twiter-share-button" 
         data-text="Sweet BnB in Northern MN!" data-count="non>Tweet</a>
         <script>!function(d,s,id){var js,fjs=d.getElementsByTagName (s) 
         [0],p=/^http:/.test(d.location)?'http':'https'; 
         if(!d.getElementById(id))
         {js=d.createElement(s); 
         js.id=id;js.src=p+'://platform.twitter.com/widgets.js'; 
         fjs.parentNode.insertBefore(js,fjs);}} (document, 'script', 
         'twitter-wjs');</script>
      </nav>
      <article id="contentstart">
         <div class="no-heading">
            <figure>
               <a href="rooms.html#sun"><img src="images/sun.jpg" 
width="370" height="278" alt="room with a hardwood floor, bright windows on 
two sides, and a two-person bed with a bedside table and lamp on each side">
</a>
            <figcaption><a href="rooms.html#sun">Sun Room</a>
</figcaption>
            </figure>
            <p class="pullquote"><span class="accent">Lakeland Reeds</span> 
is a rustic bed and breakfast on Twin Lakes near rural Marble, Minnesota. 
Convenient to US 2 and 169, the fresh air and quiet make for an ideal 
weekend escape from the rush of city life.</p>
         </div>
      </article>
      <footer>
         <p>45 Marsh Grass Ln. &bull; Marble, MN 55764 &bull; (218) 555-
         5253</p>
      </footer>
   </body>
</html>

Answer 1

您的Twitter分享按钮存在一些问题。

按钮的类拼写错误，twiter-share-button 应为twitter-share-button。
属性data-count应为data-show-count和值应为"false"，您将其设置为"non"并且您遗失了该值的右引号。
删除您当前为twitter按钮提供的javascript 并在按钮html后添加<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>。

可以找到更多信息here（向下滚动并点击“Twitter按钮”部分）

Facebook和Twitter按钮不会出现在我的页面中

1 个答案: