分享网页文章到微信时如何自定义缩略图、链接、标题和摘要

2016-03-25 00:00  来源:Timsion.com  评论:  点击:
前些日子看见有人这样提问:从微信跳转到网页,用户可以点击微信浏览器右上方的“…”将页面分享,包括发送给朋友,分享到朋友圈,分享到腾讯微博,等等。
分享网页文章到微信时如何自定义缩略图、链接、标题和摘要

微信(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等

现在微信是时下最流行的社交媒体,只要有一个手机,就可以轻松玩转微信,所以,微信推广就成了站长朋友或微商们的一个非常重要的一个手段。如果你是一个站长,在分享自己网站文章到微信朋友圈时,可能会碰到一个奇怪的问题——分享网站文章到微信朋友圈缩略图却不显示(如下图,标红处就没有显示文章图片),分享网站文章到微信朋友圈,缩略图片不显示,怎么回事? 

怎样实现分享网站文章到微信朋友圈时指定缩略图?

分享网站文章到微信朋友圈时,显示指定缩略图或指定LOGO,这样的好处很多,一是增加品牌的曝光率和美誉度(这是与你的网站发的网站直接相关的),二是可以增加网站的访问量,对于提高网站在搜索收获的收录及自然提名是很有好处的。但使用这种方法的企业经常会遇到这样的问题:1)文章中没有图片时分享出去的缩略图一栏是空白的(图片无法加载的那种情形),显示效果非常差;2)文章的图片无法被抓取成为缩略图;3)文章里有多张图片时自己想要设为封面的图片无法实现。

分享网页到微信朋友圈,怎样才能带缩略图?

微信官方没有公布其抓取缩略图的规则,有做这方面探索的人会发现自己发布在文章的图片有时会抓取,有时又被忽略,“时灵时不灵”,相当郁闷,其实,可以通过一些技术手段来利用朋友圈分享网页的规则,实现想达到的效果。具体方法如下:

1)如果你想在分享的文章中固定设置为贵公司的LOGO,可以在每一篇文章的内容中放一个隐藏的LOGO图片,记住,不要使用Display:none;的方法设置,只需把img的width和height属性都设置为0即可;

2)如果你希望文章有图片时抓取文章图片作为缩略图,内容中没有图片时默认使用公司的LOGO,则可以把隐藏的logo放到文章末尾,自然就能实现这样的效果了。

代码示例:

在我们的网站网页 html 代码中的<body>之后增加

<img src=http://www.timsion.com/uploadfile/2016/0325/20160325075328672.jpg" width="0" height="0" />

应用时注意把http://www.timsion.com/images/logo.jpg这个地址改成你的图片地址。

文章转载请注明来自天晟网络 > 建站经验 > 建站经验 >
标题:分享网页文章到微信时如何自定义缩略图、链接、标题和摘要
网址:http://www.timsion.com/web_exp/35747.html

关键词:分享网页 自定义缩略图 自定义摘要

上一篇:分享文章到微信朋友圈显示指定缩略图或LOGO如何实现
下一篇:通过微信朋友圈分享链接的网址后面会被加上 &from=timeline&isappinstalled=0

免责声明:以上内容来自互联网和用户投稿,不代表本站的观点和立场,版权归原作者所有,如有侵权,请与我们联系。