WordPress如何自定义标题、图片、链接分享到微信

8
8,489 views

A+

所属分类：WEB前端

摘要

大家经常通过微信分享信息，特别是公众号文章，可以显示清晰的标题、摘要描述、自定义图片和链接，分享效果很舒服，那么如何像分享公众号文章那样优雅的发送自己的网站文章呢？今天3z学堂就来教大家一个简单的方法。

3z学堂平时更新了文章，都会通过微信发给朋友们阅读，之前都是直接复制链接发过去，直接却不直观，那么如何像公众号分享效果那样优雅的转发呢？经过一番摸索，3z学堂终于找到了比较好的解决方案，今天特意整理了出来供大家取用。

未添加代码前微信分享原始效果：

添加代码后自定义效果：

具体实现代码也很简洁，省去了网上常见的需要在微信公众号里进行设置、认证等环节，当然这段代码在核心处理上还是使用了微信的基础规则，想了解更多的话可以去阅读下微信的开发者文档。在实际使用时也很简单，只需要把下列代码复制到你的网站源代码里即可，一般放在<head></head>之间即可，将代码中标注的地方换成你自己想要显示的标题、描述、链接、图片即可，无论是分享微信消息还是朋友圈发布均可实现自定义效果。

<!-- 微信转发代码 -->
<script>
/** 微信接口*/
var appid = '';  // 应用id,如果有可以填，没有就留空
var descContent = '3z学堂——只分享最有价值的干货';  // 分享后的描述信息
var shareTitle = '3z学堂';  // 分享后的标题
var imgUrl = 'http://www.3zschool.com/wp-content/uploads/2018/10/logo_50_50.jpg';  // 分享后展示的一张图片
var lineLink = window.location.href+'?fromtitle='+shareTitle; // 点击分享后跳转的页面地址

// 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// 发送给好友
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
	 "appid": appid,
	 "img_url": imgUrl,
	 "img_width": "200",
	 "img_height": "200",
	 "link": lineLink,
	 "desc": descContent,
	 "title": shareTitle
	}, function(res) {
	});
	});
	}, false);
</script>

使用这段代码有个注意事项，就是网站的域名需要备案，之前3z学堂也是捣鼓了好久才发现的，没有备案的域名分享会有问题，这可能是这段简化代码的硬伤吧，后续如果3z学堂还有新的心得，会再次更新与大家共享，希望这次的分享可以帮助到大家。

发表评论取消回复

目前评论：8 其中：访客 0 博主 0

666 0
回复 2019年7月20日下午8:16 沙发

6666666666666666六
- 勇之助 5
  回复 2019年7月22日上午11:50 1层
  
  @666 大兄弟，你这是来注水的啊。。。
头条新闻 1
回复 2019年8月11日上午12:52 板凳

文章不错非常喜欢
137博客 1
回复 2019年8月17日下午9:37 地板

好文章，谢谢分享，我的博客，欢迎回访
高社保 0
回复 2019年10月26日上午10:10 4楼

请问是把代码插入每个文章的位置，还是插入在首页，或者是其他说明地方呢？
- 勇之助 5
  回复 2019年11月24日下午11:14 1层
  
  @高社保放在你需要分享的页面即可，如果是整站都想使用的话，就放在网站源代码里。
wordpress建站吧 0
回复 2020年4月17日下午9:29 5楼

这个还有效么
- 勇之助 5
  回复 2020年4月19日下午8:46 1层
  
  @wordpress建站吧还可以用的，不过你的网站最好备案过，不然容易被微信屏蔽。

发表评论取消回复

目前评论：8 其中：访客 0 博主 0

登录 找回密码

登录找回密码