由于本站QQ登录的回调接口有点小问题,所以为了更加方便访客在博文下方留言,我决定开放访客留言功能。但是需要补全的信息框比较多,为了更快速的让访客表达自己的想法,所以我决定在评论框处添加《填入QQ自动补全评论者信息》的功能。网上也有相当多的教程,不过为了适配自己的主题,还是得适当地做一些修改。
QQ信息API
以前做了一个API平台,结果主机商跑路了,带着我的数据一同消失在了茫茫人海之中,不过获取QQ信息这部分的接口我还保存在磁盘上,可以直接拿出来用。代码也很简单,我就直接贴出来:
<?php
// header
header("Content-Type:application/json");
// 获取扣扣号
$qq = (isset($_GET['qq']))?$_GET['qq']:$_POST['qq'];
// 过滤
if (trim(empty($qq))) {
echo json_encode(array('status' => 'error','msg' => '未传入QQ号'),320);
}else{
// 获取QQ用户信息
$urlPre='https://r.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?g_tk=1518561325&uins=';
$data=file_get_contents($urlPre.$qq);
$data=iconv("GB2312","UTF-8",$data);
$pattern = '/portraitCallBack\((.*)\)/is';
preg_match($pattern,$data,$result);
$result=$result[1];
$qqnickname = json_decode($result, true)["$qq"][6];
$qqheadimg = "https://q1.qlogo.cn/g?b=qq&nk=".$qq."&s=100&t=1547904810";
// 开始判断这个扣扣号是不是有真实用户信息返回
if ($qqnickname) {
// 如果有,就可以返回JSON数据
echo json_encode(array('status' => 'success','msg' => '获取用户信息成功','nickname' => $qqnickname,'headimg' => $qqheadimg),320);
}else{
//如果没有,那么只能返回获取失败
echo json_encode(array('status' => 'error','msg' => '获取用户信息失败'),320);
}
}
?>
利用QQ空间的接口来获取到目标的QQ信息,不过如果QQ用户关闭了QQ主显,那么将无法获取到其他信息,所以后续在JSON数据中添加一个错误情况,避免前端出现展示错误。
前端修改
为了方便调试,我决定在本地对评论框进行修改和测试,F12将评论框的代码复制下来,贴到HTML文件里,接着咱们来对它进行改造。
JavaScript添加
我们引入JQuery库来帮助我们完成本次js文件的构造,昨天BootCDN挂了,所以我推荐大家将JQuery拉到本地,或者用Staticfile CDN来替换,比较靠谱:
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
为了方便信息的获取,我们需要使用ajax来请求我们所需要的信息,例如下面的请求代码:
$.ajax({
url: "/qq_data.php", //如果网站开启了HTTPS,记得这里要修改成https的链接
type: "get",
data: { qq: qq_num },
dataType: "json",
success: function (data) {
var json = data;
if (data == null) {
$("#author").val('QQ游客');
}
else if (json.status != "error") {//成功获取
$("#author").val(json.nickname == "" ? 'QQ游客' : json.nickname);
$("div[class='comment-avatar-author flex-avatar w-32 me-3 ']").children()[0].src = 'https://thirdqq.qlogo.cn/g?b=oidb&k=nMfnfkyAIv73hicY24YMwVA&s=40&t=' + qq_num;
$("#email").val(qq_num + '@qq.com');
$('#comment').focus();
get_yiyan();
my_status = 1;
}
else {
$("#qq_num").val("");
my_status = 0;
}
},
error: function (err) {
$("#author").val('QQ游客');
$("#email").val(qq_num + '@qq.com');
my_status = 0;
}
});
这一部分代码算是本次改造评论框的核心部分,需要注意一点的是在于元素的选择上,由于JQuery给出的元素选择和JS原生的有些许不同,所以这方面还是得自己拿捏一下。这个主题的评论框class属性后有一个空格,试了各种办法最后终于解决了。所以在你们自己添加时需要注意一下class属性是否正确。
后面我添加了一个layer的提示框,可以提醒评论者QQ是否填写正确。
评论框架
为了方便节约时间,我直接将前端的评论框复制了一遍,并排在了一起,效果如下图所示:
我感觉还可以,如果你有什么稀奇古怪的想法, 也可以自己加,不过我建议先在本地测试,修改好了在添加到自己的网站上,代码我就贴上通用的:
<input id="qq_num" onblur="get_qqinfo();" placeholder="请输入您的QQ账号">QQ账号
<input id="author">名称
<input id="email">邮箱
<input id="url" placeholder="网站地址">网站
<div class="comment-textarea mb-3">
<textarea id="comment" name="comment" class="form-control" rows="3"></textarea>
</div>
在输入QQ账号的输入框这里,我建议将get_qqinfo()
放置输入框失去焦点时自动执行,如果你非要添加个获取按钮,那样也行。后续的话,我可能会考虑再添加一个滑动按钮,滑动后才能获取QQ信息,避免频繁请求。
问题拓展
后续还有一个问题需要自行解决,如果你的主题较为强大,那么你就可以直接忽略这一点。
在评论者提交评论后,一般主题会保留cookies方便下次提交评论时一键填写,所以我们也需要将QQ号一同保存至cookis中,或者重写写一个js来获取之前填写的QQ邮箱转换为QQ账号,避免影响整体的美感。
主题自带ajax提交评论也需要注意,不要函数冲突,否则会很麻烦,排查也需要花费时间,降低生成力。
效果展示
输入QQ账号后,自动获取用户名,邮箱地址以及头像,并且自动填充评论框的内容(方便留言),网址可以自行添加,并且头像将外链至您的站点。所以高质量的评论非常重要,如果恶意灌水会被自动屏蔽,填充博文感想之时,又为您的站点做了外链,是一件不可多得的美事。
Hello, from CustomData.info we are a provider of unique databases that could help your business.
Please visit us at CustomData.info to see if we can help you.
Regards,
Randal
Hello.
We are offering Bullet Proof SMTP servers that never get suspended. Email as much as you want.
DMCA ignored, bulletproof locations, 100% uptime guaranteed, unlimited data transfer, and 24/7/365 support.
100 Spots available. BulletProofSMTP.org
It is with sad regret to inform you that companyleads.org is shutting down.
We have made available over 300 million records for $149.
Regards,
companyleads.org
Thank you for visiting my blog, but I’m not interested in these data for the time being