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

程序员文章站 2024-03-18 20:33:40

...

前言：

facebook,twitter,pinterest 虽说在国内不是如同微博，朋友圈那样非常的盛行，但是我么的工作中涉及到国外的业务时候就必须要去研究。为此，作为一个讨厌记密码又有高度复杂密码强迫症的开发员， facebook,twitter,pinterest的分享功能代码--js+html 还是得把这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,twitter,pinterest的分享功能代码--js+html