友言界面定制(代码定制,非后台自定义)
友言是国内最专业的第三方实时社会化评论系统,“完全社交化”可将评论一键同步到各大微博与社区(目前支持10个社交媒体),同时将评论的回复与跟帖同步至使用的网站上,让网站变得更具有活力和社交性,从而为网站带来更多的回访和流量,是一个简单而强大的社会化评论及聚合平台。
使用友言的优势有:
1、精确定位用户:不再是冷冰冰的用户名与邮箱,在他们授权后,您可以看到他们丰富多彩的社交网络信息。
2、更多的流量与访客:通过社交媒体优化(SMO),为您带来留言者的好友,增加网络流量,口碑营销更加高效。
3、高质量的评论:实名制的留言系统,将大大提高评论的质量。
4、智能统计:系统针对您的网站提供更加全面有效的统计功能,完全掌控网站的信息动向。
基于以上原因,我在我做的一个视频教程网站(http://www.icoolxue.com,一个高清视频教程在线观看的网站)上加入了此功能,事实上,友言的界面有某些时候并不能完全为我所有(有点占空间,由其是在用户昵称和社区功能按扭之间有一段空白区域没有利用起来,正好我做的网站有两个功能:评分和下载视频教程找不到地方放置,于是乎需要手动将这两个功能的控件加到此区域里),定制后的效果如下:
友言是通过JS来生成界面代码的,所以,要定制界面只有用JS代码来啦。此处注意:需要使用window.onload事件来处理,切不可以使用$(function(){//代码})。代码如下:
window.onload = function() { $("#uyan_like").after('<span style="padding-left: 30px;">[url=${contextPath}/download/video/${video.id}]<i class="icon-download icon-large"></i> ${"download.video.button.title".message}[/url]</span>'); $("#uyan_like").after(String.format("<span style='font-size: 16px; padding-left: 30px;'>{0}</span><span class='rating' data-video-id='{1}' data-score='{2}' style='padding-right: 13px; padding-top: 0px; font-size: 16px; color: #424242; font-weight: 600; line-height: 30px;'></span>", '${"video.rating.title".message}', '${video.id}', '${video.rating}')); rating(); $("#uyan_comment").grumble({ text: "${'review.ujian.review'.message}", angle: 100, distance: -20, hideAfter: false, hasHideButton: true, buttonHideText: "Close Me!" }); $('.ujian-hook div div div a:last').text(""); };