Various ways of sharing content on h5 pages of Weixin, qq and other channels

In common shared landing business, product managers or operating classmates often require that shared pages carry shared pictures, page descriptions and page titles.

Then how can we solve some of the problems? Here are several solutions for your reference.

Traditional way

The most traditional way is to set the title, description and other head elements.

<head>
    <title>Share titles</title>
    <meta name="description" content="Share details">
</head>

Generally speaking, the existence of title enables all browsers or webview s to get shared titles, but description is not available in all environments.
According to other seo experience, you can also add H1 article and other tags on the page, but the sharing aspect is basically useless.

Settings of Sharing Graph

<body>
<p style="display: none;">
    <img src="http://host/share.png" />
</p>
</body>

Empirically, using part of the environment call sharing will take the first load graph (usually more than 300 PX images, Wechat rules) to generate the features of the sharing card cover, which can set up a hidden img.
In this way, the generated sharing card can get the sharing cover.

Wechat Exclusive

Sharing settings using Wechat jssdk

<script src="path/to/jweixin-1.4.0.js">

wx.config({
    // Configurations such as obtaining signatures from the background
    debug: false,
    appId: data.appId,
    nonceStr: data.nonceStr,
    timestamp: data.timestamp,
    signature: data.signature,
    // Setting up the api to be invoked
    jsApiList: [
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone'
    ]
});

wx.ready(function () {
    wx.onMenuShareTimeline({
        // Share titles
        title: title,
        // Sharing links
        link: link,
        // Sharing icons
        imgUrl: imgUrl,
        success: function () {},
        cancel: function () {}
    });
    wx.onMenuShareAppMessage({
        // Share titles
        title: title,
        // Sharing Description
        desc: description,
        // Sharing links
        link: link,
        // Sharing icons
        imgUrl: imgUrl,
        success: function () {},
        cancel: function () {}
    });
    wx.onMenuShareQQ({
        // Share titles
        title: title,
        // Sharing Description
        desc: description,
        // Sharing links
        link: link,
        imgUrl: imgUrl,
        success: function () {},
        cancel: function () {}
    });
    wx.onMenuShareQZone({
        // Share titles
        title: title,
        // Sharing Description
        desc: description,
        // Sharing links
        link: link,
        imgUrl: imgUrl,
        success: function () {},
        cancel: function () {}
    });
    wx.onMenuShareWeibo({
        // Share titles
        title: title,
        // Sharing Description
        desc: description,
        // Sharing links
        link: link,
        imgUrl: imgUrl,
        success: function () {},
        cancel: function () {}
    });
});

This method is applicable to the dissemination of Wechat and has a public number, which sets the correct callback domain and has relevant authority.
It's almost useless to share the qq microblog api, and there's no microblog entrance on the Weimai.
It should be noted that Wechat jssdk does not recommend using the above api at 1.4.0, but instead uses the following api

// Sharing to friends changes to
wx.ready(function () {   //Call before the user may click the Share button
    wx.updateAppMessageShareData({ 
        title: '', // Share titles
        desc: '', // Sharing Description
        link: '', // Share links. The link domain name or path must be the same as the public number JS secure domain name corresponding to the current page.
        imgUrl: '', // Sharing icons
        success: function () {
          // Successful setup
        }
    })
});

// Sharing in Friendship Circle and Sharing in qq Spatial Change to ___________
wx.ready(function () {      //Call before the user may click the Share button
    wx.updateTimelineShareData({ 
        title: '', // Share titles
        link: '', // Share links. The link domain name or path must be the same as the public number JS secure domain name corresponding to the current page.
        imgUrl: '', // Sharing icons
        success: function () {
          // Successful setup
        }
    })
});

Note here:

Shared links must be complete links containing http https protocols
Sharing icons must be full links containing http https protocols
Sharing settings must be set before users share them (sharing settings will download the corresponding sharing pictures, override the default settings of the sharing button)
After investigation, the two APIs need Wechat version 6.7.2 and above (data survey (June 27), version 6.7.2 and above seems to account for 73%, which is inaccurate through the small program base library.
- It didn't work. Maybe I had a problem with my posture, or did I use it incorrectly?

Sharing on Open Platform

In fact, except for Wechat and qq, the other forms of sharing still can not be covered. At this point, we need to configure each social sharing scenario.

The existing third-party social sharing controls are almost cool, because there is no money to make.

So we can either access sdk on the open platform by ourselves or use the open sharing middle page to share.

It is intolerable for operators and products to jump to intermediate pages for sharing operations.

For example, the following web page sharing method calls the sharing middle page directly.

define('share', [
    'zepto',
    'eventBus',
    'mixins'
], function (
    $,
    eventBus,
    mixins
) {
    const Modal = {
        type: 'share',
        init(opts = {}) {
            this.title = opts.title;
            this.summary = opts.summary;
            this.modal = $('#' + this.type + '-modal');
            this.initDoms();
            this.pic = this.doms.shareBar.data('pic');
            this.bindEvts();
        },

        update(opts) {
            this.title = opts.title;
            this.summary = opts.summary;
            this.pic = opts.pic || this.doms.shareBar.data('pic');
            this.url = opts.url;
        },
        initDoms() {
            this.doms = {
                tips: this.modal.find('.tips'),
                shareBar: this.modal.find('.share-bar'),
                close: this.modal.find('.close'),
                a: this.modal.find('a')
            };
        },
        hide() {
            this.modal.hide();
        },
        show() {
            if (mixins.type('wx') || mixins.type('wb') || mixins.type('qq')) {
                this.doms.tips.show();
            }
            else {
                this.doms.tips.hide();
            }
            this.modal.show();
        },
        bindEvts() {
            eventBus.on('modal', (type, showType) => {
                if (type === 'all' || type === this.type) {
                    switch (showType) {
                    case 'show':
                        this.show();
                        break;
                    case 'hide':
                        this.hide();
                        break;
                    default:
                        break;
                    }
                }
            });
            const doms = this.doms;
            doms.tips.on('click', () => {
                this.hide();
            });
            this.modal.on('click', () => {
                this.hide();
            });
            doms.a.on('click', function () {
                const $this = $(this);
                const type = $this.data('type');
                Modal.shareTo(type);
            });
        },
        _shareToQQ(href) {
            const encode = window.encodeURIComponent;
            let defaultDes = this.summary || ' Sharing Description';
            const p = {
                // Sharing links
                url: this.url || location.href,
                showcount: '1',
                // Sharing Description
                desc: defaultDes,
                // descript
                summary: defaultDes,
                title: this.title || defaultDes,
                pics: this.pic,
                style: '203',
                width: '32',
                height: '32',
                // Open Platform uid (Apparently, Forget)
                uid: 'xxxx',
                // eslint-disable-next-line camelcase
                data_track_clickback: 'true'
            };

            href = href + '?';
            let s = [];

            for (let i in p) {
                s.push(i + '=' + encode(p[i] || ''));
            }
            href = href + s.join('&');
            mixins.openLink(href);
        },
        _shareToWB() {
            const encode = window.encodeURIComponent;
            let defaultDes = this.summary || ' share';
            const p = {
                url: this.url || location.href,
                content: defaultDes,
                title: this.title || defaultDes,
                pic: this.pic,
                // Open platform appkey
                appkey: 0,
                // Relevant account uid
                ralateuid: 0
            };
            let href = 'http://service.weibo.com/share/share.php?';
            let s = [];

            for (let i in p) {
                s.push(i + '=' + encode(p[i] || ''));
            }
            href = href + s.join('&');
            mixins.openLink(href);
        },
        shareTo(type) {
            eventBus.trigger('share.to', type);
            switch (type) {
            case 'wx':
                break;
            case 'wb':
            case 'tsina':
                this._shareToWB();
                break;
            case 'qzone':
                this._shareToQQ('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey');
                break;
            case 'cqq':
                this._shareToQQ('http://connect.qq.com/widget/shareqq/index.html');
                break;
            default:
                break;
            }
        }
    };
    return {
        init(opts) {
            Modal.init(opts);
        },
        update(opts) {
            Modal.update(opts);
        }
    };
});

This way, if we don't accept it, we have another way. In the following chapter

Setting up with ogp

The Open Graph protocol

According to its brief introduction:

Allow any web page to form rich text objects in a social map
facebook
The initial goal was to integrate social experiences.

Large domestic factories (except for some app magic browsers) are basically compatible with this device, which can be used to specify card sharing content.

At least in my experiment, qq, Weixin and Weibo support are all good, compatible with the protocol.

Usage

<head>
    <meta property="og:type" content="website">
    <meta property="og:title" content="Share titles">
    <meta property="og:description" content="Sharing Description">
    <meta property="og:img" content="Full Shared Picture Link">
    <meta property="og:url" content="Complete Shared Page Address">
</head>

In addition to ogp, major manufacturers will customize the protocol to suit their own and their partners'social communications and other business, if necessary, please Baidu.

Well, society is progressing...