如何在网页中添加分享到微信朋友圈按钮

2012-10-23 17:40:43来源:36kr作者:

自从微信推出公众平台并允许分享文章到朋友圈之后,我看到有越来越多的朋友分享文章到朋友圈。

自从微信推出公众平台并允许分享文章到朋友圈之后,我看到有越来越多的朋友分享文章到朋友圈。

受冷笑话精选网站的启发,我们给36氪网站的移动版上加了“分享到微信朋友圈”按钮,在微信的内置浏览器中点击后可以一键分享,而不必点浏览器右上角的功能菜单再选择分享。

如何在网页中添加分享到微信朋友圈按钮

由于目前微信并没有提供这个按钮的官方支持,很多人问我们这个按钮是如何实现的,其实很简单,我们把我们实现的方法分享给大家,希望对那些想在网页端加这个按钮的人有所帮助。

下面是代码(相关参数请自行修改):
 

function WeiXinShareBtn() {
    if (typeof WeixinJSBridge == "undefined") {
        alert("请先通过微信搜索 wow36kr 添加36氪为好友,通过微信分享文章:)  ");
    } else {
        WeixinJSBridge.invoke('shareTimeline', {
            "title": "36氪",
            "link": "http://www.36kr.com",
            "desc": "关注互联网创业",
            "img_url": "http://www.36kr.com/assets/images/apple-touch-icon.png"
        });
    }
}

值得注意的是,这个按钮如果不是在微信内置浏览器中打开,点击后是没办法分享的。但是可以设置一个小弹窗,比如我们的弹窗是这样设计的:

 如何在网页中添加分享到微信朋友圈按钮

关键词:微信朋友圈