微信分享带标题/图片/摘要/链接

发表于 2015年04月14日
WordPress
更新于 2016年07月28日 5:23:08 上午

网站在微信中分享给好友或朋友圈会碰到下面这种现象

而官方的应该是这样，或者下面还有小标记的

在微信公众平台官方QA找到了答案，最后针对Wordpress略作修改

官方解释：微信JS-SDK说明文档

//分享链接的缩略图
var imgUrl = 'https://www.uedbox.com/wp-content/themes/goodluck/images/logo.png';
//分享链接的链接地址
var lineLink = 'https://www.uedbox.com/';
//分享链接的描述信息
var descContent = "体验盒子是一个关注网络安全，专注网络安全，分享网络资源的平台！";
//分享链接的标题
var shareTitle = "体验盒子 - 关注网络安全";
//一般为空 就好
var appid = '';

//分享给好友
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);
	});
}

// 当微信内置浏览器完成内部初始化后会触发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);

针对Wordpress修改代码为：

var imgUrl = document.getElementsByTagName("img")[0].src;
var lineLink = window.location.href;
var descContent = document.getElementById("description").content;
var shareTitle = document.title;
var appid = '';

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);
	});
}
// 当微信内置浏览器完成内部初始化后会触发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);

document.getElementsByTagName(“img”)[0].src 是获取当前网页中第一个img图片的链接作为微信分享的缩略图。

window.location.href 是获取当前网址Url。

document.getElementById(“description”).content 是获取网页「description」标签中的content值，也就是将Wordpress当前页面简介作为微信分享的摘要部分。

这里要注意的是在Wordpress中meta标签中description默认是name属性，而document.getElementById是需要设置ID的，否则获取不到简介。所以要对Wordpress中你使用的主题模板进行设置，方法如下：
编辑器打开 wp-content/themes/你的使用模板/functions.php
搜索 description 如下，按照下列图片添加： id=“description”。

description