Facebook和Twitter按鈕不會顯示在我的頁面

我在大學學習HTML5和CSS3，我需要在我的頁面上放置一個Facebook Like按鈕。我做了教科書指示的所有內容，並從Facebook Developer獲得了代碼，但它不會顯示。幫助表示讚賞！Facebook和Twitter按鈕不會顯示在我的頁面

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

來源

2017-05-03 Daniel

您使用的廣告攔截瀏覽器擴展（向下滾動，然後點擊「Twitter的按鈕」一節）？其中一些塊社交媒體按鈕 – Trug

僅僅用HTML就無能爲力。 –

@Trug我在Chrome上找不到任何廣告屏蔽擴展程序。另外，出於某種原因，當我添加Twitter按鈕時，它改變了整個頁面的外觀。 – Daniel

有一些問題與自己的Twitter分享按鈕。

該按鈕的類被拼錯了，twiter-share-button 應該twitter-share-button。
屬性data-count應data-show-count和值應該是"false"，你必須將其設置爲"non"和你缺少右引號該值。
刪除您目前使用的按鈕按鈕的javascript，並在按鈕html之後添加<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>。

更多信息，可以發現here

來源

2017-05-04 14:45:21 Trug

Facebook和Twitter按鈕不會顯示在我的頁面

回答

相關問題