Skip to content

Latest commit

 

History

History
106 lines (88 loc) · 4.8 KB

分享按钮功能的实现.md

File metadata and controls

106 lines (88 loc) · 4.8 KB
title date tags categories
分享按钮功能的实现
2018-09-05 10:07:22 -0700
Web SDK
Web SDK

Facebook分享功能事项

今天需要实现一个点击按钮进行分享的功能，而且需要是多平台，之前了解过应该是通过调用各个平台的api进行实现的，没办法，去网上找找方法吧。

首先找个Facebook的实现看看效果，当你只是想分享一个链接到facebook中的时候，我们只需要将分享的url作为参数的形式传递到facebook网站即可，如下：

"http://www.facebook.com/sharer/sharer.php?u=" + url;

当然也可以当成参数的形式传递：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<input id="share_button" type="button" value="share to facebook" />
	<script type="text/JavaScript">
    	function popupwindow(url, title, w, h) {
        	wLeft = window.screenLeft ? window.screenLeft : window.screenX;
        	wTop = window.screenTop ? window.screenTop : window.screenY;

        	var left = wLeft + (window.innerWidth / 2) - (w / 2);
        	var top = wTop + (window.innerHeight / 2) - (h / 2);
        	return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
    	}
    	window.onload = function () {
        	document.getElementById('share_button').onclick = function(){
            	var shareUrl = "http://www.facebook.com/sharer/sharer.php?u=https://www.google.com";
            	popupwindow(shareUrl, 'Facebook', 600, 400);
        	}
    	}
	</script>
</body>
</html>

上面虽然分享成功了，但是分享的内容显得很死板，只有一些文字，如何自定义我们的内容呢？我们需要在被分享的网站的页面上添加一些meta标签，facebook会自己从所分享的页面上去抓取这些标签里的内容，你可以自定义图片、描述等等。

在定义了这些之后就更加生动了：

<meta property="og:title" content="百度">
<meta property="og:type" content="website">
<meta property="og:image" content="www.baidu.com/img/bd_logo1.png">
<meta property="og:description" content="百度一下，你就知道">

当然，你可能想动态的去生成这些东西，这就复杂一些，需要用到facebook中的Javascript SDK:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.10'
    });
    FB.AppEvents.logPageView();
  };
 
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

在他们的官网可以看更多。

我们还可以通过facebook develop来检测你要分享的网站的效果，并且在这里可以生成使用sdk所需要的appid，而且可以在这里看到网址的被转发数，点击数之类的。

这样就完成facebook的分享功能了，但他喵的是不是也太麻烦了，果断找找有没有别的方法，难道你还真以为我会一个个写下去！！！？？？结果还真找到了一个方法，那就是Mob上面的ShareSDK啦。

怎么实现？首先在里面找到你需要的简单的，首先在下图中找到你要的，然后傻瓜式写代码就行了

<!--MOB SHARE BEGIN-->
<div class="-mob-share-ui-button -mob-share-open">分享</div>
<div class="-mob-share-ui" style="display: none">
	<ul class="-mob-share-list">
    	<li class="-mob-share-weibo"><p>新浪微博</p></li>
    	<li class="-mob-share-qzone"><p>QQ空间</p></li>
    	<li class="-mob-share-qq"><p>QQ好友</p></li>
    	<li class="-mob-share-douban"><p>豆瓣</p></li>
    	<li class="-mob-share-facebook"><p>Facebook</p></li>
    	<li class="-mob-share-twitter"><p>Twitter</p></li>
	</ul>
	<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=你的appkey"></script>
<!--MOB SHARE END-->

这是最简单的一种，至于怎么扩展，文档写的很清楚，也很傻瓜式，我就不再傻瓜式的写出来了，影响我的形象。啦啦啦啦！！！