新浪微博关注按钮遇到坑的解决法子

提醒:本文最后更新于 2881 天前,文中所描述的信息可能已发生改变,请仔细核实。


谈谈帮别人弄的新浪微博关注按钮遇到的坑。

官方推荐方式是声明命名空间,做法就是在HTML标签中增加XML命名空间
=>在HEAD或FOOTER中引入WB.JS
=>在需要部署微博关注按钮的位置粘贴WBML代码。

确实能用,但是就W3C会有错误,首先一个就是

Attribute xmlns:wb not allowed here. 

这是声明命名空间方式问题。IE导致的坑,如下解决(替换HTML标签)。

<!--[if lt IE 9 ]> <html <?php language_attributes(); ?> xmlns:wb="http://open.weibo.com/wb"> 
<!--[if (gte IE 9)|!(IE)]> <html <?php language_attributes(); ?> prefix="wb: http://open.weibo.com/wb">http://open.weibo.com/wb">

相关链接见W3C Namespaces in XML

第二个坑就是:

Element name wb:follow-button cannot be represented as XML 1.0.
Element wb:follow-button not allowed as child of element div in this context.

这个貌似是因为你的页面定义的不是XML所致,我最后也没解决。

微博开放平台对于这个问题没有回应,我还在V2EX发了贴,无人问津。

我只能说或许大家没这毛病???有没有人指点迷津啊。。。

我现在解决办法就是用了个间接办法,算是完美解决上述问题,而且还不麻烦。。。不用声明XML命名空间方式,而是用iframe,但这个标签,直接用貌似也会报,不止在W3C,在一些所谓SEO有关检测的站也会提示。

怎么办呢?所以要用间接方式。

在要添加按钮的标签中,定义ID(比如id="follow_weibo"),然后留空。

最后用如下js代码,需要jQuery(因为一般都会有加载),添加到你js文件,或者footer中(需要定义text/javascript类型的script)。

jQuery(document).ready(function($) {
$('#follow_weibo').html('<iframe src="http://widget.weibo.com/relationship/followbutton.php?btn=red&amp;style=2&amp;uid=你的ID&amp;width=宽度&amp;height=高度&amp;language=zh_cn&amp;dpc=1" width="宽度" height="高度" frameborder="0" scrolling="no" marginheight="0" allowtransparency="true"></iframe>');
});

通过js可以在页面加载完成后加载iframe框架,既利于SEO也利于W3C检测。。。这算不算作弊!?

而且还减少一开始的js请求,使请求最后加载。

需要改的地方,我已经在代码写了,有你的ID、宽度、高度要改成你自己想要的。

好了,文章结束,欢迎关注我的微博啦!

注:可惜关注按钮不支持HTTPS。

转载请注明转自:kn007的个人博客的《新浪微博关注按钮遇到坑的解决法子