实例：给网站添加分享按钮

如果你的网站上有网友喜欢的内容他们想分享怎么办，我们可以添加分享按钮，分享到微博，空间等。本文教您给您的网站添加分享按钮！
网上能找到很多提供分享按钮功能的控件和插件, 但是往往功能过于强大. 大部分插件将分享, 收藏, 订阅等功能全集合与一身, 涵盖海内外几乎所有的相关服务. 其中一些提供了个性化设置, 可以筛选服务, 但是同样耗费了大量资源 (图片和代码); 还有一些插件隐藏了部分分享按钮, 以减少对页面空间的需求, 但同时交互形式却变得复杂. 所以我我们这里推荐一段代码来实现这个功能, 现在分享一下.

HTML
<div id="share">
    Share on:
    <a rel="nofollow" id="facebook-share" title="Facebook">Facebook</a>
    <a rel="nofollow" id="twitter-share" title="Twitter">Twitter</a>
    <a rel="nofollow" id="delicious-share" title="Delicious">Delicious</a>
    <a rel="nofollow" id="kaixin001-share" title="开心网">开心网</a>
    <a rel="nofollow" id="renren-share" title="人人网">人人网</a>
    <a rel="nofollow" id="douban-share" title="豆瓣">豆瓣</a>
    <a rel="nofollow" id="sina-share" title="新浪微博">新浪微博</a>
    <a rel="nofollow" id="netease-share" title="网易微博">网易微博</a>
    <a rel="nofollow" id="tencent-share" title="腾讯微博">腾讯微博</a>
</div>

CSS
#share,#share a{line-height:16px}
#share a{display:inline-block;width:16px;height:16px;text-indent:-999em;cursor:pointer;margin-left:5px;background:url() no-repeat}
#share a#facebook-share{background-position:0 0}
#share a#twitter-share{background-position:0 -16px}
#share a#delicious-share{background-position:0 -32px}
#share a#kaixin001-share{background-position:0 -48px}
#share a#renren-share{background-position:0 -64px}
#share a#douban-share{background-position:0 -80px}
#share a#sina-share{background-position:0 -96px}
#share a#netease-share{background-position:0 -112px}
#share a#tencent-share{background-position:0 -128px}