前言：

??????? facebook,twitter,pinterest 雖說在國內(nèi)不是如同微博，朋友圈那樣非常的盛行，但是我么的工作中涉及到國外的業(yè)務(wù)時(shí)候就必須要去研究。為此，作為一個(gè)討厭記密碼又有高度復(fù)雜密碼強(qiáng)迫癥的開發(fā)員，還是得把這3個(gè)社交平臺(tái)全注冊(cè)了一遍。

???????? 本文的例子非常簡單，由于只是涉及到這3個(gè)社交平臺(tái)的分享功能，所以不需要引入官方的sdk，也就不需要apikey等之類的密鑰。用 <a>和<meta>標(biāo)簽就行了。

???????? 1.在你的html頁面的head標(biāo)簽里加入這幾個(gè)meta標(biāo)簽,關(guān)于每個(gè)標(biāo)簽的含義請(qǐng)參考：點(diǎn)擊打開鏈接

???????????

<!-- 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="當(dāng)前分享的鏈接--可要可不要" /><!-- 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="當(dāng)前分享的鏈接--可要可不要" />

?????? 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測試太多次被封了。這里提醒下開發(fā)者，其實(shí)facebook的開發(fā)者平臺(tái)登錄后你會(huì)看到它有提供測試賬號(hào)。

另外如果你發(fā)現(xiàn)你的分享功能有問題，可以到一下官方提供的驗(yàn)證站去測試下。

facebook：點(diǎn)擊打開鏈接 。

twitter 點(diǎn)擊打開鏈接

輸入你的html的url就可以，不過這就得要求你的站點(diǎn)可外網(wǎng)訪問.

以上純屬個(gè)人獨(dú)自研究成果，僅供參考，轉(zhuǎn)載請(qǐng)注明出處

總結(jié)

以上是生活随笔為你收集整理的facebook,twitter,pinterest的分享功能代码--js+html的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。