飞龙博客

feilong.org 前端开发教程

站外链接被点击多少次功能代码思路

飞龙更新于 2011-10-27 12:44 加入书签 CTRL+D 有 160 个朋友来过

最近飞龙给网站做一个统计某个站外链接被点击了多少次的功能。因为是站外链接,所以不可能在链接到的页面写php代码接受url数据。怎么办呢?本日志更新网址:hhttp://feilong.org/external-link-clicks-count 飞龙第2次修订于20111027 ,记录下站外链接被点击多少次功能代码思路和应用举例,希望对您有用!

一、站外链接被点击多少次功能开发思路

飞龙假设某出发点页面有这么个站外链接,当访客点击了该链接后,我们需要统计次数。

<a id="feilongtaobao" href="http://feilongorg.taobao.com" target="_blank" rel="noopener noreferrer"><span>飞龙在淘宝</span></a>

飞龙注:用id在识别链接是便于css指定特定的样式。对锚文本加span标签目的是可以用css背景图代替文字。

1、首先碰到的难题是,这个链接是站外链接,不可能在链接到的页面写php代码接受url数据。有没有变通办法来接受数据的呢?有。因为这个链接的出发点还是在站内吧,我们可以做一个同时打开的中间跳转页,用那个跳转页来接受数据!

这就需要用到点击链接同时弹出某窗口的代码。下面就是点击链接同时弹出某窗口代码

 
<script type="text/javascript">
 
function jump_url(targ,linkid)
{ //linkid is the linkid, so you can know where the click comes from
var url = 'http://feilong.org/feilong?from='+linkid;//这是数据接受页,一般不宜真正打开,只用来接受数据。由于是站内,因此可以自由控制
targ = (targ)?targ:"_blank"; 
if (url != "") 
open(url, targ); 
return false;
}//这个函数不要了
 
 
function jump_url(flid){ //20111031 feilong.org
var flurl = 'http://www.gelai8.com/chuangzuo.php?mod=comm_submit&from=' + flid + '&musicid=' + $musicid + '&musicuid=' + $musicuid;//飞龙提示:此为discuz的php写法
 
var win=window.open(flurl, '_self');//先打开数据接收页面
//win.close();//然后自动关闭数据接收页面
//shuaxin();//刷新当前页显示的数据
}
 
function shuaxin(){
//window.location.href='http://www.gelai8.com';
window.location.reload();
}
 
 
</script>

于是,上面的链接变成了

<a onclick="jump_url('_blank','feilongtaobao');" id="feilongtaobao" href="http://feilongorg.taobao.com" target="_blank" rel="noopener noreferrer"><span>飞龙在淘宝</span></a>

当我们点击这个链接后,你会发现除了打开链接指向页:http://feilongorg.taobao.com ,同时打开了这个数据接受页: http://feilong.org/feilong?from=feilongtaobao

2、于是,我们需要在站内接受页的模板里写php代码。用来向mysql数据库写统计数据,主要是给数据库某字段加1。

3、最后的效果应该是,当用户打开链接指向页,站内接受页不能真正被打开,所以需要设置打开站内接受页后应该自动返回到链接的出发点页面。

在站内接受页写如下代码

// 监听和接受分享操作数据
$from=$_GET['from'];
$musicid=$_GET['musicid'];if($from){
fl_count_music_share($from,$musicid);
$backurl='http://www.gelai8.com/chuangzuo.php?mod=view&musicid='.$musicid;
echo '<meta http-equiv="refresh" content="5;url='.$backurl.'">';
}//20111128feilong.org

二、站外链接被点击多少次功能开发举例:改造分享按钮为可以人工控制的站内功能,统计每个按钮的被点击次数。

以下是bshare的社会化分享功能代码:

<a class="bshareDiv" href=" http://www.bshare.cn/share">分享按钮</a><script language="javascript" type="text/javascript" src=" http://static.bshare.cn/b/buttonLite.js#uuid=&style=2&textcolor=#000&bgcolor=none&bp=sinaminiblog,qzone,renren,kaixin001,douban,sohuminiblog,baiduhi&text=分享到&pophcol=3"></script>

现在飞龙想统计每个分享按钮被点击了多少次。起初想直接对这个 class等于 bshareDiv 的link 添加一个id号 bshare和 onclick="jump_url('_blank','bshare');",但是发现点击链接后,弹出的不是想象的数据接受页。

于是飞龙想到了,是不是js冲突。那只有去掉bshare的js,查看最终分享指向网址。以下是常见的 分享按钮

 
<link rel="stylesheet" type="text/css" href="http://www.gelai8.com/static/widget/flshare/flshare.css">
<div class="flshare" id="myshare">
<!--{eval //飞龙提示:此为discuz的php写法
$url='http%3A%2F%2Fwww.gelai8.com%2Fchuangzuo.php%3Fmod%3Dview%26musicid%3D'.$musicid;
//echo '$url='.$url;
$title='%E6%AD%8C%E6%9D%A5%E7%BD%91';//歌来网
$text='%E6%AD%8C%E6%9D%A5%E7%BD%91';//歌来网
}-->
<a id="sinaweibo" href="http://v.t.sina.com.cn/share/share.php?appkey=2788964267&title=oklook&url=$url" target="_blank" onclick="jump_url('sinaweibo');" rel="noopener noreferrer"><span>新浪微博</span></a>
 
<a id="qzone" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=$url" target="_blank" onclick="jump_url('qzone');" rel="noopener noreferrer"><span>QQ空间</span></a>
 
<a id="txweibo" href="http://v.t.qq.com/share/share.php?title=$title&url=$url&appkey=dcba10cb2d574a48a16f24c9b6af610c" target="_blank" onclick="jump_url('txweibo');" rel="noopener noreferrer"><span>腾讯微博</span></a>
 
<a id="renren" href="http://share.renren.com/share/buttonshare.do?link=$url" target="_blank" onclick="jump_url('renren');" rel="noopener noreferrer"><span>人人</span></a>
 
<a id="kaixin001" href="http://www.kaixin001.com/repaste/bshare.php?rtitle=$title&rurl=$url" target="_blank" onclick="jump_url('_blank','kaixin001');" rel="noopener noreferrer"><span>开心</span></a>
 
<a id="douban" href="http://shuo.douban.com/!service/share?&href=$url&name=$title&text=$text" target="_blank" onclick="jump_url('douban');" rel="noopener noreferrer"><span>豆瓣</span></a>
 
<a id="sohu" href="http://t.sohu.com/third/post.jsp?url=$url&title=$title&content=utf-8&appkey=GTnImhxM56" target="_blank" onclick="jump_url('sohu');" rel="noopener noreferrer"><span>搜狐微博</span></a>
 
<a id="baiduhi" href="http://apps.hi.baidu.com/share/?url=$url&title=$title" target="_blank" onclick="jump_url('baiduhi');" rel="noopener noreferrer"><span>百度搜藏</span></a>
 
<a id="pengyou" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url=$url&title=$title" target="_blank" onclick="jump_url('pengyou');" rel="noopener noreferrer"><span>朋友网</span></a>
 
<a id="ifeng" href="http://t.ifeng.com/interface.php?_c=share&_a=share&sourceUrl=$url&title=$title&source=bshare&type=0&key=2i0bjoV" target="_blank" onclick="jump_url('ifeng');" rel="noopener noreferrer"><span>凤凰微博</span></a>
 
<a id="wangyi" href="http://t.163.com/article/user/checkLogin.do?source=bShare&info=$title%20$url" target="_blank" onclick="jump_url('wangyi');" rel="noopener noreferrer"><span>网易微博</span></a>
 
<a id="people" href="http://t.people.com.cn/toshareinfo.action?appkey=5554506767&url=$url&title=$title" target="_blank" onclick="jump_url('people');" rel="noopener noreferrer"><span>人民微博</span></a>
 
<a id="taojianghu" href="http://share.jianghu.taobao.com/share/addShare.htm?url=$url" target="_blank" onclick="jump_url('taojianghu');" rel="noopener noreferrer"><span>淘江湖</span></a>
 
<a id="tomoreshare" href="javascript:" onmouseover="popout('moreshare');"><span>更多</span></a>	
 
 
<div class="flshare" id="moreshare" style="display:none;">
<h4><strong>分享到...</strong> <em onclick="javascript:popout('moreshare');">X</em></h4>
 
<div id="morecont">
<a id="sinaweibo" href="http://v.t.sina.com.cn/share/share.php?appkey=2788964267&title=oklook&url=$url" target="_blank" onclick="jump_url('sinaweibo');" rel="noopener noreferrer">新浪微博</a>
 
<a id="qzone" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=$url" target="_blank" onclick="jump_url('qzone');" rel="noopener noreferrer"><span>QQ空间</span></a>
 
<a id="txweibo" href="http://v.t.qq.com/share/share.php?title=$title&url=$url&appkey=dcba10cb2d574a48a16f24c9b6af610c" target="_blank" onclick="jump_url('txweibo');" rel="noopener noreferrer"><span>腾讯微博</span></a>
 
<a id="renren" href="http://share.renren.com/share/buttonshare.do?link=$url" target="_blank" onclick="jump_url('renren');" rel="noopener noreferrer"><span>人人</span></a>
 
<a id="kaixin001" href="http://www.kaixin001.com/repaste/bshare.php?rtitle=$title&rurl=$url" target="_blank" onclick="jump_url('kaixin001');" rel="noopener noreferrer"><span>开心</span></a>
 
<a id="douban" href="http://shuo.douban.com/!service/share?&href=$url&name=$title&text=$text" target="_blank" onclick="jump_url('douban');" rel="noopener noreferrer"><span>豆瓣</span></a>
 
<a id="sohu" href="http://t.sohu.com/third/post.jsp?url=$url&title=$title&content=utf-8&appkey=GTnImhxM56" target="_blank" onclick="jump_url('sohu');" rel="noopener noreferrer"><span>搜狐微博</span></a>
 
<a id="baiduhi" href="http://apps.hi.baidu.com/share/?url=$url&title=$title" target="_blank" onclick="jump_url('baiduhi');" rel="noopener noreferrer"><span>百度搜藏</span></a>
 
<a id="pengyou" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url=$url&title=$title" target="_blank" onclick="jump_url('pengyou');" rel="noopener noreferrer"><span>朋友网</span></a>
 
<a id="ifeng" href="http://t.ifeng.com/interface.php?_c=share&_a=share&sourceUrl=$url&title=$title&source=bshare&type=0&key=2i0bjoV" target="_blank" onclick="jump_url('ifeng');" rel="noopener noreferrer"><span>凤凰微博</span></a>
 
<a id="wangyi" href="http://t.163.com/article/user/checkLogin.do?source=bShare&info=$title%20$url" target="_blank" onclick="jump_url('wangyi');" rel="noopener noreferrer"><span>网易微博</span></a>
 
<a id="people" href="http://t.people.com.cn/toshareinfo.action?appkey=5554506767&url=$url&title=$title" target="_blank" onclick="jump_url('people');" rel="noopener noreferrer"><span>人民微博</span></a>
 
<a id="woshao" href="http://cloud.woshao.com/share/share.php?link=$url&title=$title&source=101" target="_blank" onclick="jump_url('woshao');" rel="noopener noreferrer"><span>我烧网</span></a>
 
<a id="follow5" href="http://www.follow5.com/f5/jsp/plugin/5share/5ShareNote.jsp?title=$title&url=$url" target="_blank" onclick="jump_url('follow5');" rel="noopener noreferrer"><span>Follow5</span></a>
 
<a id="taojianghu" href="http://share.jianghu.taobao.com/share/addShare.htm?url=$url" target="_blank" onclick="jump_url('taojianghu');" rel="noopener noreferrer"><span>淘江湖</span></a>
 
<a id="zuosa" href="http://zuosa.com/collect/Collect.aspx?u=$url" target="_blank" onclick="jump_url('zuosa');" rel="noopener noreferrer"><span>做啥</span></a>
</div>
 
<span id="more-1313"></span></div>
<!--myshare --></div>

呵呵记录之。

飞龙初发:
2011-10-27 12:44
本文更新网址:
https://feilong.org/external-link-clicks-count

所在目录: 网站开发

新作:

旧文:

  • html css js
  • angular react vue
  • flutter python