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

猜你喜欢