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

时间 2019-11-10

标签目前可用微博嵌入方法大全 2019年 2月有效繁體版

原文原文链接

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

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

向网页嵌入微博秀时，须要的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版中很重要的"微博秀"组件.php

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

选择灰色的那个点开，就能够看到相应的html代码：
html

而后另存为weiboshow.html放在本地，
html5

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

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

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

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.cookie

<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....