桌面网页上实现分享功能,分享到QQ空间、新浪微博、人人网

重要声明:本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。

本文原文地址:桌面网页上实现分享功能,分享到QQ空间、新浪微博、人人网

在桌面网页上发现好文章时用户往往选择分享给朋友,而这时我们如何实现分享呢,本文列出了分享到:QQ、QQ空间、新浪微博、人人网 的api和分享代码。你不必再去到处找了。

1、分享到QQ

API接口:https://connect.qq.com/widget/shareqq/index.html

参数:

字段含义
url要分享的地址
title分享标题
source分享内容的来源,常常就写主站的首页地址
summary要分享的内容描述
pics分享时的图片
desc分享时的预置文案,就是会紧接着一另一条消息发给好友的内容

2、分享到QQ空间

API接口:https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey

参数:

字段含义
url要分享的地址
title分享标题
site分享内容的来源,常常就写主站的首页地址
summary要分享的内容描述
pics分享时的图片
desc分享时的预置文案,相当于你发空间时写的内容

3、分享到新浪微博

API接口:http://service.weibo.com/share/share.php

参数:

字段含义
url要分享的地址
title分享标题
appkey新浪微博的appkey
pic分享时的图片

4、分享到人人网

API接口:http://widget.renren.com/dialog/share

参数:

字段含义
resourceUrl要分享的地址
srcUrl分享内容的来源,常常就写主站的首页地址
title分享标题
description要分享的内容描述
pic分享时的图片

5、代码

下面的代码封装了所列出的所有分享,你可以直接COPY,代码里包含了本站的首页地址,复制的时候记得改成自己的站点地址哦

var ShareUtil = {
    openShareUrl: function (url) {
        var a = document.createElement("a");
        a.href = url;
        a.target = "_blank";
        a.click();
    },
    shareToQQ: function (option) {
        var url = "https://connect.qq.com/widget/shareqq/index.html" +
            "?url="     + encodeURIComponent(option.url)      +
            "&title="   + encodeURIComponent(option.title)    +
            "&source="  + encodeURIComponent('https://www.microanswer.cn')   +
            "&summary=" + encodeURIComponent(option.desc)     +
            "&pics="    + encodeURIComponent(option.pics)     +
            "&desc="    + encodeURIComponent(option.summary);
        ShareUtil.openShareUrl(url);
    },
    shareToQZone: function (option) {
        var url = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey" +
            "?url="     + encodeURIComponent(option.url)      +
            "&title="   + encodeURIComponent(option.title)    +
            "&summary=" + encodeURIComponent(option.desc)     +
            "&desc="    + encodeURIComponent(option.summary)  +
            "&site="    + encodeURIComponent('https://www.microanswer.cn')     +
            "&pics="    + encodeURIComponent(option.pics);
        ShareUtil.openShareUrl(url);
    },
    shareToWeibo: function (option) {
        var url = "http://service.weibo.com/share/share.php" +
            "?url="     + encodeURIComponent(option.url)      +
            "&title="   + encodeURIComponent(option.title + "。" + option.desc)    +
            "&pic="     + encodeURIComponent(option.pics)     +
            "&appkey="  + encodeURIComponent(option.appkey);
        ShareUtil.openShareUrl(url);
    },
    shareToRenren: function (option) {
        var url = 'http://widget.renren.com/dialog/share' +
            '?resourceUrl='    + encodeURIComponent(option.url) +
            '&srcUrl='         + encodeURIComponent('https://www.microanswer.cn') +
            "&title="          + encodeURIComponent(option.title)    +
            "&description="    + encodeURIComponent(option.desc)     +
            "&pic="            + encodeURIComponent(option.pics);
        ShareUtil.openShareUrl(url);
    }
}

然后你就可以使用 ShareUtil 里面的方法进行分享啦。记得为此博文点赞分享哦。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值