使用 Google 分析或者百度统计监控百度分享社交按钮点击
使用 Google 分析或者百度统计监控百度分享社交按钮点击
文章目录[隐藏]
本身自己有数据统计功能，如果我们想把用户点击分享按钮的数据统计到 Google 分析或者百度统计，以便能够在一个地方查看数据报表。
在百度分享 > 代码获取 页面，选择专业开发版，通用设置其中有个 onAfterClick 选项：
在用户点击分享按钮后执行代码，cmd为分享目标id。可用于统计等。
我们可以使用这个选项将百度分享的按钮点击数据同步到 Google 分析。
百度分享代码修改
将原来的百度分享按钮代码：
window._bd_share_config = {
common : {
bdText : '',
bdDesc : '',
bdUrl : '',
bdPic : '',
window._bd_share_config = {
common : {
bdText : '',
bdDesc : '',
bdUrl : '',
bdPic : '',
onAfterClick : function(cmd){
ga('send', 'social', cmd, 'Share', mon.bdUrl); // 统计到 Google 分析
_hmt.push(['_trackEvent', cmd, 'Share', mon.bdUrl]); // 统计到百度统计
Google 分析中，点击流量获取 > 社交 > 插件：
百度统计中，点击定制统计 > 事件统计：
上面两个地方，还是可以具体查看那个页面被分享得最多。虽然本博客分享的数据不是很多，但是也很明显的看出大家逐渐开始喜欢分享到微信。
其他问题咨询，请关注我的微信公众号：WPJAM（WordPressJAM）。
你可能也喜欢
& Copyright 2015 我爱水煮鱼 保留所有权利
Icons by .
Powered by .
Hosting by .
图片存储由提供。纸飞机许愿
前端路上，一路有你。编辑你的正能量，快乐工作，努力生活~
> 社交平台分享自定义javascript组件
社交平台分享自定义javascript组件
作者： 轩枫
点击量：2697
社会化媒体赋予了每个人创造并传播内容的能力。社会化分享量可以间接说明该页面内容受欢迎的程度，对用户筛选搜索结果能够起到很好的辅助作用。目前常用的社会化分享媒体主要有QQ空间、新浪微博、微信、腾讯微博、人人网等。
社会化分享简介
社会化分享，是指在中，基于其分享功能，将信息网络化输入输出，加速组织传播。博客、微博客、WIKI、博客、社交网络、内容社区等，是可以常见到的社会化媒体形式。在国内近两年，社会化分享的传播量又以QQ空间、新浪微博、腾讯微博势头最猛。
社会化分享工具
常用的社会化分享工具，都支持自定义按钮风格、代码嵌入等功能，使用起来简单方便。
推荐的有：
百度分享：
自定义JS组件
demo地址：
Github地址：
为何有了以上方便的工具，还要自己写组件呢？
需要嵌入指定代码，打开页面时需要加载其他网站的资源
可以自定义的分享的文字、图片
支持微信（二维码）、新浪微博、腾讯微博、人人网、QQ空间
&div id="sns_share" class="cf"&
&span class="sns_share_to fl"&分享到：&/span&
&a class="share_weixin share_icon fl" href="javascript:;" title="查看本文二维码，分享至微信"&&em&二维码&/em&&/a&
&a class="share_tsina share_icon fl" href="javascript:;" title="分享到新浪微博"&&em&新浪微博&/em&&/a&
&a class="share_tqq share_icon fl" href="javascript:;" title="分享到腾讯微博"&&em&腾讯微博&/em&&/a&
&a class="share_renren share_icon fl" href="javascript:;" title="分享到人人网"&&em&人人网&/em&&/a&
&a class="share_tqzone share_icon fl" href="javascript:;" title="分享到QQ空间"&&em&QQ空间&/em&&/a&
&div class="wemcn" id="wemcn"&
&div id="ewm" class="ewmDiv clearfix"&
&div class="rwmtext"&
&p&扫一扫，用手机观看！&/p&
&p&用微信扫描还可以&/p&
&p&分享至好友和朋友圈&/p&
&a class="share_icon" href="javascript:void(0)" id="ewmkg"&&/a&
&i class="ewmsj share_icon"&&/i&
123456789101112131415161718192021
&div id="sns_share" class="cf"&&&&&&&&&&span class="sns_share_to fl"&分享到：&/span&&&&&&&&&&a class="share_weixin share_icon fl" href="javascript:;" title="查看本文二维码，分享至微信"&&em&二维码&/em&&/a&&&&&&&&&&a class="share_tsina share_icon fl" href="javascript:;" title="分享到新浪微博"&&em&新浪微博&/em&&/a&&&&&&&&&&a class="share_tqq share_icon fl" href="javascript:;" title="分享到腾讯微博"&&em&腾讯微博&/em&&/a&&&&&&&&&&a class="share_renren share_icon fl" href="javascript:;" title="分享到人人网"&&em&人人网&/em&&/a&&&&&&&&&&a class="share_tqzone share_icon fl" href="javascript:;" title="分享到QQ空间"&&em&QQ空间&/em&&/a&&&&&&&&&&&div class="wemcn" id="wemcn"&&&&&&&&&&&&& &div id="ewm" class="ewmDiv clearfix"&&&&&&&&&&&&&&&&&&div class="rwmtext"&&&&&&&&&&&&&&&&&&&&&&p&扫一扫，用手机观看！&/p&&&&&&&&&&&&&&&&&&&&&&p&用微信扫描还可以&/p&&&&&&&&&&&&&&&&&&&&&&p&分享至好友和朋友圈&/p& &&&&&&&&&&&&&&&&&/div&&&&&&&&&&&&& &/div& &&&&&&&&&&&&&a class="share_icon" href="javascript:void(0)" id="ewmkg"&&/a&&&&&&&&&&&&&&i class="ewmsj share_icon"&&/i&&&&&&&&&&/div&&&&&&&/div&
xuanfeng_sns_share.js组件
(function($) {
$.fn.xuanfengSnsShare = function(options){
var defaults = {
tsina:{//分享到新浪微博
url : encodeURIComponent(window.location.href),//分享的url默认是当前页面
title : document.title,//分享的内容默认是当前页面的title
appkey : appkey,//新浪微博的appkey
pic : 'img-src' //默认图片
renren:{//分享到人人网
resourceUrl: encodeURIComponent(window.location.href),
srcUrl : window.location.href,//分享的url默认是当前页面
title : document.title,//分享的内容默认是当前页面的title
appkey : appkey,//人人的appkey
pic : 'img-src' //默认图片
tqq:{//分享到腾讯微博
url : encodeURIComponent(window.location.href),
title : document.title,//分享的内容默认是当前页面的title
appkey : appkey,//腾讯微博的appkey
pic : 'img-src' //默认图片
tqzone:{//分享到QQ空间
url : encodeURIComponent(window.location.href),
title : document.title, //分享的内容默认是当前页面的title
appkey : appkey,//腾讯微博的appkey
pic : 'img-src' //默认图片
settings = $.extend(true,{}, defaults, options),
shareIconName = {
tsina : '新浪微博',
renren : '人人网',
tqq : '腾讯微博',
tqzone: 'QQ空间'
shareUrl = {
tsina : '/share/share.php?url={url}&title={title}&appkey={appkey}&pic={pic}',
renren : '/dialog/share?resourceUrl={resourceUrl}&srcUrl={srcUrl}&title={title}&appkey={appkey}&pic={pic}',
tqq : 'http://share.v./index.php?c=share&a=index&url={url}&title={title}&appkey={appkey}&pic={pic}',
tqzone : 'http://sns./cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&pics={pic}&title={title}&summary=快带上你的浏览器来弹钢琴吧，欢乐体验'
return $(this).each(function(){
function openWindow(str){
return function(){
window.open(formatmodel(shareUrl[str],settings[str]));
function formatmodel(str,model){
for(var k in model){
var re = new RegExp("{"+k+"}","g");
str = str.replace(re,model[k]);
for(snsName in settings){
var text= encodeURIComponent(settings[snsName].title);
settings[snsName].title =
for(sns in shareUrl){
$(".share_"+sns).off().on('click', openWindow(sns)).attr("title","分享到"+shareIconName[sns]).attr("href","javascript:;");
})(jQuery);
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
(function($) {&&&&&$.fn.xuanfengSnsShare = function(options){&&&&&&&&&var defaults = {&&&&&&&&&&&&&&&&tsina:{//分享到新浪微博 &&&&&&&&&&&&&&&&&&&&url : encodeURIComponent(window.location.href),//分享的url默认是当前页面&&&&&&&&&&&&&&&&&&&&title : document.title,//分享的内容默认是当前页面的title&&&&&&&&&&&&&&&&&&&&appkey : appkey,//新浪微博的appkey&&&&&&&&&&&&&&&&&&&&pic : 'img-src'&&&&//默认图片&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&renren:{//分享到人人网&&&&&&&&&&&&&&&&&&&&resourceUrl: encodeURIComponent(window.location.href),&&&&&&&&&&&&&&&&&&&&srcUrl : window.location.href,//分享的url默认是当前页面&&&&&&&&&&&&&&&&&&&&title : document.title,//分享的内容默认是当前页面的title&&&&&&&&&&&&&&&&&&&&appkey : appkey,//人人的appkey&&&&&&&&&&&&&&&&&&&&pic : 'img-src'&&&&//默认图片&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&tqq:{//分享到腾讯微博&&&&&&&&&&&&&&&&&&&&url : encodeURIComponent(window.location.href),&&&&&&&&&&&&&&&&&&&&title : document.title,//分享的内容默认是当前页面的title&&&&&&&&&&&&&&&&&&&&appkey : appkey,//腾讯微博的appkey&&&&&&&&&&&&&&&&&&&&pic : 'img-src'&&&&//默认图片&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&tqzone:{//分享到QQ空间&&&&&&&&&&&&&&&&&&&&url : encodeURIComponent(window.location.href),&&&&&&&&&&&&&&&&&&&&title : document.title,&&&&//分享的内容默认是当前页面的title&&&&&&&&&&&&&&&&&&&&appkey : appkey,//腾讯微博的appkey&&&&&&&&&&&&&&&&&&&&pic : 'img-src'&&&&//默认图片&&&&&&&&&&&&&&&&}&&&&&&&&&&&&},&&&&&&&&&&&&settings = $.extend(true,{}, defaults, options),&&&&&&&&&&&&shareIconName = {&&&&&&&&&&&&&&&&tsina : '新浪微博',&&&&&&&&&&&&&&&&renren : '人人网',&&&&&&&&&&&&&&&&tqq : '腾讯微博',&&&&&&&&&&&&&&&&tqzone: 'QQ空间'&&&&&&&&&&&&},&&&&&&&&&&&&shareUrl = {&&&&&&&&&&&&&&&&tsina : '/share/share.php?url={url}&title={title}&appkey={appkey}&pic={pic}',&&&&&&&&&&&&&&&&renren : '/dialog/share?resourceUrl={resourceUrl}&srcUrl={srcUrl}&title={title}&appkey={appkey}&pic={pic}',&&&&&&&&&&&&&&&&tqq : 'http://share.v./index.php?c=share&a=index&url={url}&title={title}&appkey={appkey}&pic={pic}',&&&&&&&&&&&&&&&&tqzone : 'http://sns./cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&pics={pic}&title={title}&summary=快带上你的浏览器来弹钢琴吧，欢乐体验'&&&&&&&&&&&&};&&&&&&&&&return $(this).each(function(){&&&&&&&&&&&&&function openWindow(str){&&&&&&&&&&&&&&&&return function(){&&&&&&&&&&&&&&&&&&&&window.open(formatmodel(shareUrl[str],settings[str]));&&&&&&&&&&&&&&&&};&&&&&&&&&&&&}&&&&&&&&&&&&&function formatmodel(str,model){&&&&&&&&&&&&&&&&for(var k in model){&&&&&&&&&&&&&&&&&&&&var re = new RegExp("{"+k+"}","g");&&&&&&&&&&&&&&&&&&&&str = str.replace(re,model[k]);&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&return str;&&&&&&&&&&&&}&&&&&&&&&&&&&for(snsName in settings){ &&&&&&&&&&&&&&&&var text= encodeURIComponent(settings[snsName].title);&&&&&&&&&&&&&&&&settings[snsName].title = text;&&&&&&&&&&&&}&&&&&&&&&&&&&for(sns in shareUrl){&&&&&&&&&&&&&&&&$(".share_"+sns).off().on('click', openWindow(sns)).attr("title","分享到"+shareIconName[sns]).attr("href","javascript:;"); &&&&&&&&&&&&}&&&&&&&&&});&&&&};})(jQuery);
组件初始化
&script src="js/jquery.js"&&/script&
&script src="js/xuanfeng_sns_share.js"&&/script&
$(function(){
var shareTitle = $(".post_title h1").text()+"轩枫阁";
var sinaTitle = '分享文章 「' + shareTitle + '」 （分享自@轩枫Y_me）',
renrenTitle = '分享文章 「' + shareTitle + '」（分享自@农航亮()）',
tqqTitle = '分享文章 「' + shareTitle + '」（分享自@轩枫阁）',
tqzoneTitle = '分享文章 「' + shareTitle + '」-轩枫阁（分享自@?紫轩枫、）';
var picShare = encodeURIComponent($(".post_title").data("thumb"));
$('body').xuanfengSnsShare({
url : encodeURIComponent(window.location.href),
title: sinaTitle,
pic: picShare
url : encodeURIComponent(window.location.href),
title: renrenTitle,
pic: picShare
url : encodeURIComponent(window.location.href),
title: tqqTitle,
pic: picShare
url : encodeURIComponent(window.location.href),
title: tqzoneTitle,
pic: picShare
// 微信分享
$(".share_weixin").click(function(){
$("#ewmimg").remove();
var thisURL = window.location.href,
strwrite = "&img id='ewmimg' class='ewmimg' src='/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=" + thisURL + "' width='85' height='85' alt='轩枫阁文章 二维码分享' /&";
$("#ewm").prepend(strwrite);
$("#wemcn").show();
$("#ewmkg").click(function(){
$("#wemcn").hide();
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
&script src="js/jquery.js"&&/script&&script src="js/xuanfeng_sns_share.js"&&/script&&script&$(function(){&&&&var shareTitle = $(".post_title h1").text()+"轩枫阁";&&&&var sinaTitle = '分享文章 「' + shareTitle + '」 （分享自@轩枫Y_me）',&&&&&&&&renrenTitle = '分享文章 「' + shareTitle + '」（分享自@农航亮()）',&&&&&&&&tqqTitle = '分享文章 「' + shareTitle + '」（分享自@轩枫阁）',&&&&&&&&tqzoneTitle = '分享文章 「' + shareTitle + '」-轩枫阁（分享自@?紫轩枫、）';&&&&var picShare = encodeURIComponent($(".post_title").data("thumb"));&&&&&$('body').xuanfengSnsShare({&&&&&&&&tsina:{&&&&&&&&&&&&url : encodeURIComponent(window.location.href),&&&&&&&&&&&&title: sinaTitle,&&&&&&&&&&&&pic: picShare&&&&&&&&},&&&&&&&&renren:{&&&&&&&&&&&&url : encodeURIComponent(window.location.href),&&&&&&&&&&&&title: renrenTitle,&&&&&&&&&&&&pic: picShare&&&&&&&&},&&&&&&&&tqq:{&&&&&&&&&&&&url : encodeURIComponent(window.location.href),&&&&&&&&&&&&title: tqqTitle,&&&&&&&&&&&&pic: picShare &&&&&&&&},&&&&&&&&tqzone:{&&&&&&&&&&&&url : encodeURIComponent(window.location.href),&&&&&&&&&&&&title: tqzoneTitle,&&&&&&&&&&&&&&&&&&&&&&&&pic: picShare &&&&&&&&}&&&&});&&&&&// 微信分享&&&&&&&&$(".share_weixin").click(function(){&&&&&&&&$("#ewmimg").remove();&&&&&&&&var thisURL = window.location.href,&&&&&&&&&&&&strwrite = "&img id='ewmimg' class='ewmimg' src='/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=" + thisURL + "' width='85' height='85' alt='轩枫阁文章 二维码分享' /&";&&&&&&&&$("#ewm").prepend(strwrite);&&&&&&&&$("#wemcn").show();&&&&});&&&&$("#ewmkg").click(function(){&&&&&&&&$("#wemcn").hide();&&&&});&});&/script&
// 微信分享 这里用了Google的二维码API，所以有时候会打不开
$(".share_weixin").click(function(){
$("#ewmimg").remove();
var thisURL = window.location.href,
strwrite = "&img id='ewmimg' class='ewmimg' src='/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=" + thisURL + "' width='85' height='85' alt='轩枫阁文章 二维码分享' /&";
$("#ewm").prepend(strwrite);
$("#wemcn").show();
$("#ewmkg").click(function(){
$("#wemcn").hide();
1234567891011
// 微信分享&&&&这里用了Google的二维码API，所以有时候会打不开$(".share_weixin").click(function(){&&&&$("#ewmimg").remove();&&&&var thisURL = window.location.href,&&&&&&&&strwrite = "&img id='ewmimg' class='ewmimg' src='/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=" + thisURL + "' width='85' height='85' alt='轩枫阁文章 二维码分享' /&";&&&&$("#ewm").prepend(strwrite);&&&&$("#wemcn").show();});$("#ewmkg").click(function(){&&&&$("#wemcn").hide();});
创建社会化媒体Appkey
新浪微博：
腾讯微博：
如果能看到这，说明很耐心，所以要做出这样的组件，也请耐心的完成各大社交工具的API创建，一步一步完成，相信你会受益~
设置滚动速度
扫一扫，用手机观看！
用微信扫描还可以
分享至好友和朋友圈
SocialRecruitment社会招聘
Javascript前端开发工程师
腾讯公司 微信企业应用中心
负责web前端JS的开发工作；负责web前端系统分析、优化与架构工作。
本科以上学历;
一年以上工作经验;
精通JavaScript、HTML、CSS等前台相关技术,熟悉W3C网页标准;
熟悉至少一种后台语言的开发机制(如Java,c++等);
有一定架构能力和算法能力,有良好编码规范;
良好的学习能力、沟通能力,追求完美,有工作激情,能在较大强度下工作。
I Want You
资深前端工程师
简历请发送至您所在的位置： &
百度社会化服务组件 让移动团队更好的利用社会化网络
百度社会化服务组件 让移动团队更好的利用社会化网络
百度社会化服务组件实际上就是为移动开发团队提供一个统一的开放接口，帮助移动开发团队降低社会化推广的技术成本。这个服务看似简单，但是它的确为移动开发团队解决了不少问题。
前不久，笔者在了解开放平台的时候发现百度推出了一款名为&百度社会化服务组件&的技术服务。百度社会化服务组件包括社会化登录组件和社会化分享组件，可以帮助开发者便捷的接入多家社会化平台的账号资源，实现向各个社会化平台分享信息。可以帮助移动开发团队更好的与社会化网络接轨，实现自身App产品的社会化传播。
百度社会化服务官网：/soc/share
目前，大多数移动App产品都内置了类似分享至微博、Facebook等社会化网络推广的组件，尤其是一些游戏类App，对于用户的分享行为还会给予虚拟货币的支持。但是，大多仅仅支持一两家的分享支持。
为什么会产生这样的情况？笔者认为，这是由于社会化推广组件的开发成本所决定的。
当前，微博、微信以及开心网等社会化网络都对外提供了自身的开放接口，以方便移动开发团队的有效接入。但是，各家的开放接口并不统一，而且，不同的移动开发团队技术力量不同，社会化网络分享的开发能力也不相同。
而百度社会化服务组件实际上就是为移动开发团队提供一个统一的开放接口，帮助移动开发团队降低社会化推广的技术成本。
多平台一键分享带来更全面的分享效果
从资源方面看，百度社会化服务组件目前支持新浪微博、腾讯微博、QQ空间、开心网、微信好友、微信朋友圈进行分享，同时支持系统的邮件、短信同步分享，用户可以从App中进行多平台勾选，一键分享，大大提升了社会化分享的广度。
而且，百度社会化服务组件的功能度非常完善。目前，百度社会化服务组件支持新浪微博以及QQ空间SSO，即用户手机中已经安装新浪微博、QQ空间客户端时，直接免除分享需要的登录步骤，不再需要输入账号密码直接授权分享，让移动端分享变得更加简单。
有的人只玩微博，还有的人爱用微信，如果移动开发团队所利用的社会化网络过于单一，那么就会让App在社会化推广过程中由于受众不够而导致传播效果的下降。笔者曾经下载过一款类似&泡泡龙&类的游戏，这款游戏采用的社会化分享就是笔者之前提到的虚拟货币刺激分享手段。但是这款游戏内仅仅提供了微博和微信两种社会化分享模式，使得自身的社会化传播平台相对单一。
灵活的附加功能加强社会化分享用户体验
百度社会化服务组件还提供了&手机内容截图分享&、&组件皮肤定制&等方面的功能，既方便了用户的社会化分享过程，又可以贴合移动开发团队的UI风格。这方面功能看似简单，但是它地的确确为移动开发团队解决了不少问题 。此外还提供了各平台分享回流的数据统计，应用的分享状况移动开发者一目了然，可以根据各个平台的情况，进行有针对性调整分享排序和推广策略。
笔者在几个月之前在iOS应用商店下载过一款名为&打人先打脸&的游戏类应用，这款应用最大的特点就是可以植入手机相册中的人物照片，然后把这个人揍得鼻青脸肿。但是这款应用中的&微博分享&功能做的真的不是很好，它只能将游戏的起始界面进行微博分享，并不能在游戏过程中抓图后再进行微博分享，而社会化分享的精髓在于相互认识的人之间互相达到口口相传，实现自媒体的推广，刺激人们的下载行为。所以，&打人先打脸&的微博分享功能实际上对于其本身的意义并不是很大。如果这款App游戏中调用了百度社会化服务组件，那么用户可以直接将App游戏中被殴打对象最后的惨状进行分享，甚至可以@那个被打的朋友，那么这款应用的社会化推广效果肯定能够上升一个档次。
简单上手的接入方式降低移动开发成本
百度社会化服务组件使用起来很简单，只需下载相对应平台的SDK打包到应用程序中即可。
社会化组件SDK 下载地址：/soc/share
虽然，APP的好坏取决于App产品自身的创意和质量，但是好的社会化传播也可使得应用推广传播起来事半功倍。本文所讲述的只是社会化分享过程中的一些周边问题，移动开发团队可以尝试一下第三方的社会化组件，看一下是否节省了自身的开发成本，更好的将社会化媒体利用完善。
关于的更多文章
Android 4.4即将发布，这对大家来说都是很期待的，当然，无论是
既然强大的Android Studio来了，有什么理由不去用呢？
在百年老店诺基亚和我们依依惜别之后，上周我们又迎来
大家都知道iOS的发展之迅速，这对于开发者来说，无疑
越来越多的web设计师提出了移动优先的口号，而随着硬
本书共22章，包括操作符、控制执行流程、访问权限控制、复用类、多态、接口、通过异常处理错误、字符串、泛型、数组、容器深入研
Windows Phone专家
Android开发专家
51CTO旗下网站百度的轻应用 (Light App) 本质上是什么，这是新类型的分发渠道
在今天的百度世界2013大会上，百度正式推出了“百度轻应用”。通过“轻应用”的模式，用户无须下载 Native APP，直接通过搜索框，实现即搜即得。例如查询天气，直接通过搜索框（百度手机客户端或者是网页端）就能够给出确切的答案，不需要再通过关键词去检索
------分隔线----------------------------}