将你与好友的饭否插入到Live spaces
Poshi 
Windows Live
饭否,就是中国的Twiter.饭否存在的意义,就在于我们随时有什么想法就可以通过QQ,MSN或者手机发上去,这些想法很随性.而且如果有一个刚想到的问题,你即时放上去被别人浏览,或者也可以从这些浏览者里产生意见.在Live spaces写惯了深思熟虑的长文章的你,有时候也想让大家领略一下你随意的一面吧?所以,饭否提供了可以让我们把自己的饭否帖到自己博客上的代码,有图片,Flash及ScriptJave三种形式,可惜只有ScriptJave一种是可以不仅展示你,也同时展示你好的饭否的.而问题就是,微软的Live spaces是不支持ScriptJave代码的,这自从饭否面市以来不免就一直是我们这些Live spaces支持者的遗憾.
不过,我又看到任平生前几天写的将你喜爱的东西放入Live Spaces一文,介绍了如何把一些本来Live spaces不支持的东西放到Live spaces里,最主要的就是用他开发的一个用于Live spaces的网页嵌入小工具,这个小工具可以嵌入你写的网页.也就是说,你可以把一些Live spaces本来不支持的代码写到网页里,然后你把网页传到网上去得到URL,把这个工具添加到空间里之后把URL填进去.以后网页的内容就会在这个模块显示。
看到这里,我想起了饭否的ScriptJave代码,现在问题就不是问题了!我想只要把这些代码写到html文件里,再把文件传到Skydrive里获得URL,就可以让我与好友的饭否放到Live spaces了.你只要用Skydrive或者其他支持外链的文件上传空间(如果你想用Skydrive的话,注册方式可以看我用代理注册5G容量Skydrive正式版！一文,或者想用其他的空间,可以参考一下任平生的支持文件外链的网络存储空间一文.
首先,把饭否的ScriptJave代码写到html代码里,我是这么写的:
<div style=”width:140;background-color:#F3E8D8;”>
<div style=”width:160;font-size:15px;”>
<b>碎碎念</b>
</div>
<div style=”font-family:Tahoma;border:#D87939 1px solid; width:180;float:left;font-size:11px;”>
<script type=”text/javascript”>
fanfou_name=”poshi”;fanfou_count=10;fanfou_timeline=”friends”;</script>
<script type=”text/javascript” charset=”utf-8″ src=”http://static.fanfou.com/badge/timeline.js”></script></div>
</div>
绿色字体部份把你的饭否代码覆盖进去就可以了，这是我的文件样本，你可以点击看效果：
我把html文件格式的标题[Title]头[head]和主体[body]主体标签都省了，本来是为了简单一点，我就把这个文件上传到Skydrive上，也就是上面这个文件了。我点这里添加了网页嵌入小工具作为空间的模块,然后获得的网页的URL，填到这个模块里的URL输入框：
但是，点击保存了之后得到的效果却很难看：
因为网页左边有一大块空位，就把文字部份挤出浏览器右边了，所以这时我想把这个左边的空隙去掉，但是试了float标签还有其他想到的可能性，都没有改变效果。
而且发现自己写的标题“碎碎念”就变成几个符号（乱码）了，这样更奇怪了，于是只好去请教Belem了，结果在他的论坛里说：
“为列表 ul 和 li 加样式即可”，
“你只要学会
ul {
list-style:none;
margin-left: -34px;
}* html ul {
list-style:none;
margin-left: 0px !important;
}*+html ul {
list-style:none;
margin-left: 0px !important;
}就不错拉 呵呵”
这是他写的：
代码是这样的：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>OK</title>
<!– Styles by Belem –>
<style type=”text/css”>
body {
font-size:12px;
font-family:Tahoma;
}ul {
list-style:none;
margin-left: -34px;
}* html ul {
list-style:none;
margin-left: 0px !important;
}*+html ul {
list-style:none;
margin-left: 0px !important;
}li {
padding: 2px 1px;
}a:link, a:visited {
color:#D87939;
text-decoration:none;}
a:hover {
text-decoration:underline;}
a:active {
color:#D87939;
text-decoration:none;
}img {
border: 0px;
}
#wrapped {
width:180px;
background-color:#F3E8D8;
}
#title {
margin: 4px auto;
padding: 4px;
font-weight:bold;
font-size:15px;
}
#content {
border:#D87939 1px solid;
padding:2px 4px;
}
</style>
</head><body>
<div id=”wrapped”>
<div id=”title”>碎碎念
</div>
<div id=”content”>
<script type=”text/javascript”>
fanfou_name=”poshi”;fanfou_count=10;fanfou_timeline=”friends”;</script>
<script type=”text/javascript” charset=”utf-8″ src=”http://static.fanfou.com/badge/timeline.js”></script>
</div>
</div></body>
</html>
同样的,绿色字体部份是粘帖饭否代码部份，但是belem写的代码就很完整了，他用CSS来控制网页解决了我的问题，而且这样写法更精确！
非常感谢Belem的帮助，他在论坛里说“成了你的御用助理了我, 收费啊… 哈哈”，真是惭愧呀，跟老师学习没有交学费，而且问的这些问题..看来我还是要努力把基础搞好呀。在这时候，看到任平生的回复了，原来这个插件里要设置UTF-8编码！
好了，时间比较紧，先把今天这个事件发上来先，有什么不对的明天再修改吧！届时，我Live spaces右侧的饭否，就整洁多了。。。
