把你的藏书显在你的blog上!

阿北 04-06-2005

[2005-6-14 更新] 代码生成器已经开通,以下内容已经失效,请不要再用。
详情请看把你的藏书显在你的blog上: 2

看看这页的右边。“阿北在看、阿北想看”是自动从豆瓣评论上自动转过来的。cool, huh?

你也可以把你的藏书或者推荐书的封面自动放在你的blog或个人网站上。很简单,在你的网页或者blog模板上嵌进这句javascript:

<script type=”text/javascript” src=”https://douban.com/collection/1000001/?view=badge” ></script>

就好了。你需要把1000001换成你的豆瓣ID或者username. 最简单的做法是到“我的收藏”这页,拷贝url, 后面加上 ?view=badge 就好了。

[upate: 如果你拷贝上面这句,记着把中文引号换成英文引号。WP自动把我打的英文引号都换成了中文引号,纳闷。]

缺省是按时间新旧为序显示最多十本书,两本书一行。你可以加 n=改变数目, columns=改变每行数目,select=favorite只显示你的推荐书(按评价排序,力荐书在先,推荐书在后。力荐书里后收藏在先,诸如此类). 比如:

<script type=”text/javascript” src=”https://douban.com/collection/ahbei/?view=badge&n=6&columns=1&select=favorite” ></script>

显示6本你最喜欢的书,每行一本。

有谁用了,来说一下吧,给个链接大家看看。

[2005/05/05 更新] 以上的连接将把书和电影在一起展示。如果你需要分开,使用:

<script type=”text/javascript” src=”https://douban.com/collection/ahbei/book/?view=badge ></script>

<script type=”text/javascript” src=”https://douban.com/collection/1000001/movie/?view=badge&n=6&columns=1&select=favorite” ></script>

[2005/05/24 更新] “我想看的”也可以放在你的blog上了。以上链接里把collection换成wish就行了。
[2005/06/13 更新] “我在看的”也可以了。以上链接里把collection换成do就可以了。

以下是相关回应

  1. 好东西。我想,是不是还可以参考flickr的几种调用模式?

    不过,现在右侧还没有显示效果,在调试么。

    大头绿豆 Says: 四月 6th, 2005 at 1:10 下午
  2. heh… 你现在看不到右侧的藏书列表吗?

    阿北 Says: 四月 6th, 2005 at 1:19 下午
  3. 没有显示啊!

    tsingove Says: 四月 6th, 2005 at 1:22 下午
  4. 又是browser问题。(我用Mac看没问题) 检查中。

    阿北 Says: 四月 6th, 2005 at 2:17 下午
  5. 好了。倒霉的IE, 竟然不认<script … />, 非要一个<script … ></script>不可。

    阿北 Says: 四月 6th, 2005 at 4:04 下午
  6. 能不能在自己的blog上显示正在读的书?或者最近读过的书?我想这比现在这种方式好一些。现在这种方式让人感觉好像你是卖书的一样。

    shizhao Says: 四月 6th, 2005 at 5:35 下午
  7. 这个容易实现,用tag就是了。可是你希望在你的blog上用什么形式显示?现在的这种图标形式,还是用字符标题?说说你的想法吧。

    阿北 Says: 四月 6th, 2005 at 6:05 下午
  8. 放了一下,挺好的。就是太慢了。blog的主页要等到这个javascript运行完了才从空白变成有内容的。allconsuming.net的那个插件也有同样的问题。不知道有没有什么办法告诉网页最后再load这个javascript呢?我用mt.

    Jean Says: 四月 7th, 2005 at 4:56 上午
  9. 你可以试试在script语句里加”defer”。我已经改动了这页,你看看在windows上效果怎么样。

    阿北 Says: 四月 7th, 2005 at 1:35 下午
  10. defer似乎只是“hint”,所以从firefox里看没有什么区别,主要的博克内容还是要等豆瓣搞定了才出来。就跑到不怎么用的IE里看了看,因为据说IE倒是听从“defer”的,结果吓了一跳,整个网页是白的,只有douban给的四张封面照片!:O
    这是我用的script,不知道在回应里会不会显示?

    Jean Says: 四月 7th, 2005 at 2:32 下午
  11. 一?IE又好了。。。 :) 而且比firefox好,优先生成了BLOG内容再去生成的豆瓣。。。居然IE也有做得比firefox好的地方。有趣。谢谢阿北!我再google一下儿怎么折腾firefox才好。也许索性改一下儿template。。。

    Jean Says: 四月 7th, 2005 at 2:44 下午
  12. 也吓得我赶紧给改了回来。我有点黔驴技穷了。谁有绝活给指点一下。

    阿北 Says: 四月 7th, 2005 at 2:45 下午
  13. 呵呵,sorry. 又试了试,好像我这个叶子就是不能用defer,一加defer IE就不干活了。可能因为豆瓣在国内的缘故。也许国内的同学用这个script就不会这么明显的慢吧。

    Jean Says: 四月 7th, 2005 at 3:29 下午
  14. 还不能显示?还没修好?

    jay Says: 四月 7th, 2005 at 3:31 下午
  15. 豆瓣

      
      豆瓣:可以评论自己喜爱的书,查看别人的评论,还可以把你的藏书显在你的blog上。不错!还在调试中。已开放注册。…

    Jay's blog Says: 四月 7th, 2005 at 3:47 下午
  16. 谢谢,这个功能确实很好用。但是显示出来的图书图片上有边框,有什么好建议吗?

    autumnleaf Says: 四月 7th, 2005 at 5:24 下午
  17. 增加了 style=”border-width:0″。再试一下看怎么样。

    阿北 Says: 四月 7th, 2005 at 5:41 下午
  18. wow,效率很高呀。不过doesn’t work。应该是因为有链接。所以给它加上了border

    autumnleaf Says: 四月 7th, 2005 at 6:13 下午
  19. 你需要在你blog的template的css里加

    a img {border-width:0;}

    阿北 Says: 四月 7th, 2005 at 6:53 下午
  20. 改好啦!谢谢

    autumnleaf Says: 四月 7th, 2005 at 8:35 下午
  21. 好是好!但是似乎不能通过W3C认证啊~看来代码还不规范,改进一下。

    hzjoey Says: 四月 9th, 2005 at 3:41 下午
  22. 我把script加到blog的左欄. 不行啊,没有显示.

    Andrea Says: 四月 17th, 2005 at 12:07 上午
  23. 你先试一下script语句里src=”http://…”里的连接有没有问题。应该出来一些javascript。然后再看script自身。

    应该可以出现在blog的任何地方。

    阿北 Says: 四月 17th, 2005 at 11:16 上午
  24. js输出的代码能不能不用table。。。。

    Aether Says: 四月 25th, 2005 at 12:06 上午
  25. 应该启用标准化的div+css输出,以便使用者可以方便的在自己站点上定制符合整体风格的样式;

    Aether Says: 四月 25th, 2005 at 12:37 上午
  26. 还有,居然在本页打开书的链接?
    这对于任何一个blog主人而言似乎都是一个非常难以接受的;应该使用新窗口打开浏览的用户体验。

    Aether Says: 四月 25th, 2005 at 12:43 上午
  27. Aether, 有关”table”你说的对。会尽快改成div。

    在本页打开连接并没有你说的那么“令人发指”。链接用新窗口弹出是中国大陆特有的一种使用习惯,据说是新浪在28.8k时代率领全国网民一起形成的奇特而偶然的作风,其实是违反web的使用原则的。在大多数国家弹出新窗口对用户是极不礼貌,需要慎重考虑的一种做法。你也可以试一下flickr的类似链接,就知道了。

    当然了,我们必须照顾多数用户的习惯,无论是否合理。连google的简体中文版去年开始都加上了target=_blank ,我们还是不要去单挑风车吧。但是我希望blogger们能把这个习惯扭转过来。会把这个作为可选项。

    阿北 Says: 四月 25th, 2005 at 1:18 上午
  28. target=_blank 加上去了。还是觉得你说的有道理。

    阿北 Says: 四月 27th, 2005 at 1:00 下午
  29. 能随机选择书显示吗?

    听夏 Says: 四月 28th, 2005 at 9:31 下午
  30. 另外,代码不符合W3C标准,能否改一下?

    听夏 Says: 四月 28th, 2005 at 9:39 下午
  31. 哦… 听夏,能具体点吗?我不是很熟悉w2c标准。

    随机选择是好主意,放在todo之中吧。

    阿北 Says: 五月 10th, 2005 at 10:47 下午
  32. 我的观点是,到本站其他页面的链接尽量不新开窗口,到其他站点的链接,应该开新窗口。

    大头绿豆 Says: 五月 13th, 2005 at 3:11 下午
  33. 我的BLOG右下的杂项里添加了这个JS代码(就在搜索上面)~

    我现在已经收藏了两本书

    但是还是没有显示。

    请问何解???谢谢~

    Says: 五月 17th, 2005 at 10:32 下午
  34. 束,把中文引号换成英文引号。

    另外,你的书柜链到了小组,加入的链接也不对。

    阿北 Says: 五月 17th, 2005 at 11:55 下午
  35. 是英文引号的~

    这是源代码

    我的书柜加入读书圈

    另外 书柜和加入读书圈是参照
    http://woooh.com/
    的BLOG

    我的Q是4909977,方便的话帮忙指导

    Says: 五月 18th, 2005 at 7:51 上午
  36. 嗯,很不错。赞!

    yezhu Says: 五月 20th, 2005 at 11:43 下午
  37. 代码还是有很多问题
    编码用的UTF-8,在gb下面的alt就是乱码了,不好。最好像365key那样做一个代码输出,手动太麻烦了。
    而且在浏览器方面也存在问题,我的电影中“天使艾美丽”在IE怎样都不会显示照片,而在firefox下面就可以显示,很是莫名。

    暖暖鱼 Says: 五月 28th, 2005 at 4:50 上午
  38. 暖暖鱼,试一下这个:
    ?view=badge…&encoding=gb2312

    来说一下行不行。

    你说的对,是应该有一个代码输出的。

    我用Mac的Safari也能看到你的“艾美丽”。看看是不是缓存(cache)的问题。

    阿北 Says: 五月 28th, 2005 at 12:16 下午
  39. 看得见是因为不是用脚本显示的,而是我自己在utf-8环境下得到源码,用手工添加的,这更让我非常奇怪,怎么在IE下偏偏那张图片就显示不了呢,而手动添加源码应该是一样的,怎么就可以显示了呢?
    强烈要求用代码输出,在这页面你是不断解释,够你麻烦的,用代码输出好了很多。

    暖暖鱼 Says: 五月 28th, 2005 at 12:55 下午
  40. 用在了我的blog上,效果不错啊,可以去看看

    stella Says: 五月 31st, 2005 at 8:53 上午
  41. 阿北,不好意思,对css我是文盲级别,我想问一下这个代码放到模版的什么地方呢?

    四月回声 Says: 六月 3rd, 2005 at 9:12 下午
  42. 我用的是博客动力的模版。

    四月回声 Says: 六月 3rd, 2005 at 9:12 下午
  43. 四月,这个不是css, 是html. 如果blogdriver支持html模板编辑的话,你应该可以把它放在模板的任何地方。比如右边友情链接的附近。

    阿北 Says: 六月 3rd, 2005 at 9:58 下午
  44. 阿北,你好,博客动力好像没有html模板编辑,只有一个css原码编辑,不知道可以把豆瓣放上去吗?

    江豆 Says: 三月 16th, 2006 at 4:14 下午