返回TGuide组件库

腾讯互娱SNS分享组件

一、DEMO演示

二、组件说明

  1. 用于将当前页面信息分享到其他SNS模块，通常用于：资讯页、专题页等
  2. 可以自定义SNS模块：微信（自动生成二维码）、腾讯微博、QQ好友、QQ空间、朋友网、新浪微博、豆瓣、人人网、开心网
  3. 可以自定义图标尺寸：16px 16px 或 24px 24px
  4. 可以自定义是否选择添加点击流
  5. 可以自定义模块打开类型：弹窗打开或新页面打开

三、调用方式：

步骤一：在想要的位置添加SNS容器代码（ID可以自定义，保持与参数接口中的一致）

<div id="tg-sns"></div>

步骤二：在页面底部</body>前引入组件JS和调用代码

<body>




<script src="http://ossweb-img.qq.com/images/js/share/share-min.js" charset="gb2312"></script>
<script>
TGshare({
         iconSize : 16,  //分享图标的大小,16为16px X 16px，24为24px X 24px
        snsModule : ['wechat','qq','qzone','weibo','pengyou','sina','douban','kaixin','renren'],
		//分享类型 wechat,qq,qzone,weibo,pengyou,sina,douban,kaixin,renren
		//默认全部加载
		title : '腾讯游戏 - 用心创造快乐',
		//需要自定义标题时才用到，默认拉取页面标题
		url : 'http://game.qq.com/',
		//需要自定义页面url时才用到，默认拉取页面url
           picUrl : 'http://b.gtimg.com/res/2014/06/13/0/058e8b5f7aa4e83d.jpg',
		//需要自定义主题图片才用到，默认拉取页面中第一张图片
            snsID :'tg-sns',//自定义SNS容器ID
         isWindow : true,     //分享打开类型，true为弹窗打开，false为新页面打开，默认为弹窗打开
             tcss : true      //是否添加点击流，true为添加，false为不添加，默认添加
})
</script>
</body>

四、其他说明

  1. 不需要再单独添加CSS代码，JS会根据配置参数自动将相关CSS代码插入head中
  2. tcss设为true时，请不要忘记引用点击流代码
  3. 容器ID名称自定义请保持页面和JS中的一致
  4. 分享模块自动获取当前页面的标题和url
  5. 当前页面建议已发布在外网
  6. 关于本组件任何建议或问题请联系 smallniding