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就可以,不过这就得要求你的站点可外网访问.


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

相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页