如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO

news/2024/5/20 14:22:01/文章来源:https://blog.csdn.net/cyjch/article/details/52129570

当下朋友圈很火,很多企业都将微信朋友圈作为品牌传播的途径,经常会发一些精彩的文章到微信朋友圈供大家自发传播,这样的想法很好,对于优质的内容,网友们也乐于转发与朋友们分享,对品牌宣传与推广确实是有好处的。

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

微信朋友圈:

如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO

分享网站文章到微信朋友圈,缩略图片不显示,怎么回事? 怎样实现分享网站文章到微信朋友圈时指定缩略图?

如何实现分享网站文章到微信朋友圈时,显示指定缩略图或指定LOGO等

通过微信公众平台发文章,需要登录微信公众平台,非常麻烦,而且不能同步到网站中,同一篇文章可能要在多在地方编辑发布,增加了人力和时间成本,有没有一劳永逸的办法呢?当然是有的,其中之一是做一个能在台式机、笔记本电脑、平板电脑、手机上显示出一致效果的网站(IT领域叫响应式网站或全屏幕适应网站),先在这个网站发布文章,然后通过在微信里扫描网址二维码,打开你的企业网站内页,就可以把网站上的文章分享到微信朋友圈了。

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

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

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

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

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

分享网站文章到微信朋友圈,缩略图片不显示的解决办法,实现分享网站文章到微信朋友圈时显示指定LOGO或缩略图的方法:

解决方法:

在我们的网站网页 html 代码中的<body>之后增加<img src="http://www.timsion.com/images/logo.jpg" width="0" height="0" />

注意事项:

1、这个logo.jpg图片尺寸不能太小,在120*100以上就可以了。
2、图片放到了body之后,微信应该会默认取页面中第一种图片。
3、用JPG图片,如果格式是png的,微信朋友圈可能会直接把他忽略了。
4、width和height都设为0,style不能设置为Display:none。
5、把http://www.timsion.com/images/logo.jpg这个地址改成你的图片地址。

通过这样弄,分享到微信朋友圈的网址文章就会显示缩略图,而且是显示文章内容中的第一张图片。

文章转载请注明来自天晟网络 > 建站经验 > 建站经验 > 
标题:如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO

加入以下代码,解决微信分享中的描述内容(原为网站地址)

<script type="text/javascript"> 
var tit = $('#wx-title').val(); //标题 
var img = $('#wx-img').val(); //图片 
var con = $('#wx-con').val(); //简介 
var link = $('#wx-link').val(); //链接 
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { 
// 发送给好友 
WeixinJSBridge.on('menu:share:appmessage', function (argv) { 
WeixinJSBridge.invoke('sendAppMessage', { 
"appid": "123", 
"img_url": img, 
"img_width": "160", 
"img_height": "160", 
"link": link, 
"desc": con, 
"title": tit 
}, function (res) { 
_report('send_msg', res.err_msg); 
}) 
}); 

// 分享到朋友圈 
WeixinJSBridge.on('menu:share:timeline', function (argv) { 
WeixinJSBridge.invoke('shareTimeline', { 
"img_url": img, 
"img_width": "160", 
"img_height": "160", 
"link": link, 
"desc": con, 
"title": tit 
}, function (res) { 
_report('timeline', res.err_msg); 
}); 
}); 
}, false) 
</script> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_795948.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

公安网站备案流程

具体的公安网站备案流程如下&#xff1a; 1、注册账号。打开全国公安机关互联网站安全管理服务平台&#xff0c;如果已经有账号可以直接登录&#xff0c;没有的话就点击登录框下方的“没有账号&#xff1f;注册”进行注册&#xff08;需要手机配合&#xff09;。 2、添加开办主…

网站部署发布到互联网等整套流程

阅读对象&#xff1a;不会发布网站到互联网的人&#xff0c;不懂得域名和空间或者不会用的人&#xff0c;一直想装逼让别人看却没能得逞的人 如果你是上面几种人&#xff0c;那么这篇博客绝对适合你&#xff0c;废话少说进入正题。 1.网站发布 参考链接:http://www.cnblogs.com…

更改 Odoo 网站图标

更改 Odoo 网站图标 更改 Odoo 网站图标与更改网页中其它图片的方式不一样&#xff0c;原因是默认情况下&#xff0c;这个图标是从公司资料中的图标复制过来的&#xff0c;而不是从图库中选择的&#xff0c;所以要先把公司图标设置好&#xff0c;再让系统重新复制过来。 之前…

asp.net网站发布到服务器GET的技能

刚刚知道映射网络驱动器的作用&#xff08;虽然才知道&#xff0c;但是我高兴&#xff09; 把服务器上的硬盘或者其他电脑共享给你的盘映射到本地&#xff0c;就和操作本地硬盘一样。 双击计算机-》映射网络驱动器-》上面选择驱动器号 下面文件夹框里-》写上服务器的地址\\....…

网络营销相关缩写名称CPM CPT CPC CPA CPS SEM SEO解析

网络营销相关缩写名称CPM CPT CPC CPA CPS SEM SEO解析 CPM CPT CPC CPA CPS SEM SEO在网络营销中是什么意思&#xff1f;SEO和SEM的区别是&#xff1f; CPM(Cost Per Mille&#xff0c;或者Cost Per Thousand;Cost Per Impressions) 每千人成本。千人成本是一种媒体或媒体排期…

PS设计漂亮网站主页图片的实例教程

制作一个好的网页&#xff0c;需要花费大量的时间&#xff0c;包含的内容也是非常多的&#xff0c;其中有按钮、横幅、图标及其它素材等。制作的时候先规划好大致的框架&#xff0c;然后由上至下慢慢细化各部分的内容&#xff0c;注意好整体搭配。最终效果 一、在我们打开PSD网…

java与seo_seo和java哪个更好

一个seo行业站点&#xff0c;科学的内容制作应该与seo相关&#xff0c;且内容本身是有人搜索的。seo和java哪个更好是有人搜索的语句&#xff0c;且与seo是强相关的&#xff0c;对于seo教程自学网来讲&#xff0c;这样的内容再适合不过了。 任何一门技术&#xff0c;如果精通&a…

为什么网站服务器不存在了,解决无服务器问题:你如何管理那些不存在的东西?...

功能即服务(FaaS)技术&#xff0c;即使在私有云中也经历了大规模应用&#xff0c;并且很容易理解为什么。无服务器的承诺很简单&#xff1a;开发人员和IT团队可以完全不用担心他们的基础架构&#xff0c;系统软件和网络配置。无需负载平衡&#xff0c;调整资源以进行扩展&#…

织梦后台友情链接网站Logo图片路径变成flixnk和后台内容编辑器里行内样式变成stxyle...

后台图片友情链接flink变成fli<x>nk 后台内容编辑器里行内样式变成st<x>yle 解决方法 1、打开 /include/datalistcp.class.php 文件&#xff0c;找到 $replacement substr($ra[$i], 0, 2).<x>.substr($ra[$i], 2); 改成 $replacement substr($ra[$i], 0, 2…

windows服务器怎么建设网站,windows服务器网站数据备份的方法

针对目前服务器情况可适用的网站数据备份类型包括&#xff1a; 服务器IIS备份、web网站数据备份、网站数据库备份。服务器IIS备份&#xff1a;服务器的IIS配置可只用等软件备份&#xff0c;避免了IIS配置出错后&#xff0c;需要恢复的麻烦。web网站数据备份&#xff1a;网站数据…

IIS上的项目网站关闭Http请求中的Trace和OPTIONS

目的&#xff1a;阻止一些注入漏洞。 方法一&#xff1a; 1、打开服务器IIS&#xff0c;在网站节点下选中相应网站&#xff0c;在右侧IIS下双击“请求筛选”&#xff0c;如图&#xff1a; 2、进入如图所示页面&#xff0c;选中tab标签的HTTP谓词&#xff0c;点击右侧“拒绝谓词…

怎样在云服务器上登录网站,怎样在云服务器上登录网站

怎样在云服务器上登录网站 内容精选换一换为弹性云服务器配置的安全组规则未生效。以下排查思路根据原因的出现概率进行排序&#xff0c;建议您从高频率原因往低频率原因排查&#xff0c;从而帮助您快速找到问题的原因。如果解决完某个可能原因仍未解决问题&#xff0c;请继续排…

html动态页面制作_网站开发的三个时代:网页制作、前端开发、后端开发

网站开发共经历了三个时代分别是“网页制作”、“前端开发”、“后端开发”。下边谈一谈这三个时代分别是怎样的&#xff0c;和千锋广州小编一起来看看吧。网页制作网页制作是Web 1.0时代的产物&#xff0c;产生在2005年左右。那个时候的网页主要是静态页面。静态页面就是能使用…

python局域网访问主机网站_用python打造一个基于socket的文件(夹)传输系统

这段时间在学习python&#xff0c;接触到了网络编程中的socket这块&#xff0c;加上自己在用的Linux服务器都是原生支持python的&#xff0c;于是乎有了个做文件传输功能程序的想法。毕竟python语言中&#xff0c;有下载功能的框架一抓一大把&#xff0c;但是主机与主机间快速搭…

php网站开发文本格式设置,html文件是纯文本文件吗

html文件是纯文本文件。HTML文本是由HTML命令组成的描述性文本&#xff0c;是一种静态的网页文件。HTML文件在编辑时只能写入纯文本&#xff0c;无法像“.doc”文档那样直接为文字内容做样式。本教程操作环境&#xff1a;windows7系统、CSS3&&HTML5版、Dell G3电脑。Fi…

浅谈跨网站脚本攻击(XSS)的手段与防范(简析新浪微博XSS攻击事件)

本文主要涉及内容&#xff1a; 什么是XSSXSS攻击手段和目的XSS的防范新浪微博攻击事件什么是XSS 跨网站脚本&#xff08;Cross-sitescripting&#xff0c;通常简称为XSS或跨站脚本或跨站脚本攻击&#xff09;是一种网站应用程序的安全漏洞攻击&#xff0c;是代码注入的一种。它…

如何将网站的搜索功能加入到浏览器的搜索框 (IE7/FF2)

1.效果图: Internet Explorer 7 Firefox 2/3 2. 实现方式 创建一个包含Open Search协议的XML文档. 新手可以访问 http://www.microsoft.com/windows/ie/searchguide/, 利用微软提供的这个页面方便快速生成这个XML文档代码(点View XML), 然后保存到你的网站目录中 (比如 /opense…

9. R语言学习或者贝叶斯学习比较好的资源网站

随手记录好网站 1.【R语言相关】 http://adv-r.had.co.nz/ 是关于R语言的一些比较高级的用法&#xff0c;其中http://adv-r.had.co.nz/C-interface.html 是对R语言的C接口的一个比较详细的介绍&#xff0c;帮了很多忙&#xff01;R和C接口的问题太难百度了&#xff01;这个网站…

一步步教你为网站开发Android客户端

#友盟杯#一步步教你为网站开发Android客户端 楼主 发表于 2011-11-29 10:30:10|查看: 10907|回复: 225本帖最后由 liupeinye 于 2011-11-30 10:37 编辑 本文参与&#xff1a;友盟—安卓巴士Android开发原创教程大赛本文面向Android初级开发者&#xff0c;有一定的Java和Android…

关于电脑的基础知识_SEO优化基础知识(新手必备)

现在网上关于SEO优化的知识很多也很杂&#xff0c;很多新手都不知道如何选择&#xff0c;于是对各种SEO优化基础知识我们进行了整理&#xff0c;但不是很详细&#xff0c;不过希望能帮助SEO新手更多的了解一下seo基础知识。 一、选好主域名并做好URL标准化通常情况下我们都会将…