2015-04-26 168 views
2

我爲社交媒體頁面,Facebook,Twitter和Google+使用三個以下按鈕。唯一的問題是,Facebook和Twitter按鈕上的鏈接不起作用,Google+可以正常工作,但另外兩個鏈接則不起作用,鏈接指的是按鈕,您可以在其中看到關注者/你點擊它作爲一個用戶/它喜歡的頁面,而不必去頁面,但按鈕不會工作,「鏈接鼠標懸停」不會顯示出來(當你將鼠標懸停在鏈接上,鼠標圖標從一隻手的箭頭)。社交媒體上的鏈接按鈕不會工作

我直接從Facebook和Twitter提供的開發工具包中取得了代碼。重要說明,我使用css來移動按鈕,但如果我選擇不使用css來移動它們,並將它們保留在默認放置的隨機位置,則鏈接將起作用,所以我認爲可能存在問題那裏。

我已經刪除了關於後續頁面的鏈接,但鏈接仍然可以工作,因爲它是「href」,所以不要介意。

的html代碼:

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://apis.google.com/js/platform.js" async defer></script> 
</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.3"; 
      fjs.parentNode.insertBefore(js, fjs); 
      }(document, 'script', 'facebook-jssdk'));</script> 


     <div id="header"> 
     </div> 

     <div id="container"> 

     <div id="content"> 

     </div> 

     </div> 

     <div id="footer"> 

     <div class="twitterTextForButton"> 
      Twitter 
     </div> 

     <div class="twitter-follow"> 
      <a class="twitter-follow-button" 
      href="https://twitter.com/" 
      data-show-count="true" 
      data-lang="en" 
      data-show-screen-name="false"> 
      Follow 
      </a> 
     </div> 

      <script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script> 


     <div class="facebookTextForButton"> 
      Facebook 
     </div> 
      <div class="fb-like" data-href="https://test.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> 

     <div class="googlePlusTextForButton"> 
      Google+ 
     </div> 

     <div class="moveGooglePLogo"> 
     <div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/test" data-rel="author"></div> 
     </div> 

     </div> 

     </div> 

</body> 

</html> 

CSS代碼:

.fb-like { 
     position: absolute; 
     left: 50%; 
     margin-left: 35px; 
     bottom: -50px; 
    } 

    .twitter-follow{ 
     position: absolute; 
     left: 50%; 
     margin-left: 180px; 
     bottom: 126px; 
    } 

    .moveGooglePLogo{ 
     position: absolute; 
     left: 50%; 
     margin-left: 325px; 
     bottom: 126px; 
    } 

.facebookTextForButton{ 
    position: absolute; 
    color: #ffffff; 
    top: 30px; 
    left: 50%; 
    margin-left: 35px; 
} 

.twitterTextForButton{ 
    position: absolute; 
    color: #ffffff; 
    top: 30px; 
    left: 50%; 
    margin-left: 180px; 
} 

.googlePlusTextForButton{ 
    position: absolute; 
    color: #ffffff; 
    top: 30px; 
    left: 50%; 
    margin-left: 325px; 
} 
+0

上面有一堆絕對定位發生。它似乎是在影響分配給你的按鈕的鏈接。 – Kinburn101

回答

0

爲Google+,你需要一個正確的URL。你必須對你的物品進行分類。

data-href="https://plus.google.com/+LarryPage" 

Facebook的-API需要HTTP服務器(見Like button not showing (except jsfiddle)

您還可以使用Facebook,按鈕的iframe解決方案。

您的按鈕

例子:

http://jsfiddle.net/GreenMicrochip/djtbg68x/

---- ----更新

你使用了正確的鏈接?

Facebook的: http://facebook.com/YOURUSER

的Twitter: http://twitter.com/YOURUSER或http // twitter.com /意圖/遵循SCREEN_NAME = YOURUSER

你有一個鏈接,我可以試試這個問題? ?

希望有所幫助。

問候

+0

Google+按鈕的作品,我可以看到所有的按鈕,因爲我已經在本地主機上運行,​​問題是鏈接和喜歡/遵循不會工作。 – DevLiv

+0

好的。你有使用正確的網址嗎? http://facebook.com/youuser和twitter.com/YOURUSER或https://twitter.com/intent/follow?screen_name=YOURUSER ----我通過一些來自[Custom Share按鈕](http://danielsetzermann.com/webdesign/custom-social-media-buttons-for-wordpress-with-share-count/),可能有幫助。 –