facebook,twitter,pinterest的分享功能代码--js+html

前言：

facebook,twitter,pinterest 虽说在国内不是如同微博，朋友圈那样非常的盛行，但是我么的工作中涉及到国外的业务时候就必须要去研究。为此，作为一个讨厌记密码又有高度复杂密码强迫症的开发员，还是得把这3个社交平台全注册了一遍。

本文的例子非常简单，由于只是涉及到这3个社交平台的分享功能，所以不需要引入官方的sdk，也就不需要apikey等之类的密钥。用 <a>和<meta>标签就行了。

1.在你的html页面的head标签里加入这几个meta标签,关于每个标签的含义请参考：点击打开链接

   <!-- twitter--><meta name="twitter:title"   content="@ViewBag.Title" /><meta name="twitter:description"   content="@ViewBag.Description" /><meta name="twitter:image" content="@ViewBag.ShareImg" /><meta name="twitter:card" content="summary" /><meta name="twitter:url"   content="当前分享的链接--可要可不要" /><!-- facebook -->    <meta property="og:image" content="@ViewBag.ShareImg" />     <meta property="og:locale" content="en-US" /><meta property="og:type"   content="website" /><meta property="og:url"   content="当前分享的链接--可要可不要" />

2.html+js编写分享按钮

<div><a id="fbShare" href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(document.location.href),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)"><img src="../images/home/home_footer_share_facebook.png"></a><a href="javascript:window.open('http://twitter.com/home?status='+'My Item  '+encodeURIComponent(document.location.href)+' '+encodeURIComponent(document.title),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)"><img src="../images/home/home_footer_share_twitter.png"></a><a href="javascript:window.open('https://www.pinterest.com/pin/create/button/?url='+encodeURIComponent(document.location.href),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)"><img src="../images/home/home_footer_share_pinterest.png"></a>
</div>

效果图：

facebook测试太多次被封了。这里提醒下开发者，其实facebook的开发者平台登录后你会看到它有提供测试账号。

另外如果你发现你的分享功能有问题，可以到一下官方提供的验证站去测试下。

facebook：点击打开链接。

twitter 点击打开链接

输入你的html的url就可以，不过这就得要求你的站点可外网访问.

以上纯属个人独自研究成果，仅供参考，转载请注明出处

facebook,twitter,pinterest的分享功能代码--js+html相关推荐

js网站上添加tweet facebook google+等英文分享按钮代码
1.拷贝下面的代码,插入到需要显示的位置 <span class='st_googleplus' displayText='Google +'></span> <span ...
微信小程序/uniapp分享功能-代码封装与使用（分享好友或朋友圈-两种方式）
官方地址:分享 | uni-app官网一.分享朋友圈-详见uni-app官方文档注意:更多注意事项见uni-app文档结果展示: 二.分享好友或者朋友圈-详见微信开放文档先展示: 实现分享 ...
微信分享 ajax冲突,微信jssdk分享功能开发及解决ajax跨域的问题
微信JS-SDK说明文档微信JS-SDK Demo 我所要实现的分享功能要求:只要提供一段js代码给前端美工放置在静态页面等就可以实现分享功能. js代码如下: url=location.href; ...
facebook、twitter、facebook登录、whatsapp分享、微信分享
facebook.twitter.facebook 登录.whatsapp 分享.微信分享几个概念爬虫所谓爬虫,是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本. html 元素图谱对 ...
分享google+facebook+twitter(Eclipse)
最近做游戏分享功能,遇到了这3大平台的分享,网上的介绍好多,但也不全,没有做到很详细的分享图片,文字,链接的介绍,所以我结合了一下,自己封装了3大平台的分享. 一,google+分享不需要申请,直接 ...
js中写java集合代码,JS实现JAVA的List功能
本次的文章给大家分享了关于JS实现JAVA的List功能的代码,有兴趣的朋友可以看一下function List(){ var list = new Array(); /* 添加元素 */ this. ...
js实现QQ、微信、新浪微博分享功能
使用js实现QQ.微信.新浪微博分享功能. 微信分享需要手机扫描二维码,需要对url进行编码.在https协议下,扫描二维码时,浏览器打不开可能是没有安全证书导致的. js代码: 1 var shar ...
公众号分享页面php,微信公众号网页分享功能开发的示例代码
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的 ...
微信开发-js接口的使用无法使用分享功能的一些说明
微信里面的一些js接口会跟想要的有所出入,比如分享接口的调用,不能用onclick绑定自定义按钮调用,只能使用微信页面自带菜单里的分享功能进行分享,可以改变的是自定义分享内容,我测试的是分享到微信好友 ...
js生成二维码,web页面,移动h5页添加微信qq分享功能
js文件 qrcode.js 代码 /*from tccdn minify at 2014-6-4 14:59:43,file:/cn/c/c/qrcode.js*/ /*** @fileovervi ...

facebook,twitter,pinterest的分享功能代码--js+html

facebook,twitter,pinterest的分享功能代码--js+html相关推荐

最新文章

热门文章