WordPress评论一键获取QQ资料填写评论框详细教程

平时在评论各大博主文章的时候，每次都要输入昵称、邮箱、网站三条信息，这样不但麻烦，而且会让我们失去评论的兴趣。既然如此不便，就想到了如何快速输入这些信息，前面文章《全平台通用评论神器一键自动填写昵称、邮箱和网址》提到了采用浏览器书签的方法将以上信息保存在 javascript 里，每次使用的时候，只需要点一下书签，就可以自动填充了，这样的确方便了我本人，如果别人不知道这种方法的话，于他来讲，还是不方便的。于是我就开始在网上海量搜集类似的教程，刚开始我看到一个简单的教程，没有用到异步加载，只需要单纯的修改 comments.php 就可以了，详情如下：

WordPress评论一键获取QQ资料填写评论框详细教程-第1张-boke112百科(boke112.com)

异步加载获取 QQ 信息

异步加载的方式相比上面的当然是好处多多，你懂的！但要设置的话肯定要比上面麻烦一些，教程如下：

1、创建 QQ 评论表单信息

找到 comments.php 文件，也就是评论模版，在适当的位置加入表单代码（输入框）：

<input id=“qqinfo” maxlength=“12” name=“u” type=“text” value=“” placeholder=“输入 QQ 号码” />
<span class=“fabiao” onclick=“devoted()”>游客评论</span>

2、api 配置

新建一个 php 文件名字叫 get_qq_info.php，存放在网站根目录下，这个可以自定义（如果自定义后面调用地址需要改动一下），把下面的内容拷到文件里面：

<?php
header(‘Content-Type: text/html;charset=utf-8’);
$QQ=$_GET[“qq”];
if($QQ!=”){
$urlPre=’http://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];
echo $result;
}else{
echo “请输入 qq 号！”;
}
?>

3、js 调用 api

在主题的公共 js，我的是 js/commentlist.js 粘贴如下信息：

function devoted(){var qq_num=$(‘qqinfo’).val();
if(qq_num){
if( !isNaN(qq_num)){
$.ajax({
url:“http://www.joffrey.cn/get_qq_info.php”,<!–这里的 www.joffrey.cn 改成你的博客地址–>
type:“get”,
data:{qq:qq_num},
dataType:“json”,
success:function(data){
$(“#email”).val(qq_num+’@qq.com’);
$(“#url”).val(‘http://user.qzone.qq.com/’+qq_num);
$(‘#comment’).focus();
if(data==null){
$(“#author”).val(‘QQ 游客’);
}else{
$(“#author”).val(data[qq_num][6]==“”?’QQ 游客’:data[qq_num][6]);
}
},
error:function(err){
$(“#author”).val(‘QQ 游客’);
$(“#email”).val(qq_num+’@qq.com’);
$(“#url”).val(‘http://user.qzone.qq.com/’+qq_num);
$(‘#comment’).focus();
}
});
}else{
alert(‘你输入的好像不是 QQ 号码’);
$(‘#qqinfo’).focus();
}
}else{
alert(‘请输入您的 QQ 号’);
$(‘#qqinfo’).focus();
}
}

4、注意事项

由于涉及到 js 的修改，如果网站采用七牛 cdn 缓存的话，一定要清除缓存更新七牛文件信息，不然会很坑很坑。

还有异步加载的方式，需要对 css 进行简单的修改，如果不修改 css 的话“游客评论”这个按钮是不显示的，只显示文字，css 样式可参考本站的，在 style.css 里添加如下信息即可：

.fabiao {
background-color: rgb(252,252,252);
background-image: -moz-linear-gradient(top,#fff,#f6f6f6);
background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0,#fff),color-stop(1,#f6f6f6));
background-image: -ms-linear-gradient(top,#fff,#f6f6f6);
box-shadow: #bbb 0 1px 2px;
color: #666;
cursor: pointer;
padding: 1px 8px;
height: 26px;
line-height: 25px;
border-left: #ccc 1px solid;
}

拓展阅读

WordPress 评论框输入 QQ 获取头像和昵称的教程

WordPress评论一键获取QQ资料填写评论框详细教程

异步加载获取 QQ 信息

拓展阅读

相关文章

最新文章

热门标签