Weibo Share assembly method of embedding the most comprehensive available (pro-test is still effective February 2019)
Has recently been looking for a way to use currently available micro-blog to share components, we found three pit:
- When embedded show to microblogging website, it needs uid simple, but a little difficult to obtain the desired value verifier, because the original generation micro-blog show page url and its sub-links are forced to jump from http redirect to https, in addition its response in part lead to the failure cited css page can not be displayed completely;
- https pages are not calling js and css under the http;
- Microblogging show is the need to use iframe embed, blog parks default does not support iframe tags, you can add iframe constructed by a string to resolve, but also can directly replace the iframe embed tags.
For the 5th edition microblogging (weibo v5), its corresponding URL microblogging components are: https://open.weibo.com/widgets ,
its specific use: microblogging show - official website Sina Weibo JSSDK and for the fourth edition microblogging (weibo v4), the URL of the microblogging components as: http://app.weibo.com/tool , compared with the fifth edition of the missing components in Version 4 very important "microblogging show" component.
Here to introduce me to solve successfully embedded into blog garden microblogging show the method and can be displayed in the HTTP / HTTPS:
1. acquiring microblogging show parameters uid and verifier
using Chrome open microblogging login page https: // weibo. COM , and then open the micro-blog show page https://app.weibo.com/tool/weiboshow , next press F12, click Source Developer tools in the navigation bar.
Select the gray that point on, you can see the corresponding html code:
Then save as weiboshow.html on the local,
Last Modified https code at the cursor as http, then use the Chrome browser to open a local weiboshow.html, this time uid and verifier has appeared in the box in the lower left corner.
Indeed not saved as a local html file line, respectively, the first search code in Figure 2 corresponds to the html, " $uid", " $CONFIG.$checkKey", taken = right value, known to uid = '2606405674' and verifier = 'd5cf5ffc'.
2. For the second issue, such as Twitter show both in the form of http and https (corresponding to https://www.cnblogs.com/enjoy233 and http://www.cnblogs.com/enjoy233 ) Accessing the blog can use, it is also very simple.
From the lower left corner of the page to copy the code in the src = "http: //" instead src = "//" can be.
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="//")。
About Weibo API, today also learned a trick - Login redirect to alert the user when not logged microblogging:
https://passport.weibo.cn/signin/login?r=http%3A%2F%2Flegege007.coding.me % 2FBeautify-cnblogs% 2FweiboWidgets% 2Fweiboshow
Mobile version and the PC version passport.weibo.com passport.weibo.cn common cookie Oh ~
The original is not easy, remember to support what oh ~
This article first appeared in my garden blog blog: https://www.cnblogs.com/enjoy233/p/10349500.html .
