“新人求分享!”,玩今日头条的可能都看见过这句话吧,不仅是在今日头条上,我们在各大资讯网站浏览文章时,在文章左侧或在底部,都能看到一排图标,分享到qq,qq空间,微信,微博等。
分享的主要原理就是调用各大应用公开的分享接口,不需要做其它的工作。不必惊讶,就是这么简单。
下边是我编写的一个简单例子,这里我使用了免费的share.js工具,它帮我们将准备工作封装成方法,直接调用即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享功能</title>
<meta name="site" content="content site">
<meta name="Site" content="content Site">
<meta name="title" content="content title">
<meta name="Title" content="content Title">
<!--引入样式文件-->
<link rel="stylesheet" href="./share/css/share.min.css">
<style>
.row{padding: 20px 0 0 20px}
.row-pad{padding: 20px 0 0 60px}
li{
list-style: none;
}
</style>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./share/js/jquery.qrcode.min.js"></script>
<script src="./share/js/jquery.share.js"></script>
</head>
<body>
<div style="text-align: center">
<img src="img/gerenjianjie.jpg" width="300px" height="400px">
</div>
<div style="text-align: center;">
<li class="row">
<div id="ceshi_fenxiang" data-mode="prepend">
<!--收藏按钮-->
<a href="javascript:;" class="social-share-icon icon-heart"></a>
</div>
</li>
</div>
<script>
/*初始化分享功能*/
$('#ceshi_fenxiang').share({
url:'https://m.toutiao.com/is/iqsvxTY/',
title:'希望大家多看看我的文章',
description:"希望大家多看看我的文章",
image:"https://sf1-cdn-tos.toutiaostatic.com/img/user-avatar/f639044000997dfd142edfbb8a640e58~300x300.image",
sites: ['qzone', 'qq', 'weibo','wechat']
});
</script>
</body>
</html>
第三方分享链接