WordPress如何自定义标题、图片、链接分享到微信(无需公众号)

  • 4
  • 853 views
  • A+
所属分类:WEB前端
摘要

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

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

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

WordPress如何自定义标题、图片、链接分享到微信(无需公众号)

添加代码后自定义效果:

WordPress如何自定义标题、图片、链接分享到微信(无需公众号)

具体实现代码也很简洁,省去了网上常见的需要在微信公众号里进行设置、认证等环节,当然这段代码在核心处理上还是使用了微信的基础规则,想了解更多的话可以去阅读下微信的开发者文档。在实际使用时也很简单,只需要把下列代码 复制到你的网站源代码里即可,一般放在<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学堂还有新的心得,会再次更新与大家共享,希望这次的分享可以帮助到大家。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  4   博主  0

    • 666 666 0

      6666666666666666六

        • 勇之助 勇之助 5

          @666 大兄弟,你这是来注水的啊。。。

        • 头条新闻 头条新闻 1

          文章不错非常喜欢

          • 137博客 137博客 1

            好文章,谢谢分享,我的博客,欢迎回访