没有javascript的好看的sharethis / addthis / addtoany [关闭]

Question

有没有好看的 sharethis /addthis / addtoany 替代方法来共享没有 javascript 的 url？

点赞：<a href="http://addthis.com?url=[...]">share</a>

我已经找到了这个：http://www.addthis.com/bookmark.php?url=google.com&title=google，但是很丑，有太多选择。

更新：我不是在寻找 HTML，而是在寻找像 http://www.addthis.com/bookmark.php?url=google.com&title=google 这样的服务，我可以在其中提供一个 url，社交共享网站处理指向 facebook、twitter 和 google+ 的链接。

我对 addthis.com/bookmark.php 的唯一问题是它很丑，而且选项太多。我只想要 facebook、twitter 和 google+ 的链接。

Answer 1

这是你想要的吗？带有一些结冰动画效果的纯 css。没有 JS。

www.jsfiddle.net/Godinall/UH8sx/

HTML：

<div id="show_social">Add to Social Networks
<div id="social_share">
    <p id="socialicons">
      <a href="http://www.facebook.com/SuperRodUK"><img src="http://3.bp.blogspot.com/-eG9bPvyOXro/UPBYTmI8VEI/AAAAAAAAJqI/TFBZzBxJ59c/s1600/NBT+facebook+icon.png" /></a>  
      <a href="http://www.twitter.com/SuperRodUK"><img src="http://4.bp.blogspot.com/-dB0P2JmL6QA/UPBYVfvhyII/AAAAAAAAJqU/HFD5UeTJck8/s1600/NBT+twitter+icon.png" /></a>  
      <a href="https://plus.google.com/ken@super-rod.co.uk"><img src="http://1.bp.blogspot.com/-XU8OI90JZQc/UPBYUKmev_I/AAAAAAAAJqM/FPgdcMimraQ/s1600/NBT+google+plus+icon.png" /></a>  
      <a href="http://www.feeds.feedburner.com/"><img src="http://4.bp.blogspot.com/-YPkJD-sewC8/UPBYWk9dzBI/AAAAAAAAJqg/D3FVlAJz4VE/s1600/NBT+rss+feed+icon.png" /></a> 
      <a href="http://www.youtube.com/user/SuperRodUK"><img src="http://1.bp.blogspot.com/-YNToKMeHx9A/UPBYWVeeq5I/AAAAAAAAJqc/HEpC_PsZBsY/s1600/NBT+youtube+icon.png" /></a> 
    </p>
</div>
    </div>

CSS：

#show_social{width:400px;background:rgba(100,100,100,0.2);text-align:center;font-family:Helvetica;border:1px solid rgba(10,10,10,0.5)}
#social_share{display:none;}
#show_social:hover #social_share{display:block;}
#socialicons img {
     -moz-transition: all 0.8s ease-in-out;
     -webkit-transition: all 0.8s ease-in-out;
     -o-transition: all 0.8s ease-in-out;
     -ms-transition: all 0.8s ease-in-out;
     transition: all 0.8s ease-in-out;
 }
 #socialicons img:hover {
     -moz-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     transform: rotate(360deg);
 }

如果您想使用网络服务，他们肯定会跟踪您的使用情况。至于 AddThis，它们确实有更好的布局和更简单的选项，请参阅此链接：https://www.addthis.com/get/smart-layers?frm=hp，它被称为智能层，仅以您喜欢的 3 个社交服务开头，并且布局是 HTML5 友好的。

我之前给你的演示也可以修改为只实现你想要的 3 个社交服务，你可以用你自己的替换我的处理程序。您可以根据需要调整外观。

Answer 2

这就是你要找的吗？从用户体验的角度来看这是非常糟糕的，没有人喜欢打开一个新窗口，而它可能只是一个弹出窗口。

 <a href="http://twitter.com/share?url=http://helloworld.com/blog&text=Hello World" target="_blank">Tweet This button</a>