在Web開發中,分享功能已經成為一個不可或缺的功能。隨著HTML5的出現,我們可以使用一鍵分享代碼來實現分享功能。
一鍵分享代碼的實現方法非常簡單。我們可以先在頁面中添加一些社交網絡的圖標(如微博、QQ空間、Facebook等),然后在點擊相應的圖標時使用JavaScript代碼將我們想要分享的內容發送到相應的社交網絡中。
function shareToWeibo() { var title = document.title; var url = window.location.href; window.open('http://service.weibo.com/share/share.php?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title), '_blank'); } function shareToQzone() { var title = document.title; var url = window.location.href; window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title), '_blank'); } function shareToFacebook() { var title = document.title; var url = window.location.href; window.open('https://www.facebook.com/sharer.php?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title), '_blank'); }
上面的三個函數分別用于分享到新浪微博、QQ空間和Facebook。我們可以將它們綁定到相應的圖標上,如下所示:
<div class="social-icons"> <a href="javascript:shareToWeibo();"><i class="fa fa-weibo"></i></a> <a href="javascript:shareToQzone();"><i class="fa fa-qzone"></i></a> <a href="javascript:shareToFacebook();"><i class="fa fa-facebook"></i></a> </div>
這樣就完成了一個簡單的一鍵分享功能。當我們點擊相應的圖標時,就會跳轉到相應的社交網絡中,分享我們想要分享的內容。
上一篇html5七巧板代碼
下一篇mysql中文更改字符集