Complete Guide to Custom WeChat Sharing Links, Images, and Descriptions

Implementing Custom WeChat Sharing

Within the WeChat in-app browser, when a user clicks menu options like 'Send to Friend' or 'Share to Moments', the default behavior is to capture the current page's title, description, and first image. To customize the shared link, image, and description, you must use the official WeChat JS-SDK.

Standard Implementation: Using the WeChat JS-SDK

Follow these steps to implement custom sharing using WeChat JS-SDK version 1.6.0 or later.

Step 1: Include the JS File and Configure

Include the WeChat JS-SDK in your page and configure it using signature data obtained from your backend server.

<script src='https://res.wx.qq.com/open/js/jweixin-1.6.0.js'></script>
<script>
    // configData should be fetched from your backend
    wx.config({
        debug: false,
        appId: 'YOUR_APPID',
        timestamp: configData.timestamp,
        nonceStr: configData.nonceStr,
        signature: configData.signature,
        jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData'
        ]
    });
</script>

Step 2: Define the Share Content

Inside the wx.ready callback, call the APIs to define the content for sharing to friends and to the timeline.

<script>
    wx.ready(function () {
        // Customize 'Share to Friend'
        wx.updateAppMessageShareData({
            title: 'Custom Share Title',
            desc: 'Custom share description.',
            link: 'https://yourdomain.com/path',
            imgUrl: 'https://yourdomain.com/image.jpg',
            success: function () {
                console.log('Friend share configured.');
            }
        });

        // Customize 'Share to Moments'
        wx.updateTimelineShareData({
            title: 'Custom Moments Title',
            link: 'https://yourdomain.com/path',
            imgUrl: 'https://yourdomain.com/image.jpg',
            success: function () {
                console.log('Moments share configured.');
            }
        });
    });
</script>

Key Requirements and Notes

• Domain Verification: The domain in your link must be listed in the 'JS Interface Security Domain' settings of your Official Account.
• Signature Generation: The configuration signature must be generated by your backend server. Never expose your AppSecret on the frontend.
• Image Specifications: The imgUrl must be an absolute URL. Use a square image, ideally 300x300 pixels or larger.
• API Updates: Always refer to the official WeChat documentation for the latest API details.

Important: Avoid the Legacy WeixinJSBridge

The old WeixinJSBridge API is deprecated and unreliable. New projects must use the official JS-SDK method described above.