方法一:
大家经常通过微信分享信息,特别是公众号文章,可以显示清晰的标题、摘要描述、自定义图片和链接,分享效果很舒服,那么如何像分享公众号文章那样优雅的发送自己的网站文章呢?
平时更新了文章,都会通过微信发给朋友们阅读,之前都是直接复制链接发过去,直接却不直观,那么如何像公众号分享效果那样优雅的转发呢?
未添加代码前微信分享原始效果:
添加代码后自定义效果:
具体实现代码也很简洁,省去了网上常见的需要在微信公众号里进行设置、认证等环节,当然这段代码在核心处理上还是使用了微信的基础规则,想了解更多的话可以去阅读下微信的开发者文档。在实际使用时也很简单,只需要把下列代码 复制到你的网站源代码里即可,一般放在<head></head>之间即可,将代码中标注的地方换成你自己想要显示的标题、描述、链接、图片即可,无论是分享微信消息还是朋友圈发布均可实现自定义效果。
<!-- 微信转发代码 -->
<script>
/** 微信接口 **/
var appid = ''; // 应用id,如果有可以填,没有就留空
var descContent = '山猫博客'; // 分享后的描述信息
var shareTitle = '山猫博客'; // 分享后的标题
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>
使用这段代码有个注意事项,就是网站的域名需要备案,没有备案的域名分享会有问题,这可能是这段简化代码的硬伤吧。
方法二:
我们在制作好Wordpress网站以后,希望通过微信朋友圈分享给大家。但是发现这样分享到微信朋友圈是没有小图标的。如何在链接前增加吸引人的图片呢?
1、将以下代码粘贴到functions.php文件中。
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);
//获取文章中第一张图片的路径并输出
$first_img = $matches [1] [0];
//如果文章无图片,获取自定义图片
if(empty($first_img)){ //Defines a default image
$first_img = "/你的图片路径";
//请自行设置一张default.jpg图片
}
return $first_img;
}
2、在网页的头部加上以下代码,图片路径自行修改。
<head>
<div id="wx_pic" style="margin:0 auto;display:none;width:300px;height:300px;">
<img src="<?php echo catch_that_image() ?> " width="300px" height="300px">
</div>
</head>
3、制作像素是 300*300px的图片,命名为default.jpg。将图片放到媒体库。
4、保存好文件后,就可以分享到朋友圈了。此时分享的网页链接就会有小图片显示了。
注意事项:尺寸必须是300*300像素,否则在iphone手机上很可能显示不出来。
文章评论