我爲社交媒體頁面,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;
}
上面有一堆絕對定位發生。它似乎是在影響分配給你的按鈕的鏈接。 – Kinburn101