专栏首页大白技术控的技术自留地目前可用的微博秀的嵌入方法大全(亲测2019年2月仍有效)

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

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

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

  1. 向网页嵌入微博秀时,需要的uid简单,但需要的verifier值有点难获取,原因在于原生成微博秀页面的 url 及其子链接均会被强制从http重定向跳转到https,此外其response中部分css引用失败导致页面无法完整显示;
  2. https页面是没法调用http下的js和css的;
  3. 微博秀是需要用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/weiboshow ,接下来按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/enjoy233)下访问博客均能使用,方法也很简单。 将从网页左下角复制到的代码中的src=“http://” 改为src="//" 即可。

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

<embed width="100%" height="550" class="share_self" scrolling="no" src="//widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=2&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=2606405674&verifier=d5cf5ffc&dpc=1"></embed>

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

<object data="//widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=2&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=1763628267&verifier=a1171a80&dpc=1" width="100%" height="550" type="text/html">
    Embedded data failed to be displayed.
</object>

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

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

<div id="weiboshow">
<script type="text/javascript">
var weibocode = '<if'
weibocode += 'rame width="100%" height="550" class="share_self"  frameborder="0" scrolling="no" src="//widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=2&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=2606405674&verifier=d5cf5ffc&dpc=1"></iframe>';
document.getElementById('weiboshow').innerHTML = weibocode;
</script>
</div>

将其贴进公告即可。

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

<html xmlns:wb="//open.weibo.com/wb">
<script src="//tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>

<wb:show uid="2606405674" width="850" verifier="d5cf5ffc"></wb:show>

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

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

<html xmlns:wb="//open.weibo.com/wb">
<script src="//tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>

<div> 
<wb:follow-button uid="1763628267" type="red_3" width="100%" height="90"></wb:follow-button>
</div>

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

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

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

关于微博API,今天还学到一招 - 微博未登陆时重定向提醒用户登录: https://passport.weibo.cn/signin/login?r=http%3A%2F%2Flegege007.coding.me%2FBeautify-cnblogs%2FweiboWidgets%2Fweiboshow 手机版passport.weibo.cn与PC版passport.weibo.com共用cookie喔~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ASP.NET Core开发者成长路线图

    来源: MoienTajik/AspNetCore-Developer-Roadmap.

    Enjoy233
  • 前端小白也能快速学会的博客园博客美化全攻略[附源码]

    官方介绍: 博客皮肤模板 http://skintemplate.cnblogs.com/

    Enjoy233
  • 携程校招2017编程题之股票最大利润

    有一个数组来存储一支股票每天的价格,例如第i天的股票价格为prices[i]。 现在我们至多做一次股票交易,最多买入一次,卖出一次,设计一个算法求我们买股...

    Enjoy233
  • .NET ORM 的 “SOD蜜”--零基础入门篇

    PDF.NET SOD框架不仅仅是一个ORM,但是它的ORM功能是独具特色的,我在博客中已经多次介绍,但都是原理性的,可能不少初学的朋友还是觉得复杂,其实,SO...

    用户1177503
  • 关于Uinicode的一个“有趣的”事情

    本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载 故事是这样开始的 产品K: 为什么我们的网站不能显示火星文? 开发L: 什么样的火星文...

    IMWeb前端团队
  • 关于Uinicode的一个“有趣的”事情

    作为一个技术很一般的前端很快发现这个和知乎的font-family的设置有关系,因为它设置了PingFang SC字体。作为一个喜欢问问题的前端那就要问 问题...

    IMWeb前端团队
  • 【系统监控】性能监测 vmstat,mpstat,iostat

    uptime命令用于查看服务器运行了多长时间以及有多少个用户登录,快速获知服务器运行的负载情况。 load average,显示了最近1,5,15分钟的负荷情...

    chaplinthink
  • 国际化之货币符号显示

    我发现手机上显示的货币符号跟实际遇到的可能不一样,为此我逐一查询了不同国家/地区的显示。大部分是确定的,有几个国家不太确定。

    meteoric
  • Fluentd项目

    说明:Fluentd是一个开源的数据收集器,它允许您统一数据收集和消耗,以便更好地使用和理解数据。Fluentd从各种数据源收集事件,将其写入文件、RDBMS、...

    CNCF
  • [C#3] 4-匿名类型

    1.DEMO 使用匿名类型: static void Main() { var someType = new { Name = "乱舞春秋", Age ...

    blackheart

扫码关注云+社区

领取腾讯云代金券