目前可用的微博秀的嵌入方法大全(親測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有時會出故障。