jQuery插件添加社交分享按钮到你 网站 Socialjs

  • 源码大小:467.44KB
  • 所需积分:1积分
  • 源码编号:19JP-3307
  • 浏览次数:854次
  • 最后更新:2023年05月29日
  • 所属栏目:社交媒体
本站默认解压密码:19jp.com 或 19jp_com

简介

社交媒体网站是获取流量的绝佳资源,但你如何让读者轻松分享你的内容?通过添加一个社交共享插件,你可以让这个过程变得更容易。

这个小巧易用的jQuery插件允许您在网站或博客上轻松创建流行社交媒体网络的社交共享按钮。它提供了一种增加流量、获得更多页面浏览量和增加订阅用户的好方法。

如何使用它:

1.在jQuery之后下载并加载socialSharing.js脚本。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/socialSharing.js"></script>

2.为社交图标加载最新的字体真棒图标字体。

<link rel="stylesheet" href="/path/to/font-awesome/css/all.min.css" />

3.创建一个空的DIV容器来容纳社交共享按钮。

<div id="demo"></div>

4.初始化插件,在页面上生成社交分享按钮。可用的社交媒体网络:

  • 脸谱网
  • 啁啾
  • Pinterest网站
  • 领英
  • Reddit网站
  • 衣袋
  • 电子邮件
  • Whatsapp
$('#demo').socialSharingPlugin({

  // URL to share
  url: window.location.href,

  // get description from meta description tag
  description: $('meta[name=description]').attr('content'),

  // get title from title tag
  title: $('title').text(),

  enable: ['copy', 'facebook', 'twitter', 'pinterest', 'linkedin', 'reddit', 'stumbleupon', 'pocket', 'email', 'whatsapp']
  
})

5.可用于自定义社交共享按钮的选项。

$('#demo').socialSharingPlugin({

  // url to share
  url: '',

  // page title
  title: '',

  // page description
  description: '',

  // image to share
  img: $('meta[property="og:image"]').attr('content'),

  // button classes
  btnClass: 'btn btn-light',

  // Array of social sharing links
  // ['copy', 'facebook', 'twitter', 'pinterest', 'linkedin', 'reddit', 'stumbleupon', 'pocket', 'email', 'whatsapp']
  enable: null,

  // enable responsive class
  responsive: false,
  
  // 'left' or 'right'
  mobilePosition: 'left',

  // copy message
  copyMessage: 'Copy to clipboard',

})

更新日志:

版本0.0.2(2022-11-10)

  • 使现代化

预览截图