分享网页文章到微信时如何自定义缩略图、链接、标题和摘要
微信(weixin)分享网页自定义缩略图、链接、标题和摘要
前些日子看见有人这样提问:从微信跳转到网页,用户可以点击微信浏览器右上方的“…”将页面分享,包括发送给朋友,分享到朋友圈,分享到腾讯微博,等等。但是在点击“发送给朋友”的按钮后,微信分享的页面会抽取出当前页面的一个图片,以及当前页面的链接作为描述。我的需求是:我想要在用户点击“发送给朋友”的按钮时,重置掉图片,页面的URL链接,而使用自己设置的另一张图片,链接URL作为描述,请问如何实现?
分享网页文章到微信时自定义缩略图、链接、标题和摘要的方法:
下面笔者就将上面问题笔者的解决方案贴出来,由于微信分享是通过WeixinJSBridge实现的。所以用户只需要将下面这段Js代码复制到网页中,定义好对应的参数即可。
var imgUrl = 'http://#www.timsion.com/xxx.jpg';
var lineLink = 'http://#www.timsion.com/904';
var descContent = "天晟网络 - 专注站长技术和互联网资讯!";
var shareTitle = '天晟网';
var appid = '';
function shareFriend() {
WeixinJSBridge.invoke('sendAppMessage',{
"appid": appid,
"img_url": imgUrl,
"img_width": "200",
"img_height": "200",
"link": lineLink,
"desc": descContent,
"title": shareTitle
}, function(res) {
//_report('send_msg', res.err_msg);
})
}
function shareTimeline() {
WeixinJSBridge.invoke('shareTimeline',{
"img_url": imgUrl,
"img_width": "200",
"img_height": "200",
"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);
});
}
// 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// 发送给好友
WeixinJSBridge.on('menu:share:appmessage', function(argv){
shareFriend();
});
// 分享到朋友圈
WeixinJSBridge.on('menu:share:timeline', function(argv){
shareTimeline();
});
// 分享到微博
WeixinJSBridge.on('menu:share:weibo', function(argv){
shareWeibo();
});
}, false);
如何实现分享网站文章到微信朋友圈时,显示指定缩略图或指定LOGO等
现在微信是时下最流行的社交媒体,只要有一个手机,就可以轻松玩转微信,所以,微信推广就成了站长朋友或微商们的一个非常重要的一个手段。如果你是一个站长,在分享自己网站文章到微信朋友圈时,可能会碰到一个奇怪的问题——分享网站文章到微信朋友圈缩略图却不显示(如下图,标红处就没有显示文章图片),分享网站文章到微信朋友圈,缩略图片不显示,怎么回事?