Question

http://www.moen.com/anabelle/spot-resist-stainless-one-handle-high-arc-pulldown-kitchen-faucet/_/R-CONSUMER%3ACA87003SRS?swatch=1

我想在我的页面上有一个共享按钮，就像这个页面一样，我想要的是： 1）弹出的紧凑菜单被禁用 2）它没有向页面添加浮动侧菜单 3）此页面上按钮的HTML是

<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=cmassmoen" title="Share this Page" class="icon-share addthis_button_more" addthis:url="" target="_blank">
  <img src="/assets/moencom/images/catalog/product-details/sharing/share.png" height="20" width="20">
 </a>

HREF中有一个v参数和username参数（我在addthis网站上查看，但我无法找到如何生成具有类似href属性的按钮）

我已经阅读了addthis的API页面，但仍不太确定如何操作。

Answer 1

为了实现这一目标，首先您需要一个addThis帐户。在下面的代码中，我使用fontawesome作为图标，但您可以使用您想要的任何图像。只需将<i>代码替换为<img>代码。

Link to see this in action

必需

<script type="text/javascript" src="LINK-TO-YOUR-ADDTHIS-ACCOUNT" async="async"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

HTML

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
    <a class="icon-share addthis_button_more"><i class="fa fa-share-alt fa-5x"></i></a>
</div>
<!-- AddThis Button END -->

CSS

.icon-share {
    color:#ccc;
}
.icon-share:hover {
    color:#00A2D7;
}

自定义Addthis按钮

1 个答案: