【问题标题】:Good looking sharethis / addthis / addtoany without javascript [closed]没有javascript的好看的sharethis / addthis / addtoany [关闭]
【发布时间】:2013-12-28 15:42:43
【问题描述】:

有没有好看的 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+ 的链接。

【问题讨论】:

  • 因为性能问题和跟踪用户的可能性。

标签: html share


【解决方案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 个社交服务,你可以用你自己的替换我的处理程序。您可以根据需要调整外观。

【讨论】:

  • 我喜欢它,但这不是我想要的(请参阅相关更新)。
  • 查看我的编辑,addthis 有另一个选项,我之前的演示可以修改以满足您的需求。
  • 我认为我想要的东西不存在。而你的 jsfiddle 解决方案是最好的答案。
  • 如果您能更详细地描述您的需求,我非常乐意为您深入了解
【解决方案2】:

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

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

【讨论】:

  • 对不起,这不是我要找的。我正在寻找一个可以通过 Facebook、Twitter 和 Google+ 共享的链接。 (而不是我问题链接中的所有其他选项)。
  • 我想通过 CSS 自己设置链接的样式。
  • 为什么需要一个链接?单个href只能打开一个没有javascript的url。
  • 对不起,我不清楚。我不是在寻找 HTML,而是在寻找像 addthis.com/bookmark.php?url=google.com&title=google 这样的网络服务只想要一个链接。
  • 很抱歉,您不能帮忙。像这样的网络服务对性能都不利,如果您不自己构建它,它可以跟踪用户。
猜你喜欢
  • 2013-02-11
  • 1970-01-01
  • 2011-04-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-07-16
相关资源
最近更新 更多