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

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

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

  1. 向网页嵌入微博秀时,需要的uid简单,但需要的verifier值有点难获取,原因在于原生成微博秀页面的 url 及其子链接均会被强制从http重定向跳转到https,此外其response中部分css引用失败导致页面无法完整显示;
  2. https页面是没法调用http下的js和css的;
  3. 微博秀是需要用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,今天还学到一招 - 微博未登陆时重定向提醒用户登录:
https://passport.weibo.cn/signin/login?r=http%3a%2f%2flegege007.coding.me%2fBeautify-cnblogs%2fweiboWidgets%2fweiboshow
手机版passport.weibo.cn与PC版passport.weibo.com共用cookie喔~

原创不易,记得支持一下喔~

原文地址:https://www.cnblogs.com/enjoy233/p/10349500.html

时间: 2024-04-07 21:50:15

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

win10教育版永久激活密钥 win10教育版激活码 win10教育版产品密钥2018(第三种方法亲测可用!)

有没有最新win10教育版激活密钥?win10教育版功能比较全面,增加了一些学术上需要的功能.有用户装了win10教育版,提示需要产品密钥,网上找到的win10教育版永久激活码大多失效,这边小编为大家整理2018最新的windows10教育版永久激活密钥. 系统推荐:免激活win10系统下载 说明:win10教育版密钥都是网络整理,不能保证100%可用,毕竟容易被封.其中批量版有激活次数限制,kms激活密钥则不用担心被封,kms密钥永久有效.零售版和VL版永久激活码和kms安装密钥激活步骤不一样

php发送邮件方法-亲测可用,email.class.php过期解决办法

php虽然提供了mail()函数,但并不好用,而PHPMailer是一个不错的邮件发送工具,使用起来也是非常简单!使用PHPMailer发送邮件: <?php header("content-type:text/html;charset=utf-8"); ini_set("magic_quotes_runtime",0); require 'class.phpmailer.php'; try { $mail = new PHPMailer(true); $ma

linux下升级gcc的方法 – 亲测可用

由于工作主要平台换到了linux上,而linux因为源上没有比较新的gcc,只有4.7,而我们用到了C++11, 只好自己升级了,升级方法也比较简单,就是耗时间. 1.下载gcc最新的源码包 wget http://gcc.skazkaforyou.com/releases/gcc-4.9.1/gcc-4.9.1.tar.gz 2.解压缩 tar -xf gcc-4.9.1.tar.gz豪享博娱乐城 3. cd gcc-4.9.1 4.运行download_prerequisites脚本, ./

VMWare虚拟机NAT上网方法 亲测可用

首先虚拟机的网卡要选择NAT 然后 在Virtual Network Editor中一定选上DHCP功能. 还要主机的服务必须开启.主机的VMnet8对应NAT模式,这个VMnet8的配置保持默认不要改,默认会有IP,不要设置成自动获取. 在虚拟机Windows系统的网卡设置必须自动获取.不能指定IP,不过DHCP每次分配的IP都是一样的相当于固定IP.

python3 django1.11 安装xadmin 的方法,亲测可用

1 首先需要Pip安装如下的包ip install django-crispy-forms pip install django-import-export pip install django-reversion pip install django-formtools pip install future pip install httplib2 pip install six 安装好以后用pip list看是这个样子的 2 从github下载xadmin 解压zip包,将xadmin目录复

使用@Autowired注解无法注入(使用service报空指针异常)的问题解决,亲测可用!

@Component public class CommMain{ @Autowired public SysTransRecordCommonService sysTransRecordCommonService; public void saveTrans(SysTransRecord sysTransRecord){ sysTransRecordCommonService.save(sysTransRecord); } } 出现无法正常注入的情况,网上找了很多方法,最终以下这种方法亲测可用

Android应用开发-小巫CSDN博客客户端之集成友盟社会化分享组件

Android应用开发-小巫CSDN博客客户端之集成友盟社会化分享组件 上一篇博客给大家介绍了如何分析网页并且使用jsoup这个库对html代码进行解析,本篇博客继续给大家介绍如何集成友盟社会化组件,如何使用SDK提供的API轻松实现多平台的社会化分享,官网的文档和Demo看起来很头疼的有木有,小巫在集成这个社会化的组件也有点烦躁,所以也需要各位耐心看下面的博文把友盟社会化组件集成到你的应用中去.为什么要选择友盟呢,这里也是答应了小喵的,要帮忙集成他们的服务,所以也顺带帮他们写一篇这样的博文,千

Android第三期 - sharesdk社会化分享组件

网站分享比较简单的一句js就可以了,但是手机就没有这么简单了,要有点小复杂,刚学Android两个月了,也再用第三方的Android开发组件,现在介绍给大家sharesdk.直接上代码!! 第一步:下载ShareSDK 官网 http://share.sharesdk.cn/Download 第二步:集成ShareSDK 进入ShareSDK解压目录,打开"Share SDK for Android"目录,可以找到"QuickIntegrater.jar",这个就是

自己封装的一个JS分享组件

因为工作的需求之前也封装过一个JS分享插件,集成了我们公司常用的几个分享平台. 但是总感觉之前的结构上很不理想,样式,行为揉成一起,心里想的做的完美,实际上总是很多的偏差,所以这次我对其进行了改版. 这次的核心就是:JS只负责事件+结构,也就是把功能实现出来,具体的外观样式,则使用者自己进行定义. 以下是新版分享插件的代码: 1 (function(root){ 2 'use strict'; 3 function share(params){ 4 5 this.params = params;