2017-10-05 89 views
1

首先,我已經閱讀了this,thisthis以及其他許多關於「Twitter按鈕不呈現」的內容。他們都沒有解決我的問題。Twitter「關注」按鈕不會出現。只有文字

我有兩個互相靠近的Twitter按鈕。 Tweet按鈕呈現完好,Follow按鈕不呈現。無論是FF還是Chrome,都不會向控制檯投放錯誤或警告。 Twitter部件<script>代碼是好的 - 我複製/粘貼它,沒有錯別字或任何東西。

enter image description here

顯然,這個問題已經沒有任何關係,Twitter的插件,因爲顯示的「分享Tweet」按鈕就好在頁面沒有加載。

但是有一個奇怪的類名稱,Twitter添加到<a>按鈕元素 - twitter-follow-button-error。整個Google對這個類只有兩個結果,都是無關緊要的。 Twitter API文檔沒有提到任何有關它的信息。

它可能是什麼?這是原因嗎?如何解決它?

<div key={key}> 
    {/* Follow doesn't render */} 
    <a className="twitter-follow-button" 
     href={href} data-size="large" 
     data-show-screen-name="true" 
     data-show-count="true">Follow</a> 

    {/* Tweet renders all right */} 
    <span className={`${css.btn_dist}`}> 
     <a className="twitter-share-button" 
      href={href} 
      lang="en" 
      data-size="large">Tweet</a> 
    </span> 
</div> 

enter image description here

+0

而你的'href'變量指向的東西,實際上可以遵循......? – CBroe

+0

是的,它的確如此。這是一個活躍的直播公衆Twitter帳戶 – Green

+1

我沒有這方面的經驗,但你可以嘗試prittyfy twitter JavaScript,並在chrome開發工具中使用control + shift + f並查找twitter後續錯誤。也許你可以在JavaScript中找到它,打破它,看看它出了什麼問題。網絡中提供額外信息的任何xhr失敗? – HMR

回答

1

我可以重現鍍鉻61.0.3163.100(正式版本)(64位)的錯誤。

當你按下F12並加載它會在Twitter上的JavaScript拒絕承諾c.reject(new Error("cannot hydrate widget before it is initialized"))

有在控制檯中沒有錯誤打破了頁,但它會暫停這個錯誤在我的Chrome版本。

<a class="twitter-follow-button" 
    href="http://www.wut.com" data-size="large" 
    data-show-screen-name="true" 
    data-show-count="true">Follow</a> 

    <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script> 

當使用一個有效的href錯誤消失:後續鏈接使用下面的代碼有一個twitter-follow-button-error

<a class="twitter-follow-button" 
    href="https://twitter.com/TwitterDev" data-size="large" 
    data-show-screen-name="true" 
    data-show-count="true">Follow</a> 

    <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script> 

確保您的開發工具暫停在異常(我沒得檢查暫停捕獲的例外)

+0

是的。這是帳戶網址「https:// twitter.com/TwitterDev /'中的尾部斜線。只是一個尾隨的斜線。協議('http:'或'https:')和字母大小寫無關緊要。但是,所有的事情都會引發尾隨的斜線。 – Green

+0

你怎麼能調試它,以便你可以看到錯誤?我的控制檯沒有打印任何錯誤或警告。你是怎麼做到的?_當你按F12並加載page_? – Green

+1

@Green我將上面的代碼添加到現有項目的一個頁面中,並使用localhost:8080上的webpack dev服務器運行它(但您可以運行我認爲的任何服務器)。打開開發工具並重新加載。也許在失敗的承諾中突破是最新的谷歌瀏覽器所做的事情,我沒有選中「暫停捕獲異常」複選框(在源代碼標籤中) – HMR