FoxLing - 前端开发 » 嘀咕网 http://foxling.org 我还在寻找方向 Tue, 10 Apr 2012 16:48:41 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 嘀咕怪兽宣传片 http://foxling.org/favorite/digu-com/ http://foxling.org/favorite/digu-com/#comments Wed, 28 Apr 2010 03:50:01 +0000 FoxLing http://foxling.org/?p=559

嘀咕宣传片，感觉节奏快了点，不过挺有创意。

我在嘀咕：@Foxling，欢迎跟随交流。

]]> http://foxling.org/favorite/digu-com/feed/ 5 玩转嘀咕网的嘀咕秀(Widget) http://foxling.org/html-css-xml/digu-show-js-widget/ http://foxling.org/html-css-xml/digu-show-js-widget/#comments Mon, 23 Mar 2009 16:19:46 +0000 FoxLing http://foxling.cn/?p=283 一直郁闷嘀咕网没有开发JS的博客插件，今天终于看到这款APP出来啦，嘀咕秀：http://www.digushow.com。
一共提供了三种Widget，Flash版的，图片版，以及JS版。
图片版一般是用于论坛签名，效果如下：

Foxling's digu

其实，任何支持HTML代码，或者支持图片的地方，都可以加上你的图片签名，如果你要在你的网页中插入图片签名，只需要添加如下代码：

<img src="http://digushow.com/sign/foxling/bbs_sign.png" alt="Foxling's digu" />

其中，foxling改为你的用户名，alt的属性改成你的说明。
如果是要在支持UBB代码的论坛里做签名，使用下面的代码：

[img]http://digushow.com/sign/foxling/bbs_sign.png[/img]

Flash版提供了5种颜色可以选择，不过我都不喜欢，定制性较差~但大多数博客提供商都不支持JS，Flash就是一个不错的选择了。

allowscriptaccess|sameDomain||src|http://www.digushow.com/style/images/sign.swf?mid=foxling&style=2||width|180||height|400

嘀咕秀JS版

对于众多自建博客来说，JS版应该算是最好的选择了，CSS样式完全自主控制，如果熟悉JS的话，HTML结构也可以由自己定制，JS的链接代码：

<div id="diguShow">正在加载嘀咕...</div>
<script src="http://digushow.com/js/digushow.js" type="text/javascript">
</script><script src="http://digushow.com/api/digushow.jsp?callback=diguShowCallback&username=foxling&count=5" type="text/javascript"></script>

有三个可定义的参数，callback后面会说到，先说后两个参数：
username:嘀咕用户名
count:读取的嘀咕数目

JS加载的效果如下

正在加载嘀咕…

在PJBlog和WordPress里添加嘀咕秀JS模块

在Wordpress和Pjblog里添加JS模块都是比较简单的，PJ里可以添加模块，写入HTML代码完成，在WordPress里添加也是非常容易，有多种方法：
1.添加到边栏：后台-外观-小工具，添加一个文本工具，然后进行编辑，填入标题，然后把上面的JS代码复制进去，保存即可。
2.添加到内容栏：写一篇新文章，在HTML代码里输入上面的JS代码，然后把文章置顶~
3.添加到自定义位置：修改你的主题里的index.php文件，把JS代码插入到相应的位置。
我是用第2种方法~可以在首页看到我的嘀咕秀模块。

自定义嘀咕秀JS版的CSS样式

嘀咕秀JS版没有自带任何CSS样式，这样嘀友们可以自己无限发挥~~

JS生成的HTML代码格式如下，生成的代码结构比较简单，并且加上了ID，只需要写相应的CSS即可。

<div id="diguShow">
    <ul id="diguShow_List">
        <li>求Window空间，让我挂个东东吧。<a href="http://digu.com/jump?aid=detail&twId=169480" class="diguShow_time">11小时前</a></li>
    </ul>
    <p id="diguShow_More">
        <a target="_blank" href="http://www.digu.com/foxling">进入<strong>FoxLing</strong>的嘀咕主页»</a>
    </p>
</div>

在主题的style.css里写入CSS(我稍微写了一点样式，不过还是按照我博客简洁的风格)，给每条嘀咕加上了一个小icon，显得更有条理点，可以在我的博客看到效果：

/*DiguShow*/
#diguShow_List {list-style:none;margin:10px 0;padding:0;}
#diguShow_List li {
background:url(/wp-content/themes/sandbox/diguico.png) no-repeat 0 0;
padding-left:17px;
line-height:16px;
margin-bottom:8px;
}
.diguShow_time {color:#999;}
#diguShow_More {text-align:right;margin:0 0 10px 0;}

加入Loading图标

嘀咕秀是在网页加载完后才会加载JS，这点比较好，不会因为网络的原因导致页面卡住~
在加载的时候，显示：正在加载嘀咕…
可以加入一个Loading图标，这样显得更爽点~
Loading图标生成网站：http://www.ajaxload.info/，提供各种样式的Loading图标，可以自定义前景色和背景色。

将默认代码里的
<div id="diguShow">正在加载嘀咕...</div>
替换成
<div id="diguShow" style="background:url(/wp-content/themes/sandbox/ajax-loader.gif) no-repeat left center;padding:5px 0 5px 20px;">
正在加载嘀咕...
</div>

更强的自定义

如果你对JS比较熟悉，可以完全重写JS回调函数，输出你需要的HTML结构。
嘀咕秀是通过JSONP的方式传入函数名，返回相应的格式，解决跨域问题。
上面提到的callback参数就是处理数据要用到的JS函数名，给函数传递了一个参数，是JSON格式的数据。
服务端传回来的JS代码如下：

diguShowCallback(
{
user:{userId:10013552,
nickname:"FoxLing",
signPicName:"http://121.14.39.139:80/file/10/01/35/52/default/SIGN10013552_24x24.jpg",
homepage:"http:\/\/www.digu.com\/foxling"},
status:[{created_at:"3小时前",
text:"嘀咕",
id:181855,
picPath:[]}]
}
);

写好了JS函数后，将JS代码里的这一句替换成你自己写的JS函数的文件链接：

<script src="http://digushow.com/js/digushow.js" type="text/javascript"></script>

完工！

———–2009-09-08 更新——————————————
嘀咕秀更名为无敌秀，目前可以使用
CSS的ID和Class名有所改动，改动如下：

/*Wudishow*/
#wudiShow_List {list-style:none;margin:10px 0;padding:0;}
#wudiShow_List li {
background:url(/wp-content/themes/sandbox/diguico.png) no-repeat 0 0;
padding-left:17px;
line-height:16px;
margin-bottom:8px;
}
.wudiShow_time {color:#999;}
#wudiShow_More {text-align:right;margin:0 0 10px 0;}

如果你还想对无敌秀的JS下刀，可以下载这个地址的js文件进行修改：

http://www.wudishow.com/js/wudishow.source.js

目前可以在我的博客首页右侧栏看到效果。

]]> http://foxling.org/html-css-xml/digu-show-js-widget/feed/ 5 分享链接到嘀咕网 – DiLink http://foxling.org/firefox/dilink-share-link-to-digu-com/ http://foxling.org/firefox/dilink-share-link-to-digu-com/#comments Sat, 21 Feb 2009 14:42:30 +0000 FoxLing http://wp.foxling.cn/as-flex-air/dilink-share-link-to-digu-com/ 嘀咕网上线以后，受到一些业界朋友的推荐他好评，出色的界面，不错的用户体验。

小王子说嘀享插件不太好用，不能编辑，限制太多~洁癖的人啊。。。（其实我也。。。）

于是昨晚弄了一个FireFox的扩展，添加一个按钮到FireFox工具栏上，把链接分享到嘀咕网，对于我这种从来不显示书签栏的人(有些分享的插件，是做一个书签，需要显示书签栏，否则不太方便使用)，这种方式太方便了~~

放出下载地址：https://addons.mozilla.org/zh-cn/firefox/addon/dilink/

功能介绍

  • 点击按钮直接分享当前网页
  • 选中页面上的文字，点击按钮，选中的文字将作为嘀咕内容。

安装步骤详解

  1. DiLink安装步骤一
  2. DiLink安装步骤二
  3. DiLink安装步骤三
  4. DiLink安装步骤四
  5. DiLink安装步骤五
  6. DiLink安装步骤六
  7. DiLink安装步骤七

悄悄放出我在嘀咕网的地址~~http://www.digu.com/foxling 快跟随我的吧，嘿嘿~

]]> http://foxling.org/firefox/dilink-share-link-to-digu-com/feed/ 0 嘀咕网 – 国内Twitter类网站新秀 http://foxling.org/other/digu-chinese-twitter/ http://foxling.org/other/digu-chinese-twitter/#comments Mon, 26 Jan 2009 11:12:52 +0000 FoxLing http://wp.foxling.cn/as-flex-air/digu-chinese-twitter/ 　　接触Twitter的时间不长，刚开始不觉得，现在觉得这种嘀嘀咕咕的感觉挺好的，有什么想法，创意，或者是一点牢骚，都可以记录下来，挺方便，还可以让同事朋友知道你的最近的状态。

总想用用国内的Twitter网站，比如饭否，叽歪；毕竟Twitter是老外的嘛，一来语言障碍，二来上面没什么同事和朋友，不过饭否抄Twitter太像了~，让我不爽，还不如用原生的Twitter，叽歪界面又太难看。。。

好了，忽悠来忽悠去，说到正题了，今天早上在Geedr.com上又发现一个Twitter型的新网站，叫嘀咕网，域名倒挺好，digu.com。

嘀咕，又一个国产的 twitter 类微博客，前身似乎是乐酷 leku （不是索尼爱立信的 PlayNow 乐酷啦）。

嘀咕给我的第一印象就是网站设计做的很棒，乍一看还以为是 Plurk。 其他的东西不用介绍，嘀咕在功能上都做的一应俱全，还有一些小的创新让它看起来不像饭否那么太直白的抄袭 twitter，而且又能让普通用户用的很轻松，插件、客户端、API、模板甚至 digufeed （类似 twitterfeed）都有提供。这样上线不久（其实算上其前身应该有一段时间了）的站点能做的这么完备又漂亮，总让我感觉它们的来头不简单。

嘀咕有一个特点是是大打明星牌，在嘀咕首页可以看到很多明星的页面链接，连团队 Blog 里也有某明星的情人节祝福视频，更让我好奇嘀咕的背景了，是什么能让嘀咕拉到这么多明星？

虽然我一直倡导使用 twitter，但说实话这个站点的综合素质就我看来在国内来说是相当棒的，也希望这个团队可以做的更好，说不定哪一天可以把我从 twitter 上拉过去

说得貌似不错，建帐号体验一把

 

界面清新，简单，我喜欢，自定义了一把主题，嘿嘿，我的主页帅不。

比较遗憾的是，目前没有类似TwitterFox这种FireFox的小插件，遗憾，哪位大侠来开发一个？

]]> http://foxling.org/other/digu-chinese-twitter/feed/ 2