最近把本网站的个人说说的评论做完了,其实自己做网站的评论也不是很难。现在与网友们分享下做评论的心得,希望对那些想要自己做网站评论的站长们有所帮助。
个人觉得评论最烦的地方就在于登录入口,因为绝大多数网站的评论都是需要登录的,而我们不可能要求每一个想要评论的用户都在我们网站注册一个账号,因为这样太过于麻烦,90%的人都不会这样做。而我们在显示评论的时候是需要显示评论者的基本信息的,比如头像,名称。如果仅仅是开放游客身份评论的话,那么我们的评论质量会下降。所以,这个时候,第三方开放平台的登录入口就很好的帮助了我们实现评论者信息的录入。
所以,我们先来说说登录入口问题。本站到目前为止开通了新浪微博和腾讯QQ的登录入口,这2个入口可以说任何想在本站评论的人都能进入,因为现在基本上绝大多数用户都已经拥有了以上2个平台的账号,特别是腾讯QQ。在用户通过第三方登录入口成功登陆后,我们就可以获取该用户在对应的平台上的信息,比如用户使用了QQ登陆本网站后,本网站通过接口可以获取到用户的QQ头像,QQ称昵,QQ空间头像等等信息。这个时候,我们就可以将这写基本信息写入到我们自己的数据库,以便在显示用户评论的时候显示出对应用户的头像和称昵。下面也顺便说说新浪微博和QQ登录的实现方式:
腾讯QQ登录:
首先,网站必须在QQ互联审核通过,这部分就不说了。
1.在登录页面引入:
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="XXXXXX" data-redirecturi="http://www.xxxxxxxx.com" charset="utf-8"></script>
红色部分是你网站在QQ互联通过审核后获取到的APPID,这个是非常重要的一个参数。蓝色部分为登录成功后的回调网址,这里需要注意一下,如果你的网站登录页面和回调页面是同一个页面的话,这个参数是可以省略的。如果你的回调网页是其他页面,那么这里你需要准确的写出该页面的链接。
2.在登录页面调用QQ登录按钮,并且在成功登录的回调函数里调用获取用户基本信息的接口:
<span id="qq_login_btn" data-role="none"></span> <script type="text/javascript"> QC.Login({ btnId: "qq_login_btn", scope:"all", },function(){ QC.api("get_user_info").success(function(a){})}); </script>
获取的基本信息
参数 | 信息 |
a.data.nickname | 用户称昵 |
a.data.figureurl_qq_1 | 大小为40×40像素的QQ头像URL |
a.data.figureurl_qq_2 | 大小为100×100像素的QQ头像URL |
a.data.figureurl_1 | 大小为50×50像素的QQ空间头像URL |
3.注销登录:
QC.Login.signOut();
新浪微博登录:
同理,网站必须在新浪开放平台审核通过。
1.也是在登陆页面引入:
<script src=" http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=2890452764" type="text/javascript" charset="utf-8"></script>
红色部分为网站在新浪开发平台获取的APPKEY。
2.引入新浪微博登录按钮:
<wb:login-button type="3,2" onlogin="login" onlogout="logout"></wb:login-button>
<script type="text/javascript">
function login(o) {}
</script>
获取的基本信息
参数 | 信息 |
o.screen_name | 称昵 |
o.avatar_large | 头像 |
3.注销登录:
WB2.logout(function() {});
以上是腾讯QQ和新浪微博登录与信息获取接口的使用过程。
接下来就是评论内容的添加,删除和显示的问题了。首先,评论数据肯定是写入数据库中的。这个时候我们需要至少2张表,一张是评论内容的储存,一张是用户的储存,也就是存入上面所讲的通过第三方登录平台登陆后的用户基本数据。要完成这部分,我们就需要一个服务端了,本站的服务端是ASP.NET,前端采用Ajax技术与其交互。至于前端怎样显示评论,那是div+css的事了,这里就不说了。下面在说一个评论中非常重要的东西,就是表情。以前觉得做表情很难,其实真的做下来才发现,这是并不是一个难以实现的东西。本站评论表情实现:
表情是通过服务器动态加载的,这样方便我对于表情的更新,服务端发过来的表情信息包括:路径,名称以及表情的文件名(不带扩展名)。我们在点击表情之后,在评论框中显示出表情的名称并用[]括上。当用户确定后将评论信息发送到服务端。之所以用[]括上,是为了方便我我们服务端对评论中表情元素的解析。服务端将评论中的表情解析到数组中,然后依次将评论中的这些表情替换成<img />元素,并加上路径,存入数据库,这样,前端在显示时候就可以显示出表情了。需要注意的是在替换的时候一定要验证表情路径,如果有,则说明用户输入的表情是对的,替换之。如果不存在路径,则说明很有可能是用的评论中带了[]括号,但是是用户自己用来括上内容的而不是表情,则不需要替换。
对于评论内容的分页这里也不说了,这个比较简单。
以上则是本人在做评论时候的一些心得,当然,由于内容有点多,有点东西就没有写下来了哈,不过大多数细节已经写出来了。如果有朋友对这个很感兴趣,或者有疑惑,欢迎随时与我交流哈。
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:网站评论 网站评论开发技巧 QQ互联 新浪开放平台使用
文章固定链接:https://www.pengyaou.com/homeart/MjA=.html
上一篇 纪念WindowsXP