【移动应用开发技术】如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO_第1页
【移动应用开发技术】如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO_第2页
【移动应用开发技术】如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO_第3页
【移动应用开发技术】如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO_第4页
【移动应用开发技术】如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO_第5页
免费预览已结束，剩余1页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

【移动应用开发技术】如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO

当下朋友圈很火，很多企业都将微信朋友圈作为品牌传播的途径，经常会发一些精彩的文章到微信朋友圈供大家自发传播，这样的想法很好，对于优质的内容，网友们也乐于转发与朋友们分享，对品牌宣传与推广确实是有好处的。现在微信是时下最流行的社交媒体，只要有一个手机，就可以轻松玩转微信，所以，微信推广就成了站长朋友或微商们的一个非常重要的一个手段。如果你是一个站长，在分享自己网站文章到微信朋友圈时，可能会碰到一个奇怪的问题——微信朋友圈：分享网站文章到微信朋友圈,缩略图片不显示,怎么回事?怎样实现分享网站文章到微信朋友圈时指定缩略图？

如何实现分享网站文章到微信朋友圈时，显示指定缩略图或指定LOGO等通过微信公众平台发文章，需要登录微信公众平台，非常麻烦，而且不能同步到网站中，同一篇文章可能要在多在地方编辑发布，增加了人力和时间成本，有没有一劳永逸的办法呢？当然是有的，其中之一是做一个能在台式机、笔记本电脑、平板电脑、手机上显示出一致效果的网站（IT领域叫响应式网站或全屏幕适应网站），先在这个网站发布文章，然后通过在微信里扫描网址二维码，打开你的企业网站内页，就可以把网站上的文章分享到微信朋友圈了。分享网站文章到微信朋友圈时，显示指定缩略图或指定LOGO，这样的好处很多，一是增加品牌的曝光率和美誉度（这是与你的网站发的网站直接相关的），二是可以增加网站的访问量，对于提高网站在搜索收获的收录及自然提名是很有好处的。但使用这种方法的企业经常会遇到这样的问题：1）文章中没有图片时分享出去的缩略图一栏是空白的（图片无法加载的那种情形），显示效果非常差；2）文章的图片无法被抓取成为缩略图；3）文章里有多张图片时自己想要设为封面的图片无法实现。分享网页到微信朋友圈，怎样才能带缩略图？微信官方没有公布其抓取缩略图的规则，有做这方面探索的人会发现自己发布在文章的图片有时会抓取，有时又被忽略，“时灵时不灵”，相当郁闷，其实，可以通过一些技术手段来利用朋友圈分享网页的规则，实现想达到的效果。具体方法如下：1）如果你想在分享的文章中固定设置为贵公司的LOGO，可以在每一篇文章的内容中放一个隐藏的LOGO图片，记住，不要使用Display:none;的方法设置，只需把img的width和height属性都设置为0即可；2）如果你希望文章有图片时抓取文章图片作为缩略图，内容中没有图片时默认使用公司的LOGO，则可以把隐藏的logo放到文章末尾，自然就能实现这样的效果了。分享网站文章到微信朋友圈，缩略图片不显示的解决办法，实现分享网站文章到微信朋友圈时显示指定LOGO或缩略图的方法：解决方法：在我们的网站网页

html

代码中的<body>之后增加<img

src="/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、把/images/logo.jpg这个地址改成你的图片地址。<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,

"titl

人人文库> 全部分类> 专业文献 > IT计算机

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论