艺灵设计

全部文章
×

制作淘宝天猫店铺中宝贝分享代码

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2015-01-04 10:39:00 - 阅: - 评:0 - 积分:0

当下是一个全线社交时代,接触过网络的网民基本上都会在不经意间分享各种自己喜欢的东西。而做为电商界的佼佼者--“淘宝”在早期也曾提供过此功能,只是迄(至)今为止,会用的人太少,更多的现象是:闻所未闻,见所未见······

好了,不卖关子了。今天来继续前面的教程文章分享,教大家制作淘宝天猫店铺中宝贝分享代码。在分享前还是先来看下今天内容的效果图吧。 

上面图片展示的是分享店铺的效果,当然还能分享单个的宝贝,亦可分享单独的页面哦!核心知识点,现在开始。

 

  1. <div data-sharebtn='{
  2. type:"",/*必填,选择分享的类型,可选项item(商品),shop(店铺),webpage(自定义)*/
  3. key:"",/*必填,type为item时key填itemid,type为shop时填shopid,type为webpage时填希望用户点回的链接*/
  4. title:"",/*type为webpage时必填,表示页面标题,type为item/shop时可以不填*/
  5. comment:"",/*默认文案*/
  6. pic:"",/*分享带的图片,不填写则取商品图片/店铺logo*/
  7. client_id:68,/*不可修改,保持默认即可*/
  8. skinType:1,/*按钮样式:1为默认样式、2为纯文字、3为自定义样式*/
  9. isShowFriend:false/*是否默认展开好友树,默认false*/
  10. }' class="sns-widget">
  11. <!--将代码复制到dw中,修改完参数后再清除掉所有注释(/**/之间为注释内容),代码间不要有换行,否则不会有效果!-->
  12. </div>

上面的代码为分享组件框架,每一行都有相关的注释说明。不看注释就盲目复制代码粘贴进店铺的,我只能呵呵一笑了之!

下面以具体实例来演示下,上面的代码该如何使用。这里以“艺灵设计”淘宝店铺为例,做一个店铺分享的效果。

还是跟前面的教程一样,准备工作必不可少。
第一步:需要用到-webkit内核的浏览器,推荐chrome(谷歌)。如果使用的是360安全或搜狗等双核浏览器时需要切换至极速模式。切换方法如下图:
360安全浏览器切换成极速内核
第二步:选择好了浏览器后,我们在地址栏中输入网址,也可以从淘宝首页选择店铺后再搜索“艺灵设计”进入店铺,如图: 第三步:在页面任意空白处右键--审查元素--在下方源码中单击后按Ctrl+F,输入shopid查看店铺id--复制黄色高亮后面的数字即可。具体操作如下图: 第四步:由于我们制作的是店铺分享,只需要得到店铺shopid即可。第三步时店铺shopid已经取到了,下面就是来配置参数了。

 

  1. <div data-sharebtn='{
  2. type:"shop",/*由于要分享店铺,所以这里选择shop*/
  3. key:"112837831",/*这里要和上面的对应,填写店铺id*/
  4. title:"把艺灵设计的店铺分享到你的朋友圈吧!",/*自定义标题,随便写*/
  5. comment:"艺灵设计--专注淘宝店铺特效代码20年?!",/*自定义分享方案,随便写*/
  6. pic:"http://img02.taobaocdn.com/imgextra/i2/759415648/TB203ZubXXXXXbhXXXXXXXXXXXX_!!759415648.png",/*分享时显示的图片,可自由更换或不写*/
  7. client_id:68,/*不可修改,保持默认即可*/
  8. skinType:1,/*看下默认样式的效果*/
  9. isShowFriend:false/*是否默认展开好友树,默认false*/
  10. }' class="sns-widget">
  11. <!--将代码复制到dw中,修改完参数后再清除掉所有注释(/**/之间为注释内容),代码间不要有换行,否则不会有效果!-->
  12. </div>

上面配置参数已经完成,我们来看下最后的显示效果吧。如图: 这个是默认样式的效果,我们来点击一下看效果。如图: 好了,这个店铺分享就已经成功了。如果想制作单个宝贝的分享,也是按照此步骤,只需要获取到对应宝贝的id,然再修改上面的配置参数即可。如果不知道怎么获取宝贝的id的话,猛戳我!!!。如果看不懂的话,建议点击网站导航上面的“资源下载”,然后找到《[提取码]淘宝店铺装修零基础教程专题讲解01_会用浏览器和熟悉后台-艺灵设计》后下载视频完整学习如何使用浏览器。如果嫌看视频时间太长的话,可以点击网站导航上面的“在线生成”,然后找到相关软件使用积分生成即可,软件截图如下: 
如果没有积分且不想赞助又不想看视频又不想读文章的话,我也是没话说了······

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2015-01-04/239.html

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

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 制作淘宝店铺宝贝分享代码 天猫店铺个性分享代码 淘宝天猫店铺装修教程 sns-widget sns分享组件

上一篇: 制作淘宝天猫店铺中自定义购物车代码   下一篇: 制作淘宝天猫店铺中宝贝喜欢赞代码

评论区