如何創建這樣的共享欄？

Question

我必須創建類似於本網站的社交分享欄。你能建議它如何實施？使用JQuery或任何東西？

ref。此頁面，http://www.chow.com/recipes/25677-beef-kalbi

看看左側SHARE BAR

Answer 1

他們是專門爲通過Gigya。

我認爲Gigya會爲他們提供的服務收費，但您可以使用免費分享服務獲得類似的服務，如AddThis或ShareThis，這兩者都提供共享統計信息。從那裏只需要將包含他們的「複製&粘貼」代碼的<div>固定到頁面的左上角，然後對其進行排序。下面是使用代碼來自ShareThis的例子：

HTML：

<div id="sharebar"> 
    <span class="btn st_facebook_vcount" displayText="Facebook"></span> 
    <span class="btn st_twitter_vcount" displayText="Tweet"></span> 
    <span class="btn st_email_vcount" displayText="Email"></span> 
</div> 
<script>var switchTo5x=true;</script> 
<script src="//w.sharethis.com/button/buttons.js"></script> 

CSS：

#sharebar { 
    top:10%; 
    left:-65px; 
    width:66px; 
    position:fixed; 
    background:#35a731; 
    border-radius:10px; 
    padding:5px 5px 10px 15px; 
} 
#sharebar:hover { left:-10px; } 
#sharebar .btn { display:block; margin-left:-15px; } 
#sharebar:hover .btn { margin-left:0; } 

加一點點CSS3 transition的效果，甚至一個標籤，它開始尋找一個有點更可敬。

觀看演示：jsfiddle.net/kUTWc/show（或edit it）

Answer 2

看看這些API對於要處理，然後編寫代碼來談談該API的每個站點，然後該代碼鏈接到你安排一些按鈕與CSS。