资讯专栏INFORMATION COLUMN

目前可用的微博秀的嵌入方法大全(亲测2019年2月仍有效)

luckyyulin / 2994人阅读

摘要:对于第个问题,为使得微博秀既能在和形式分别对应于和,方法也很简单。将微博的版本应用到微博秀上,直接使用微博官方提供的来解决,该方法微博的组件接口中赞同就是类似的参看网页末尾。

当今最全面可用的微博分享组件嵌入方法(亲测2019年2月仍有效)

最近一直在找一种目前可用的微博分享组件的使用方法,发现有3个大坑:

向网页嵌入微博秀时,需要的uid简单,但需要的verifier值有点难获取,原因在于原生成微博秀页面的 url 及其子链接均会被强制从http重定向跳转到https,此外其response中部分css引用失败导致页面无法完整显示;

https页面是没法调用http下的js和css的;

微博秀是需要用iframe来嵌入的,博客园默认不支持iframe标签,可通过构造字符串的方式添加iframe来解决,也可以直接用embed标签替换掉iframe。

对于微博第5版(weibo v5),其相应的微博组件的网址为: https://open.weibo.com/widgets ,
及其具体使用方法为: 微博秀-新浪微博JSSDK官方网站,而对于微博第4版(weibo v4),相应的微博组件的网址为: http://app.weibo.com/tool ,相比之下第5版的组件中丢失了第4版中很重要的"微博秀"组件.

下面来介绍我解决向博客园中成功嵌入微博秀且在http/https下均能显示的方法:
1.获取微博秀的参数uid和verifier
使用Chrome打开微博登录页面 https://weibo.com, 然后打开微博秀页面 https://app.weibo.com/tool/we... ,接下来按F12,点击开发者工具导航栏中的Source。

选择灰色的那个点开,就可以看到相应的html代码:

然后另存为weiboshow.html放在本地,

最后修改代码中光标处的https为http,接着使用Chrome浏览器打开本地的weiboshow.html,此时在左下角的框框中已出现uid和verifier。

事实上不保存为本地的html文件也行,在第2张图对应的html代码中分别搜索"$uid", "$CONFIG.$checkKey",取出=右边的值,即可知uid="2606405674"和verifier="d5cf5ffc"。

2.对于第2个问题,为使得微博秀既能在http 和https形式(分别对应于https://www.cnblogs.com/enjoy233 和 http://www.cnblogs.com/enjoy2...,方法也很简单。
将从网页左下角复制到的代码中的src="http://" 改为src="//" 即可。

3.解决问题3目前已知如下3种方法(以上述截图上微博的uid=2606405674&verifier=d5cf5ffc为例):
a.复制左下角的代码,在其基础上 将iframe改为embed,删除 frameborder="0",贴进公告即可,
相应代码为:

b.使用html5的另一个标签object.


    Embedded data failed to be displayed.

目前本人博客正是使用这种方法,在移动端也能正常显示~

c.使用JavaScript去动态拼接iframe,相应代码为:

将其贴进公告即可。

d.将微博v5的版本应用到微博秀上,直接使用微博官方提供的wb.js来解决,该方法微博v5的组件接口中"赞同"就是类似的(参看网页
https://open.weibo.com/widget... 末尾)。




最后一步还是将其贴进公告。
亲测可知,后面这种官方推荐的方法在移动端也能正常显示,但iframe有些浏览器(比如: iPhone自带的Safari就不显示)不支持。

ps: 点赞按钮的相应代码为:




对于上述几种方法,读者只需将uid=2606405674&verifier=d5cf5ffc换为自己微博的相应值即可。

如果偶尔出现如下问题,是正常的,刷新一下就可以解决,原因是微博官方的API有时会出故障。

好啦,此时所以的问题都解决了,希望对君有用。至于豆瓣秀就很简单了,打开豆瓣收藏秀 https://www.douban.com/servic...,将相应的js贴到公告中即可(同样需要src="http://" 改为src="//")。

关于微博API,今天还学到一招 - 微博未登陆时重定向提醒用户登录:
https://passport.weibo.cn/sig...
手机版passport.weibo.cn与PC版passport.weibo.com共用cookie喔~

原创不易,记得支持一下喔~

本文首发于本人博客园博客:https://www.cnblogs.com/enjoy....

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101657.html

相关文章

  • 前端小白也能快速学会的博客园博客美化全攻略

    摘要:前端小白也能快速学会的博客园博客美化全攻略呦,博客园的自我修养是什么第一条,别只顾收藏和偷师呀,记得点推荐或关注本人喔美化方法论简介一般而言,需要选一个默认的,然后在该基础上调整。或者也可进博客园园子页面,发状态博客园团队,申请开通权限。 前端小白也能快速学会的博客园博客美化全攻略 A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点推荐或关注本人喔~ 美化方法论简...

    StonePanda 评论0 收藏0
  • 前端开发者手册2019

    摘要:年,和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后,前端开发者可以从浏览器开发中学习到,编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助,通过深入现代化的前端工程课程来提高你的技能。 下载:PDF ...

    church 评论0 收藏0
  • 前端开发者手册2019

    摘要:年,和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后,前端开发者可以从浏览器开发中学习到,编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助,通过深入现代化的前端工程课程来提高你的技能。 下载:PDF ...

    xiao7cn 评论0 收藏0
  • 前端开发者手册2019

    摘要:年,和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后,前端开发者可以从浏览器开发中学习到,编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助,通过深入现代化的前端工程课程来提高你的技能。 下载:PDF ...

    邹立鹏 评论0 收藏0
  • 1月第1周业务风控关注| 国家网信办启动专项行动 剑指12类违法违规互联网信息

    摘要:国家网信办启动专项行动剑指类违法违规互联网信息近日,针对网络生态问题频发各类有害信息屡禁不止等突出问题,为积极回应民众关切,国家网信办启动网络生态治理专项行动。中国铁路总公司官方微博回应网传信息不实,网站未发生用户信息泄露。 易盾业务风控周报每周呈报值得关注的安全技术和事件,包括但不限于内容安全、移动安全、业务安全和网络安全,帮助企业提高警惕,规避这些似小实大、影响业务健康发展的安全风...

    张巨伟 评论0 收藏0

发表评论

0条评论

luckyyulin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<