记录成长
分享快乐

WordPress输入QQ号一键获取用户名及邮箱

经常浏览博客且常留言的小伙伴可能会发现一些网站上为了方便用户快速输入用户信息提供了一个“输入QQ号快速填写信息”的功能,功能不大但确实有利于增加博客留言的积极性。今天无意浏览博客的时候发现了这段代码的出处 —— 秋叶网络博客,遂记录之。希望能帮助到同样需要此功能的小伙伴们尽快部署上。

在我实际的测试过程中,发现了一些小问题,于是仿造博客112的做法,对代码做了简单修改。好了,废话不多说,还是看下具体的部署方法。注意:对主题进行修改操作之前请自行备份需要修改的文件,以防误操作引起的网站崩溃!!!

自建API获取QQ信息

新建一个 PHP 文件,将下面代码丢进去,文件名可自取,这里以 get_qq_info.php 命名。创建完成后将 get_qq_info.php 文件丢到网站根目录下以用于以后调取,其实你也可以将它放在网站的任何一个目录下,只需要保证后面 JS 代码调取是路径正确即可。

<?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号!";
    }
?>

好吧,其实这里面还是通过腾讯开放的接口获取到Q Q用户的真实昵称。

JavaScript脚本调用API

将以下代码添加到主题的主要 JS 文件中去,DUX主题添加到 /js/main.js 文件中即可,当然如果主题支持后台自定义代码也可以直接放在后台自定义代码位置,注意加上 script 标签。

function fn_qqinfo(){
    var qq_num=$('#qqinfo').val();
    if(qq_num){
        if( !isNaN(qq_num)){
        $.ajax({
        url:"http://blog.quietguoguo.com/api/qqinfo/get_qq_info.php",    //如果网站开启了HTTPS,记得这里要修改成https的链接
        type:"get",
        data:{qq:qq_num},
        dataType:"json",
            success:function(data){
                $("#email").val(qq_num+'@qq.com');
                $('#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');
                $('#comment').focus();
            }
        });
        }else{
            $("#author").val('你输入的好像不是QQ号码');
            $("#email").val('你输入的好像不是QQ号码');
        } 
    }else{
         $("#author").val('请输入您的QQ号');
         $("#email").val('请输入您的QQ号');
    }
}

注意:如果网站开启 HTTPS 的话注意将上述代码中链接改为对应的 https 格式。

配置前端显示代码

将以下代码填入你主题的 comments.php 文件中:

<input class="你主题的对应样式" type="text" name="qqinfo" id="qqinfo" maxlength="12" value="" tabindex="5" placeholder="输入QQ号快速填写信息" onblur="fn_qqinfo()" /><span class="你主题的对应样式" >Q Q(选填)</span>

就我目前所使用的 DUX 主题而言将下面这段代码填到 comments.php 文件中的 ul 标签之后即可:

<li class="form-inline"><label class="hide" for="qqinfo">QQ</label><input class="ipt" type="text" name="qqinfo" id="qqinfo" maxlength="12" value="" tabindex="5" placeholder="输入QQ号快速填写信息" onblur="fn_qqinfo()" /><span class="text-muted" >Q Q(选填)</span></li>

至此,全部修改操作完成,注意刷新 CDN 缓存及浏览器缓存等,避免不能实时查看到效果。

赞(8) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » WordPress输入QQ号一键获取用户名及邮箱
分享到: 更多 (0)

评论 32

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #15

    dux 5.1好像用不了了

    老魏   | iPhone | Safari 604.1 | 2周前 (11-05)回复
  2. #14

    试试

    恐怖如斯d(д   | Windows NT | Chrome 69.0.3497.100 | 2个月前 (10-05)回复
  3. #13

    想测试看看

    蘑菇   | Windows NT | Chrome 55.0.2883.87 | 2个月前 (09-30)回复
  4. #12

    厉害了 我试试看

    安卿辰   | Windows NT | Chrome 55.0.2883.87 | 2个月前 (09-30)回复
  5. #11

    试试看

    B   | Windows NT | Chrome 69.0.3497.100 | 2个月前 (09-23)回复
  6. #10

    我和你一样的主题,我的能获取QQ头像,但是获取不到昵称,全部默认显示的Q游客,能帮我看下什么问题吗。

    清净。   | Linux | Chrome 57.0.2987.132 | 3个月前 (09-03)回复
    • @ 清净。 应该是调用的时候出了问题,看下调用的文件。

      蝈蝈要安静     | Windows NT | Chrome 68.0.3440.106 | 3个月前 (09-03)回复
  7. #9

    能获取头像吗

    清净。   | Linux | Chrome 57.0.2987.132 | 3个月前 (09-02)回复
  8. #8

    我和你同样的主题,同一时间同一个QQ号我的只显示QQ游客,不知是什么原因

    家燕   | Mac OS X | Chrome 68.0.3440.106 | 3个月前 (08-21)回复
    • @ 家燕 看下配置可能有那些地方不太对。

      蝈蝈要安静     | Windows NT | Chrome 63.0.3239.132 | 3个月前 (08-23)回复
      • @ 蝈蝈要安静 代码完全抄你的也还是一样 :shock:

        家燕   | Mac OS X | Chrome 68.0.3440.106 | 3个月前 (08-24)回复
        • @ 家燕 查看下报错信息,根据提示修改调整。

          蝈蝈要安静     | Windows NT | Chrome 68.0.3440.106 | 3个月前 (08-24)回复
          • @ 蝈蝈要安静 请问报错信息在哪里看得到,谢谢

            家燕   | Mac OS X | Chrome 68.0.3440.106 | 3个月前 (08-24)回复
            • @ 家燕 看下前端调用的代码,JS代码是否加载正常,然后再看下JS代码中的路径是否跟你文件放置路径一致。

              蝈蝈要安静     | Windows NT | Chrome 63.0.3239.132 | 3个月前 (08-25)回复
              • @ 蝈蝈要安静 好像是在error:function(err)err这里报错了,我把这块的QQ游客改成了QQ游客2,然后获取到的昵称就是QQ游客2了,请问这是哪个地方出错了呢

                家燕   | iPhone | 未知浏览器 | 3个月前 (08-25)回复
                • @ 家燕 那就不太清楚了,不过不应该啊,你再测试下看看。

                  蝈蝈要安静     | Windows NT | Chrome 63.0.3239.132 | 3个月前 (08-25)回复
                  • @ 蝈蝈要安静 刚我用手机然后换了个浏览器同时用4G网络评论能正常获取到昵称,但同一手机上相同环境换另一个浏览器依然获取不到(浏览器缓存已经清除了),电脑上也还是获取不到

                    家燕   | Mac OS X | Chrome 68.0.3440.106 | 3个月前 (08-25)回复
                    • @ 家燕 额,这个就不太清楚了。是不是禁用JS了呢?

                      蝈蝈要安静     | Windows NT | Chrome 68.0.3440.106 | 3个月前 (08-27)
  9. #7

    打赏你五毛钱,博主买辣条吃!

    wzxb44   | Windows NT | Chrome 63.0.3239.132 | 4个月前 (08-06)回复
    • @ wzxb44 谢谢你的辣条,吃完后又能元气满满地更新文章了 :smile:

      蝈蝈要安静     | Windows NT | Chrome 63.0.3239.132 | 4个月前 (08-06)回复
  10. #6

    接口老化,如需帮助,请在我的博客留言页面留言,并测试我的一键获取头像

    云柯博客   | Windows 7 | Chrome 63.0.3239.132 | 5个月前 (07-03)回复
  11. #5

    为啥不能获取QQ头像?

    @   | Windows NT | Chrome 67.0.3396.87 | 5个月前 (06-16)回复
    • @ @ 没做相关的调取。。。

      蝈蝈要安静     | Windows NT | Chrome 55.0.2883.87 | 5个月前 (06-18)回复
  12. #4

    测试下可以获取头像不

    迷悟。   | Windows NT | Chrome 63.0.3239.26 | 6个月前 (06-07)回复
  13. #3

    我为什么我获取是 qq游客?

    倾心   | Linux | Chrome 66.0.3359.126 | 6个月前 (05-20)回复
    • @ 倾心 如果获取不到QQ信息的话就会返回“QQ游客”。

      蝈蝈要安静     | Windows NT | Chrome 66.0.3359.181 | 6个月前 (05-20)回复
  14. #2

    要是能获取QQ头像就更好了

    落叶   | Windows 7 | 搜狗浏览器 2.X | 8个月前 (03-27)回复
  15. #1

    测试

    落叶   | Windows 7 | 搜狗浏览器 2.X | 8个月前 (03-27)回复

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏