當今最全面可用的微博分享元件嵌入方法(親測2019年2月仍有效)
當今最全面可用的微博分享元件嵌入方法(親測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/weiboshow ，接下來按F12，點選開發者工具導航欄中的Source。
選擇灰色的那個點開，就可以看到相應的html程式碼：
然後另存為weiboshow.html放在本地，
最後修改程式碼中游標處的https為http，接著使用Chrome瀏覽器開啟本地的weiboshow.html，此時在左下角的框框中已出現uid和verifier。
2.對於第2個問題，為使得微博秀既能在http 和https形式(分別對應於https://www.cnblogs.com/enjoy233 和 http://www.cnblogs.com/enjoy233)下訪問部落格均能使用，方法也很簡單 。
將從網頁左下角複製到的程式碼中的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.使用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>
將其貼進公告即可。
c.將微博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>
最後一步還是將其貼進公告。
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="//")。
關於微博API，今天還學到一招 - 微博未登陸時重定向提醒使用者登入：
手機版passport.weibo.cn與PC版passport.weibo.com共用cookie喔~
原創不易，記得支援一下喔~