共计 3212 个字符，预计需要花费 9 分钟才能阅读完成。
当今最全面可用的微博分享组件嵌入方法(亲测 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″，贴进公告即可，相应代码为:
<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… 末尾)。
<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/servic…，将相应的 js 贴到公告中即可(同样需要 src=”http://” 改为 src=”//”)。
关于微博 API，今天还学到一招 – 微博未登陆时重定向提醒用户登录：https://passport.weibo.cn/sig… 手机版 passport.weibo.cn 与 PC 版 passport.weibo.com 共用 cookie 喔~
原创不易，记得支持一下喔~<br/>
本文首发于本人博客园博客：https://www.cnblogs.com/enjoy….
