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

问题

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.

回答1:

[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);

回答2:

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

来源：https://stackoverflow.com/questions/22636071/wechat-sharing-how-to-change-re-share-description-and-thumbnail

标签

javascript

html

wechat