首先声明一下,这篇内容来自于Jeffrey Zhao的文章《在网页里添加Web Live Messenger对话框 》。
刚刚我自己也跟着搞了一下,就收藏至此,同志们如果要深入学习,还是看看老赵的这篇原创吧!(强烈推荐!!!)
我本人对JaveScript基本上是一窍不通啦,也是懒惰也是太忙,看懂它完全是用英文+其他语言的编程基础,至于具体怎么搞,复杂一点我就乱套了,算是我的一个软肋吧,近年来JavaScript红得不得了,真不知道自己为什么也没鼓足勇气去学习它,再加上平时都没用到,能用Server端的东西就不爱去折腾这个Client的宠儿了……(也感受过无数次JavaScript的优势,真的是,改天一定要彻头彻尾地学习一下JavaScript……)
下面以在cnblogs中如何操作这个代码进行一下描述(老赵的文章主要针对的是原理与他的设计思路,我这里关键在设置心得,嗨~比较菜,只能写点周边……)
准备:
1、jQuery.js文件,这里您可以将它上传至您自己的空间,也可以直接用我的……(不过假设我以后移除了,你就用不到了)
jQuery: https://files.cnblogs.com/volnet/jquery-1.2.1.min.js
2、图片,3张图片(我都是从老赵那里窃取来的,哈哈,老赵别生气……)其实我感觉两张就可以了……老赵搞了3张我也懒得整了就3张吧……
背景:http://www.cnblogs.com/images/cnblogs_com/volnet/85281/o_Messenger_Header_bg.gif
关闭:http://www.cnblogs.com/images/cnblogs_com/volnet/85281/o_Messenger_close_sm.gif
前景:http://www.cnblogs.com/images/cnblogs_com/volnet/85281/o_Messenger_logo_beta.gif
打开这三张图片再对照实际效果我想您就很容易明白了……
3、Live相应服务:
a.登录Live帐户(若您未登录则会进入登录页面);
b.在左侧边框内有“创建HTML”的栏目,点后选择右侧框架中的“Messenger”单选框,拷贝其代码。
创建HTML:http://settings.messenger.live.com/applications/CreateHtml.aspx
步骤:
1、拷贝以下代码:
<div style="border: solid 1px black; 160px; height:39px; cursor:pointer; background-image:url(http://www.cnblogs.com/images/cnblogs_com/volnet/85281/o_Messenger_Header_bg.gif)" id="liveMessengerThumb">
<img src="http://www.cnblogs.com/images/cnblogs_com/volnet/85281/o_Messenger_logo_beta.gif"
alt="使用Live Messenger联系我" style="margin: 10px 10px 0px 9px;"/>
</div>
<table border="0" cellpadding="0" cellspacing="0" id="liveMessengerPanel">
<tr>
<td valign="top">
<img id="hideLiveMessengerPanel" style="cursor:pointer; margin-right: 3px;" src="http://www.cnblogs.com/images/cnblogs_com/volnet/85281/o_Messenger_close_sm.gif" alt="关闭" />
</td>
<td>
<iframe src="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=fa4bd39aec10d7f%40apps.messenger.live.com&mkt=zh-cn" width="300" height="300" style="border: solid 1px black; 300px; height: 300px;" frameborder="0"></iframe>
</td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript" src="https://files.cnblogs.com/volnet/jquery-1.2.1.min.js"></script>
<script language="javascript" type="text/javascript">
function getClientBounds()
{
var clientWidth;
var clientHeight;
if ($.browser.msie)
{
clientWidth = document.body.clientWidth;
clientHeight = document.body.clientHeight;
}
else if ($.browser.safari)
{
clientWidth = window.innerWidth;
clientHeight = window.innerHeight;
}
else if ($.browser.opera)
{
clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
}
else
{
clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
}
return { width : clientWidth, height : clientHeight };
}
function resetLiveMessengerPosition()
{
var clientBounds = getClientBounds();
var container = document.getElementById("liveMessengerContainer");
var scrollLeft = (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft : document.body.scrollLeft);
var scrollTop = (document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop);
var containerLeft = scrollLeft + clientBounds.width - container.clientWidth - 5;
var containerTop = scrollTop + clientBounds.height - container.clientHeight;
$("#liveMessengerContainer").css({top : containerTop + "px", left : containerLeft + "px"});
}
$("#liveMessengerPanel").hide();
$(document).ready(function(){
$(window).scroll(resetLiveMessengerPosition);
$(window).resize(resetLiveMessengerPosition);
resetLiveMessengerPosition();
$("#liveMessengerThumb").click(function(){
$("#liveMessengerThumb").fadeOut(500, function(){
$("#liveMessengerPanel").fadeIn(500, function(){
resetLiveMessengerPosition();
});
resetLiveMessengerPosition();
});
});
$("#hideLiveMessengerPanel").click(function(){
$("#liveMessengerPanel").fadeOut(500, function(){
$("#liveMessengerThumb").fadeIn(500, function(){
resetLiveMessengerPosition();
});
resetLiveMessengerPosition();
});
});
});
</script>
2、找到对应链接实现替换:
(别的可以不换,Live的帐号可一定要换掉,否则我将成为被联系对象了……)
寻找代码中:


并将其替换为您在“准备”步骤3中创建的HTML代码。
3、粘帖代码:
例如:CNBLOGS中,您可以进入“管理”/“选项”/“Configuration”,而后将修改后的代码保存在任一允许放HTML的框内,我是将其放置于“页脚HTML”中。
4、保存,预览效果,注意看清楚是你的LiveMessenger而不是我的……
如果您希望所有用户都可以与您直接交流(包括无LiveId的用户,您需要在http://settings.messenger.live.com/applications/WebSettings.aspx页面上勾选“ ”)