kn007的个人博客
♥ You are here: Home > > > 新浪微博关注按钮遇到坑的解决法子

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

by | 25 Comments

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

官方推荐方式是声明命名空间,做法就是在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、宽度、高度要改成你自己想要的。

好了,文章结束,欢迎关注我的微博啦!
QQ截图20150211125638
注:可惜关注按钮不支持HTTPS。

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

donate
有所帮助?

Comments

25 Comments立即评论
Loading...
  1. :shock: 不用微博久已

    1. MOD回复

      @hannah: 我佛慈悲

  2. 已关注 哈哈 :lol:

    1. MOD回复

      @World: 。。。互相关注了~ :mrgreen:

  3. LV1回复

    没用这个功能。

    1. MOD回复

      @Finle: :mrgreen: 我也没用。。

  4. 回复

    放弃微博的人都是不明智的啊。微信也没那么牛。转的东西也还是微博吃剩的 :o

    1. LV2回复

      @大福: 这位少年,和我学做饭吧

    2. MOD回复

      @牧风: :mrgreen: 听起来很美味的样子

    3. 回复

      @牧风: :o 拿手的是? :?:

    4. MOD回复

      @大福: :o 微博是个好东西,微信也是个好东西

    5. @大福: 你很有天赋,和我学做菜吧~

    6. MOD回复

      @大发: 你们俩!!!不许来我这勾引妹仔。。

  5. 哈哈,什么W3C检测都没有玩过,咋整?

    1. MOD回复

      @geekdai: 凉拌。检测地址:validator.w3.org。说实在我都很久没观察了。要不是有人老是用这个来访问我vps,我还都忘了

  6. 什么微博、微信一概不玩~

    1. MOD回复

      @lingyun: :razz: 没有也挺好的

  7. 代码溢出来啦

    1. MOD回复

      @kagami: 我chrome没溢出啊。。什么浏览器和版本?加下Q吧:890048

    2. MOD回复

      @kagami: IE11也没问题、FF也没问题啊 :o

    3. MOD回复

      @kagami: 你QQ多少。。你网站挂了,HTTP 500。建立数据库连接时出错

    4. @kn007: 好了已经~

    5. MOD回复

      @kagami: :cry: :cry: 刚得空。准备洗完睡觉

  8. 各种坑

    提前祝您,新春快乐
    羊年大吉
    羊年发财

    1. MOD回复

      @天长地久: 呀呀,各种感谢,你也是大吉大利、升官发财!

icon_wink.gificon_neutral.gificon_mad.gificon_twisted.gificon_smile.gificon_eek.gificon_sad.gificon_rolleyes.gificon_razz.gificon_redface.gificon_surprised.gificon_mrgreen.gificon_lol.gificon_idea.gificon_biggrin.gificon_evil.gificon_cry.gificon_cool.gificon_arrow.gificon_confused.gificon_question.gificon_exclaim.gif