建站,就选魔趣吧!

[其他资源] 使用social-share.js实现网站一键分享到QQ、微信、微博

[复制链接]
魔趣吧站长魔趣吧官方成员 实名认证 发表于 2021-9-28 11:42:58 | 显示全部楼层 |阅读模式
使用social-share.js实现网站一键分享到QQ、微信、微博) O5 |! A$ p* m3 ~6 h

$ w. N* H/ c+ A5 q4 p# u2 M
social-share.js是一款一键转发工具,它可以一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站,使用字体图标。

. R7 q0 R& }: Y6 A; D# h9 f- p7 ?/ u* G
基本用法
      L, \8 ]0 g! y& e' X- m/ \
  • <!-- 引入依赖 --># U0 n1 G/ p! ~* m
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css">; h  I* _- D9 m
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>
    / q8 z6 h9 `: D- r6 d
  • <!-- 只要一个div的class是social-share即可,内容会自动初始化 -->
    $ Z" k8 U. z. O4 Z, _/ |) ?" K
  • <div class="social-share"></div>; J8 i5 Z1 _: \/ R  m2 S# y7 G# @
效果演示3 U: R; w% S: T! v

& X3 w9 o; M! S
( m% C" P6 w' W3 h: t$ K6 Z! Z基本配置参数
    8 C- h  T# m& e3 h' K3 ?/ A3 M
  • url                 : '', // 网址,默认使用 window.location.href, ]' `. ?7 L( j9 v; D
  • source              : '', // 来源(QQ空间会用到), 默认读取head标签:<meta name="site" content="http://overtrue" />' Q' P2 G' o1 w! Q/ z( n2 G+ U
  • title               : '', // 标题,默认读取 document.title 或者 <meta name="title" content="share.js" />
    5 k1 c3 a0 ]% s+ X9 `
  • origin              : '', // 分享 @ 相关 twitter 账号1 p* z0 e- S+ [( u  ^  o
  • description         : '', // 描述, 默认读取head标签:<meta name="description" content="PHP弱类型的实现原理分析" />9 E; i) [" d/ F6 P3 u: q6 F" _
  • image               : '', // 图片, 默认取网页中第一个img标签
    / V1 o, h* G  n2 O
  • sites               : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 启用的站点
    ; w" ?5 s$ T2 S( \2 ^$ |; K' J
  • disabled            : ['google', 'facebook', 'twitter'], // 禁用的站点
    ; `# S# E4 ^6 v3 ]0 S6 i3 |
  • wechatQrcodeTitle   : '微信扫一扫:分享', // 微信二维码提示文字. _7 V0 W% ?+ o+ t! L
  • wechatQrcodeHelper  : '<p>微信里点“发现”,扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'​! g/ J/ R% G+ Z, |, k
7 D* }& i  C$ p  C

% ~( A2 K! Z" o& C, Q$ N% h' Z例子1 用js配置

    7 W6 k( \& o& c: T8 e4 J* b
  • var $config = {6 O% i% t* L+ u
  •     title               : '234',
    6 _2 ^  c0 Q$ E
  •     description         : '123',- r8 g6 q2 y+ X1 w2 N5 t* e6 w
  •     wechatQrcodeTitle   : "微信扫一扫:分享", // 微信二维码提示文字% n) u+ E) P3 F2 M" K
  •     wechatQrcodeHelper  : '<p>微信里点“发现”,扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',
    ( V0 W: X9 }; D1 ]; c- ?+ v
  • };
    " n/ K$ i* f# o; D9 Q* F0 ~- I: l* i
  • " o: \3 U* d4 W6 x! P+ S, L% a  r
  • socialShare('.social-share-cs', $config);7 F) j) X  c, ]& z/ X
3 t& T# O: O: C
% Y# u3 m+ L2 Y  ~) I8 b2 E- h
例子2 在div内加配置 data-disabled="google,twitter,facebook" // 意思是禁用google,twitter,facebook
    ( D, y, B/ n+ `' T( W* V
  • <div class="share-component" data-disabled="google,twitter,facebook"></div>$ l8 q9 s: Y- ~: |5 _+ |
效果演示
- F8 b' ?1 o8 i7 {! r% p2 @5 c6 k( i8 F- v, a* Z! i

' J5 n' h  [: Z6 Q/ w3 a9 `) [例子3 data-sites="weibo,qzone,qq,wechat" // 是指定只显示的部分

      F. ^7 e+ s, K
  • <div class="share-component" data-sites="weibo,qzone,qq,wechat"></div>
    ! t, m' f1 N$ r( \/ c) a/ s
效果演示0 `" _7 z; l+ T# P
* l* b9 t2 _9 w3 q
另外分享出去的默认图片使用网页第一个img标签,如果自定义图片,在div加上data-image="图片全路径"' K  v: e3 c% L4 u+ G; R! O# ~
0 x9 ^" K9 d6 r

更多内容可以去他们官网查看,官网地址如下

cdnjs : https://cdnjs.com/libraries/social-share.js ; u% ], u+ D* k, D3 ^
github : https://github.com/overtrue/share.js


6 @6 w' V8 O( Z- M

魔趣吧版权声明1,本文内容及相关资源来源于网络,版权归版权方所有!本站原创内容版权归本站所有,请勿转载!
2,本文内容仅代表作者本人观点,不代表本网站立场,作者文责自负,本站资源仅供学习研究,请勿非法使用,否则后果自负!请下载后24小时内删除!
3,本文内容,包括但不限于源码、文字、图片等,仅供参考使用,本站不对其安全性,正确性等作出保证。但本站会尽量审核会员发表的内容
4,如您认为本文内容侵犯了您的权益,请与我们联系!我们将在5个工作日内做出处理!本站保留全部修改、解释、更新本声明的权利魔趣吧

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回列表
在线支持
关闭
欢迎来到魔趣吧
如果你有建站技术问题、仿站需求、模板插件修改需求,请联系我们的技术支持!高效率,低价格的帮你搞定!
请认准魔趣吧唯一官网:www.moqu8.com,谨防假冒网站!

QQ支持
在线支持
魔趣吧
做感动人心的好资源站

关于魔趣吧|魔趣建站

魔趣吧(鹤壁市淇滨区月亮星旗下网站),志在打造全国最大的建站资源共享平台。 本站提供海量免费的建站资源,包括WordPress模板、Discuz精仿模板、PHPWind模板、phpcms模板、Discuz精仿插件、帝国cms模板、织梦模板等上万精品模板!同时,提供各种建站素材、JS特效、整站程序源码!
服务中文站长,传播分享精神!建站,就来魔趣吧!!
2015-2021 魔趣吧 ( 豫ICP备2021024354号 )   百度统计
HTTPS安全认证
|网站地图 | 已运行:天