自定义wordpress分享按钮

远方的雪山建站一年多，刚开始用了JiaThis分享按钮，接触不久，就知道了百度分享，用百度分享一直到现在，所以对JiaThis也没有太多的感觉。

百度分享，为您带来更多流量！我信了，就用了。看重百度强大的中文搜索引擎，能给网站带来流量，但其实与其它分享按钮没有太多的区别，别人不分享，再强大的分享按钮放在那也是个摆设。

自定义分享按钮有几个初衷：

1、分享按钮插件很强大，几乎包括所有的社交网站，但加载的链接多肯定会影响网速，测试了好多次也确是如此。

2、不美观，分享按钮插件的样式不能网站本身的设计很好的融合在一起。

3、能用代码实现的功能就用代码，尽量减少插件的使用。

替换分享链接中的标题与地址：

自定义分享按钮，其实是很简单，首页我们需要获取社交网站分享的链接地址，而这个不用我们操心，可以找百度分享、JiaThis等强大的分享按钮。在任何有百度分享或JiaThis分享按钮的网站中点击社交分享按钮都会弹出一个分享页面，网址就是我们需要的。

一般分享链接获取的都是当前页面的标题和地址，所以我们只需把分享链接中的标题与地址替换为wordpress的函数：

把分享链接中带有&t=、&title=等其它标题样式后面的标题替换为下面的代码：

把分享链接中带有?url=、?link=等其它链接样式后面的地址替换为下面的代码：

因为分享链接中的标题与地址基本都是一大串字符，所以很难区分哪些才是标题，这里有个简单的方法，标题为例：

&title=%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE&，在“&title=”后面与下一个“&”前面之间红色的字符就是标题了，地址也是这样。

添加分享链接按钮：

下面的代码为分享的链接地址，一些代码是网上有就没有重新编辑，把不需要的删除，需要的一些分享按钮萨龙龙重新编辑添加了进来。代码中的“社交图标链接地址”替换为你自己的图标链接地址人人网分享按钮代码，添加到single.php文件的相关位置：

分享到：

:"class="twitter-share"title="Twitter">

&t="class="facebook-share"title="Facebook">

&title="class="douban-share"title="豆瓣">

&ti=&type=link"class="diandian-share"title="点点">

&title=&content=UTF-8"class="sohu-share"title="搜狐微博">

&source=salonglong.com&info="class="netease-share"title="网易微博">

&title="class="sina-share"title="新浪微博">

&url=&appkey=3e87c17cc8ca4726b13a3167115dd13c&site=http://salonglong.com/"class="tencent-share"title="腾讯微博">

&style=11&content=&stime=&sig="class="kaixin-share"title="开心网">

&title=&desc=&summary=&site="class="qq-share"title="QQ空间">

&title="class="renren-share"title="人人网">

&uri="class="qqsq-share"title="QQ书签">

&it=&linkid=hjm6y313aqz"class="baidu-share"title="百度云收藏">

"class="rss-share"title="订阅我们">

或者也可以新一个php文件（custom_share.php），方便以后重复利用，把上面的代码添加到此文件中，再用下面的代码把custom_share.php包括进来：

添加分享按钮样式：

分享按钮的样式，拷贝到主题的样式文件就OK：

/*远方的雪山自定义分享样式*/

.share{

background:#f8f8f8;

overflow:hidden;

height:50px;

border:1pxsolid#ddd;

border-radius:5px;

margin:12px0;

}

.user_avatar{

background:#f8f8f8;

border:1pxsolid#ddd;

border-radius:4px4px00;

margin-bottom:12px;

}

.user_avatarimg{

margin:8px6px08px;

}

.shareh3{

font-size:14px;

float:left;

background:url(images/share.png)#3275a8no-repeat;

height:50px;

width:123px;

text-indent:-999px;

}

.shareimg{

padding:0;

border:none;

margin:8px1px;

}

.shareh3,.shareimg{

background-color:#dedede;

}

.shareimg:hover,.shareh3:hover{

background-color:#1e8dcc;

}

效果可以看远方的雪山文章下面的分享按钮。

自定义分享按钮还是不错人人网分享按钮代码，设计成与远方的雪山一样的风格，看着就是舒服。

原文链接：