WeChat sharing, how to change re-share description and thumbnail?
Asked Answered
G

2

6

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 overcome 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.

Goebbels answered 25/3, 2014 at 13:27 Comment(1)
Just a note on this because I struggled finding the most recent documentation in English it is available here: mp.weixin.qq.com/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.Lonilonier
H
4

[Not working since WeChat published the new JS SDK] This is solution form WeChat: http://mp.weixin.qq.com/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);

Hauteloire answered 26/3, 2014 at 22:16 Comment(3)
That did it! Thanks, and as an added bonus, it works without having a WeChat app id.Goebbels
I tried to use the above, but it is giving me following error - TypeError: WeixinJSBridge.invoke is not a function WeixinJSBridge.invoke('shareTimeline',{ I should be missing simething. Any clue on this ?Lathrope
@Wen's answer is out-dated. It is not supported anymore. Wechat published the new JS SDK in Jan 2015.Challis
U
0

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.com/wechatapi/messages-moments

Upcountry answered 2/12, 2014 at 20:10 Comment(2)
Thanks @John Wang. In my particular case it was a PhoneGap html/js app, so accepted solution is still the better fit (not stated in the question itself, but can be deduced from the tags). But that does look interesting for those writing native iOS apps like this. And great to see documentation in English as well.Goebbels
The URL link is brokenVarner

© 2022 - 2024 — McMap. All rights reserved.