javascript - WeChat sharing, how to change re-share description and thumbnail? - Stack Overflow

admin管理员组

文章数量:1353700

Question

Is there a way to provide a custom title, description and thumbnail for when my website pages are shared from within WeChat?

Background

We have an iPhone app from which users can publish/share posts with their friends using WeChat (aka Weixin).

When sharing from the app a title, a description and an image are posted via the API for the shared page (these display as desired when shared from the app). Once shared the friends open these pages in WeChat (and not our app).

The problem is that when the friends re-share our pages using WeChat's own share button it loses the description we provided. It will re-share with the HTML title tag, the first image on the page (stretched or squished to a square thumbnail) and where the description was originally it just shows the URL of the page.

I have tried providing descriptions in a description meta tag but to no luck. I have even tried Facebook style/open graph og:description meta tags.

Sidenote

I have looked through the source on a Chinese site that seems to have overe this issue. I think it's solved using a javascript plugin of some sort called WeixinJSBridge. Unfortunately I have been unable to uncover any documentation in English - My Chinese isn't great, and by not great I mean, I can't read a word.

Question

Is there a way to provide a custom title, description and thumbnail for when my website pages are shared from within WeChat?

Background

We have an iPhone app from which users can publish/share posts with their friends using WeChat (aka Weixin).

When sharing from the app a title, a description and an image are posted via the API for the shared page (these display as desired when shared from the app). Once shared the friends open these pages in WeChat (and not our app).

The problem is that when the friends re-share our pages using WeChat's own share button it loses the description we provided. It will re-share with the HTML title tag, the first image on the page (stretched or squished to a square thumbnail) and where the description was originally it just shows the URL of the page.

I have tried providing descriptions in a description meta tag but to no luck. I have even tried Facebook style/open graph og:description meta tags.

Sidenote

I have looked through the source on a Chinese site that seems to have overe this issue. I think it's solved using a javascript plugin of some sort called WeixinJSBridge. Unfortunately I have been unable to uncover any documentation in English - My Chinese isn't great, and by not great I mean, I can't read a word.

• javascript
• html
• wechat

Share Improve this question Follow edited May 3, 2019 at 13:40 Cœur 38.8k2525 gold badges205205 silver badges277277 bronze badges asked Mar 25, 2014 at 13:27 davurdavur 1,43811 gold badge1616 silver badges3838 bronze badges 1

• Just a note on this because I struggled finding the most recent documentation in English it is available here: mp.weixin.qq./wiki?t=resource/… - the part &lang=en_US at the end will be replaced if you open it and you cannot find out about the option easily. – Hendrik Commented Jul 22, 2019 at 7:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

[Not working since WeChat published the new JS SDK] This is solution form WeChat: http://mp.weixin.qq./qa/index.php?qa=3163 However, there are all Chinese. The code you could try is below:

var imgUrl = 'http://xxx/your-share-icon.png';
var lineLink = 'http://xxx/your-share-link';
var descContent = "your-content-desc";
var shareTitle = 'you-share-title';
var appid = 'your-app-id (from WeChat)';

function shareFriend() {
    WeixinJSBridge.invoke('sendAppMessage',{
                            "appid": appid,
                            "img_url": imgUrl,
                            "img_width": "640",
                            "img_height": "640",
                            "link": lineLink,
                            "desc": descContent,
                            "title": shareTitle
                            }, function(res) {
                            _report('send_msg', res.err_msg);
                            })
}
function shareTimeline() {
    WeixinJSBridge.invoke('shareTimeline',{
                            "img_url": imgUrl,
                            "img_width": "640",
                            "img_height": "640",
                            "link": lineLink,
                            "desc": descContent,
                            "title": shareTitle
                            }, function(res) {
                            _report('timeline', res.err_msg);
                            });
}
function shareWeibo() {
    WeixinJSBridge.invoke('shareWeibo',{
                            "content": descContent,
                            "url": lineLink,
                            }, function(res) {
                            _report('weibo', res.err_msg);
                            });
}
// WeChat browser will initial by above function and trigger WeixinJSBridgeReady event.
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {

        // share to friend
        WeixinJSBridge.on('menu:share:appmessage', function(argv){
            shareFriend();
            });

        // share to timeline
        WeixinJSBridge.on('menu:share:timeline', function(argv){
            shareTimeline();
            });

        // share to weibo
        WeixinJSBridge.on('menu:share:weibo', function(argv){
            shareWeibo();
            });
        }, false);

Actually right now WeChat does provide iOS/Andriod SDK for share content in Moments or with friend, and here is the English documentation for that: http://dev.wechat./wechatapi/messages-moments

本文标签： javascriptWeChat sharinghow to change reshare description and thumbnailStack Overflow