当今最全面可用的微博分享组件嵌入方法(亲测2019年2月仍有效)
最近一直在找一种目前可用的微博分享组件的使用方法,发现有3个大坑:
- 向网页嵌入微博秀时,需要的uid简单,但需要的verifier值有点难获取,原因在于原生成微博秀页面的 及其子链接均会被强制从http重定向跳转到https,此外其response中部分css引用失败导致页面无法完整显示;
- https页面是没法调用http下的js和css的;
- 微博秀是需要用iframe来嵌入的,博客园默认不支持iframe标签,可通过构造字符串的方式添加iframe来解决,也可以直接用embed标签替换掉iframe。
选择灰色的那个点开,就可以看到相应的html代码:
weiboShowCap2
然后另存为weiboshow.html放在本地,
weiboShowCap3
weiboShowCap4
事实上不保存为本地的html文件也行,在第2张图对应的html代码中分别搜索"$uid
", "$CONFIG.$checkKey
",取出=右边的值,即可知uid='2606405674'和verifier='d5cf5ffc'。
3.解决问题3目前已知如下3种方法(以上述截图上微博的uid=2606405674&verifier=d5cf5ffc为例):
a.复制左下角的代码,在其基础上 将iframe改为embed,删除 frameborder="0",贴进公告即可,
相应代码为:
<embed width="100%" height="550" class="share_self" scrolling="no"
b.使用html5
的另一个标签object
.
<object 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"
document.getElementById('weiboshow').innerHTML = weibocode;
</script>
</div>
将其贴进公告即可。
<html
<script type="text/javascript" charset="utf-8"></script>
<wb:show uid="2606405674" width="850" verifier="d5cf5ffc"></wb:show>
最后一步还是将其贴进公告。
亲测可知,后面这种官方推荐的方法在移动端也能正常显示,但iframe
有些浏览器(比如: iPhone自带的Safari就不显示)不支持。
ps: 点赞按钮的相应代码为:
<html
<script 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有时会出故障。
weiboShowCap5
原创不易,记得支持一下喔~