赚钱之旅（第二期）：开发汽车插件 先做网页模块
技术与开发
要开发Facebook插件，首先就要调查什么类型的插件受欢迎（可以参考上期的文章进行选择），有了目标后就可以开始设计了。下面我们以汽车插件为例，讲解Facebook插件应该如何设计。
插件原理：完整的汽车插件由网页模块、数据库模块、服务器模块三部分组成，所有标准的Facebook插件都是这样的。用户通过服务器模块远程连接网页模块上的汽车内容，网页模块会定时调用数据库模块来更新数据让访问者保持新鲜感。
三个模块之间协同工作就可以实现插件的全部功能，网页模块相当于插件的“躯干”，给用户呈现丰富多彩的内容；数据库模块相当于插件的“血液”，保证供给丰富多彩的内容；服务器模块相当于插件的“大脑”，用户要访问内容必须要经过服务器模块的同意。
设计思路：本期我们先要设计汽车插件的网页模块（用Eclipse编辑器来做）。网页模块的基本功能是显示当前登录用户的汽车信息，共享用户的汽车信息、专享的汽车库、评价系统、用户交流的论坛。所以我们要设计两个页面，一个是主页面，登录显示页面；一个是子页面，功能页面。记住，网页一定要设计得有动感！
注意事项：网页模块相对来说是简单的，跟制作普通的网页区别不大，基本原理都是一样的，但需要注意的是，Facebook网页使用了一些专用的框架标记，如果设计时没有使用这些框架标记，就可能出现不兼容的情况。如果要学习Facebook网页的框架标记，请到http://www.shudoo.com/bzsoft下载。
第一步：收集素材
首先我们当然需要准备多张汽车图片做素材，图片可以从网络上下载，也可以用相机自己拍摄。接着对汽车图片进行PS处理，让用户有一种动感十足的味道。我们也提供了一些素材，大家可以到http://www.shudoo.com/bzsoft下载。
第二步：计设主页面
主页面是用来显示当前登录用户的汽车信息的，为了能把自己的车展示在Facebook上，我们需要尽量提供每一辆车的详细信息，包括汽车图片、汽车性能参数、使用年限和同类产品相比的优劣性等等。在Eclipse中新建一个页面，输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
〈c:if test="${ownership eq null or ownership eq ''}"〉 //判断汽车是不是自己的
〈dd〉You 〈tag:relationship text="${car.ownership}" mine="${car.memberId == authMemberId}"/〉〈 〉//自定义tag标签，显示汽车的状态
〈tag:browseYear carData="${car.carData}"/〉 //显示汽车的年份
〈tag:browseMake carData="${car.carData}"/〉//显示汽车的厂家
〈tag:browseModel carData="${car.carData}"/〉//显示汽车的型号
〈dd〉〈a href="${showCarInfoUrl}"〉Car specs »〈/a〉〈 〉
〈dd〉〈tag:forumMakeModelLink make="${car.carData.make}" model="${car.carData.model}" url="${showModelForumsUrl}" posts="${car.threadCountModel}"/〉〈 〉 //自定义标签，显示该汽车的评论
第三步：增加子页面
子页面的功能是显示社区朋友的汽车信息，便于圈子内朋友相互的交流和信息共享，共同探讨每一款汽车的优劣，子页面一般有以下几个功能：1.信息共享；2.允许添加汽车库；3.在页面上对车进行评价；4.显示所有朋友对这款车的平均评价；5.设计一个论坛，让用户在里面进行交流。在Eclipse中新建子页面，输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
〈c:url var="addCarUrl" value="${environment.addCarUrl}" context="/"〉
〈tag:fbButton buttonText="Steal it" hoverText="Add this car to your garage." clickUrl="${addCarUrl}"/〉 //显示'steal '按钮
ratingAverageRounded="${car.ratingAverageRounded}"/〉 //提供'rate'一辆汽车的功能
〈span class="show-comments"〉〈tag:comments memberId="${car.memberId}" productId="${car.productId}" commentCount="${car.threadCount}" /〉〈/span〉// 提供对该汽车添加注释的功能
至此，我们已经设计出了简单的汽车插件的页面。当然，你也可以为页面添加更多的内容，例如添加视频以增加互动效果等。