前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

前端集合 RSS订阅
Home » 经验记录 » 如何为你的博客添加一个易用性更好的社会化分享按钮?

如何为你的博客添加一个易用性更好的社会化分享按钮?

发布者:前端集合 // 发布时间:2010-11-27 16:51:20 // 分类:经验记录 // 访问: 3,836 次 // 热度:

大家都知道,为自己的博客添加一个社会化分享按钮,既能带来更多的流量,也能扩大你博客以及博客文章的影响力。我以前也写过一篇介绍三个社会化分享工具的文章。

但是我觉得很多社会化分享工具的可用性不是很好。而要让这些分享按钮更易用,得要自己自定义或好好折腾一下才行。

1. 先让我们来看看现在流行的一些社会化按钮分享工具或插件:

(1) JiaThis

image

缺点:必须要点击2次才能达到分享的效果,如果你想要分享的目的服务不在第一页,则需要多点击一次才行。这样我觉得很不爽。

(2) bShare

image

和JiaThis一样,大多的服务还是需要点击2次货以上才行。

(3) wp-share-list

wp-share-list 是一个灰常漂亮的社会化分享服务插件。如图:

image

它很漂亮,但是不能满足我的需求,因为第一屏显示的服务不够多。

(4) 代推

image

需要鼠标hover后服务图标才能显示,然后再点击分享。

(5) SexyBookmarks

image

同样很漂亮的一个社会化分享插件。但是如果你想在页面上摆放足够多的服务,则需要占用页面很多空间。

2. 折腾一个满足自己需要的社会化分享按钮;

我下午已经给微博之博安装了一个符合自己需求的社会化分享按钮:

image

特点:显示足够多的服务,占用页面空间少,只需一次点击。

我这个是从JiaThis修改过来的。如果你也想要利用JiaThis给自己自定义一个更易用的社会化分享按钮,可以参照JiaThis完整的ID参数定义。或者你可以直接使用我折腾出的代码,很简单:

<!-- JiaThis Button BEGIN -->
<div id="ckepop">
<a href="http://www.jiathis.com/share/" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank">分享到:</a>
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_kaixin001"></a>
<a class="jiathis_button_renren"></a>
<a class="jiathis_button_delicious"></a>
<a class="jiathis_button_twitter"></a>
<a class="jiathis_button_t163"></a>
<a class="jiathis_button_tsohu"></a>
<a class="jiathis_button_youshi"></a>
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_feixin"></a>
<a class="jiathis_button_qq"></a>
<a class="jiathis_button_douban"></a>
<a class="jiathis_button_xianguo"></a>
<a class="jiathis_button_baidu"></a>
<a class="jiathis_button_taobao"></a>
<a class="jiathis_button_xiaoyou"></a>
<a class="jiathis_button_qq"></a>
<a class="jiathis_button_139"></a>
<a class="jiathis_button_renjian"></a>
<a class="jiathis_button_51"></a>
<a class="jiathis_button_youdao"></a>
<a class="jiathis_button_baohe"></a>
<a class="jiathis_button_douban9dian"></a>
<a class="jiathis_button_reddit"></a>
<a class="jiathis_button_stumbleupon"></a>
<a class="jiathis_button_chouti"></a>
</div>
<script type="text/javascript" src="http://v2.jiathis.com/code/jia.js?uid=891742" charset="utf-8"></script>
<!-- JiaThis Button END -->

另外,bShare也可以自定义分享按钮的代码,具体请参考bShare自定义及API中用到的平台代码参考列表。不过我没有折腾出来跟上面一样的效果来。

Tags: 博客分享按钮, 可用性, 易用性, 社会化分享按钮

由于没有收到Adsense pin码,网站的广告变成公益广告啦应该怎么办?>>  << 饭否已回来(老账号已经可以登录)
Top