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

投稿   Devoted  2017-07-17 07:28:04  478 人阅读  43 条评论

投放广告联系   诚邀合作伙伴   赞助我们   垃圾评论惩罚

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

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

异步加载获取 QQ 信息

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

1、创建 QQ 评论表单信息

找到 comments.php 文件,也就是评论模版,在适当的位置加入表单代码(输入框):

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

2、api配置

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

  1. <?php
  2.  header('Content-Type: text/html;charset=utf-8');
  3.  $QQ=$_GET["qq"];
  4.  if($QQ!=''){
  5.  $urlPre='http://r.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?g_tk=1518561325&uins=';
  6.  $data=file_get_contents($urlPre.$QQ);
  7.  $data=iconv("GB2312","UTF-8",$data);
  8.  $pattern = '/portraitCallBack\((.*)\)/is';
  9.  preg_match($pattern,$data,$result);
  10.  $result=$result[1];
  11.  echo $result;
  12.  }else{
  13.  echo "请输入qq号!";
  14.  }
  15. ?>

3、js 调用 api

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

  1. function devoted(){var qq_num=$('qqinfo').val();
  2. if(qq_num){
  3.   if( !isNaN(qq_num)){
  4.     $.ajax({
  5.        url:"http://www.joffrey.cn/get_qq_info.php",<!--这里的www.joffrey.cn改成你的博客地址-->
  6.        type:"get",
  7.        data:{qq:qq_num},
  8.        dataType:"json",
  9.        success:function(data){
  10.        $("#email").val(qq_num+'@qq.com');
  11.        $("#url").val('http://user.qzone.qq.com/'+qq_num);
  12.        $('#comment').focus();
  13.        if(data==null){
  14.         $("#author").val('QQ游客');
  15.        }else{
  16.         $("#author").val(data[qq_num][6]==""?'QQ游客':data[qq_num][6]);
  17.        }
  18.     },
  19.     error:function(err){
  20.        $("#author").val('QQ游客');
  21.        $("#email").val(qq_num+'@qq.com');
  22.        $("#url").val('http://user.qzone.qq.com/'+qq_num);
  23.        $('#comment').focus();
  24.     }
  25.      });
  26.    }else{
  27.     alert('你输入的好像不是QQ号码');
  28.     $('#qqinfo').focus();
  29.    }
  30. }else{
  31.     alert('请输入您的QQ号');
  32.     $('#qqinfo').focus();
  33. }
  34. }

4、注意事项

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

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

  1. .fabiao {
  2.     background-colorrgb(252,252,252);
  3.     background-image: -moz-linear-gradient(top,#fff,#f6f6f6);
  4.     background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0,#fff),color-stop(1,#f6f6f6));
  5.     background-image: -ms-linear-gradient(top,#fff,#f6f6f6);
  6.     box-shadow: #bbb 0 1px 2px;
  7.     color#666;
  8.     cursorpointer;
  9.     padding1px 8px;
  10.     height26px;
  11.     line-height25px;
  12.     border-left#ccc 1px solid;
  13. }

拓展阅读

历史上的今天:

文章标签: ,   ,  
原文地址:http://devoted2.site/
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 Devoted 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!

 发表评论


  1. 文轩
    文轩 【小白】 @回复

    这个不错

  2. QQ游客
    QQ游客 【小白】 @回复

    不会弄啊

  3. 田梓衡的博客
    田梓衡的博客 【小白】 @回复

    谢谢,这样就给那些不懂或者不会填、懒得填的访客提供了一个便捷的填写方式,最后,感谢分享!

    • boke112导航
      boke112导航【村长】2017-08-05 21:22  回复

      @田梓衡的博客其实这个比较适合一般游客用户,如果是站长的还是建议使用哪个JS代码,一键填写所有评论信息

  4. 云陌网络
    云陌网络 【小白】 @回复

    主题的公共 js,我用的Blogs1.0,是不是js/comments-ajax.js这个文件,把所以的步骤完成后,输入QQ并没有调取QQ信息(JS的网址也换了)

  5. 多雨的季节
    多雨的季节 【小白】 @回复

    哦,这个挺屌的,微博内置浏览器下很完美!

  6. BanYuner
    BanYuner 【进士】 @回复

    一般玩WordPress得人不会没有一个账号的吧

  7. 陌小雨
    陌小雨 【进士】 @回复

    火狐下可用,chorm下好像没用哦

  8. 九哥
    九哥 【进士】 @回复

    确实,每次都要填信息很麻烦。这个方法不错,很实用。

    • boke112导航
      boke112导航【村长】2017-07-18 22:39  回复

      @九哥经常玩博客的,都会使用一键添加昵称、邮箱、网址的JS代码,不过如果是其他用户的话,这个就很方便了

  9. 闲鱼
    闲鱼 【状元】 @回复

    其实访客用这个评论得少,不过聊胜于无,也能提高评论的可能性

    • boke112导航
      boke112导航【村长】2017-07-18 22:41  回复

      @闲鱼[嘻嘻] 好过没有,刚好遇到想要评论的,那么这个就比较方便了

  10. 演绎法
    演绎法 【进士】 @回复

    真心不想写

  11. 学史博客
    学史博客 【举人】 @回复

    很实用的技能!

  12. 明月学习笔记Blog
    明月学习笔记Blog 【进士】 @回复

    Typecho 的无语飘过!

  13. 于闻观纸
    于闻观纸 【书童】 @回复

    这个教程不错

  14. 马超金博客
    马超金博客 【举人】 @回复

    学习了 [OK]

  15. 单触角蚂蚁
    单触角蚂蚁 【举人】 @回复

    不错的教程,学习了!!!

  16. 旭博客
    旭博客 【小白】 @回复

    这个功能虽方便,但是也容易有垃圾评论。。

    • boke112导航
      boke112导航【村长】2017-07-18 22:44  回复

      @旭博客结合本站分享的纯代码屏蔽垃圾评论的做法,经常添加一些词语到黑名单中,可以有效防止垃圾评论

  17. 励志语录
    励志语录 【进士】 @回复

    学习了,好文章!

  18. 微信红包活动网
    微信红包活动网 【秀才】 @回复

    我还是喜欢用自带的

  19. QQ游客
    QQ游客 【秀才】 @回复

    [嘻嘻]试试效果

  20. 小苍老师
    小苍老师 【状元】 @回复

    为什么不搞个插件咧!

  21. 小苍老师
    小苍老师 【状元】 @回复

    感觉还挺不错,有时间自己博客上也弄上!

  22. 192.168.1.1
    192.168.1.1 【小白】 @回复

    一键获取QQ的功能很实用呀,看到不少博客都在用的。

  23. 玉满斋
    玉满斋 【尚书】 @回复

    我发现很多人输入了QQ号就完了!

  24. 明月登楼
    明月登楼 【王爷】 @回复

    我发现很多人竟然不会用这个QQ信息快速填充功能!

  25. 灵异世界网
    灵异世界网 【进士】 @回复

    哇,你得站已经用上了。

  26. 橘子书
    橘子书 【丞相】 @回复

    跟inlojv的教程相比,好像简单了许多

    • boke112导航
      boke112导航【村长】2017-07-17 10:47  回复

      @橘子书inlojv的教程还能显示QQ头像,本文目前没有这个功能

      • 橘子书
        橘子书 【丞相】2017-07-17 10:49  回复

        @boke112导航但相对来讲,太复杂了,一般新手不会用。昨晚我测试过了。估计是api失效,居然无法获取头像与昵称了。

  27. devoted
    devoted 【举人】 @回复

    第一种非异步加载貌似也失效了,你删除下吧!!

  28. devoted
    devoted 【举人】 @回复

    赞赞赞,给力赞

  29. 龙笑天
    龙笑天 【状元】 @回复

    这个获取的是QQ空间的头像啊~

  30. 网赚乎
    网赚乎 【举人】 @回复

    很好的一个功能

  31. 爱时尚
    爱时尚 【小白】 @回复

    这个功能是新加的吧

    • boke112导航
      boke112导航【村长】2017-07-17 09:21  回复

      @爱时尚现在好像比较流行,很多站点都增加了这个功能

  32. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    这个还是比较有用的,可以节省不少时间

    • boke112导航
      boke112导航【村长】2017-07-17 09:22  回复

      @靠谱学生兼职网是的,特别是非博主站长的用户,要他们输入昵称、邮箱地址、网址比较繁琐,直接输入QQ号就搞定了

  33. GoDaddy优惠码
    GoDaddy优惠码 【书童】 @回复

    实用 感谢分享