前面已经发布过加入购物车代码，店铺收藏代码，店铺分享代码等教程文章，今天再来分享下店铺喜欢代码的教程文章。在分享前还是先来看下今天内容的效果图吧。 

喜欢按钮就长这个样子，功能说明：鼠标点击后，后面的数字会进行变化。无论是喜欢店铺还是喜欢宝贝，只有第一次点击生效。好了，下面来看下喜欢组件的框架吧。

<div data-like='{
type:2,/*必填，选择喜欢的类型，2（商品），3（网页），4（店铺）*/
key:"",/*必填，type为2时key填itemid，type为3时填网页链接地址，type为4时填shopid，长度不允许超过60个字符*/
skinType:1,/*样式类型：1为橙色，2为蓝色*/
text:"喜欢"/*默认文字*/
}' class="sns-widget">
喜欢<!--将代码复制到dw中，修改完参数后再清除掉所有注释（/**/之间为注释内容），代码间不要有换行，否则不会有效果！-->
</div>

下面来做一个具体实例加深下印象。这里以“艺灵设计”淘宝店铺中某款宝贝为例，做一个宝贝喜欢的特效。

第一步：需要用到-webkit内核的浏览器，推荐chrome（谷歌）。如果使用的是360安全或搜狗等双核浏览器时需要切换至极速模式。切换方法如下图：

第二步：选择好了浏览器后，我们在地址栏中输入网址，也可以从淘宝首页选择店铺后再搜索“艺灵设计”进入店铺。
第三步：点击导航上面的“所有分类”后随便选一款宝贝，这里以积分卡宝贝为例。鼠标放到该宝贝标题上右键--审查元素--复制id=后面的一串数字即可。具体操作如下图： 第四步：我们来配置上面喜欢组件的参数。

<div data-like='{
type:2,/*这里选择2，表示商品喜欢*/
key:"41867189303",/*该商品对应的id*/
skinType:1,/*选择橙色*/
text:"喜欢我 你就大胆的点我表达吧^o^！"/*默认文字*/
}' class="sns-widget">
喜欢<!--将代码复制到dw中，修改完参数后再清除掉所有注释（/**/之间为注释内容），代码间不要有换行，否则不会有效果！-->
</div>

上面配置参数已经完成，我们来看下最后的显示效果吧。如图： 这个是橙色版的效果，当然也可以换成蓝色版的，还可以换成店铺喜欢。换的方法很简单，只需要修改上面的配置参数即可。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2015-01-06/240.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。