个人站点添加微博关注

个人站点添加微博关注

周末闲着无聊想往站点上加个新浪微博关注按钮,找到微博开放平台上的说明:http://open.weibo.com/widget/followbutton.php  步骤比较清晰,但是官方说明还是略显简单了些,相信有些人会懵圈,所以结合我在wordpress上的配置过程,再大致说明下:

1. 配置微博组件样式

打开新浪微博开放平台的微博组件,根据个人喜好和网站风格生成关注按钮样式:

个人站点添加微博关注个人站点添加微博关注2. 部署代码

个人站点添加微博关注个人站点添加微博关注
这里实际上是对wordpress主题下的header.php(文件路径为wordpress/wp-content/themes/fengyunII/header.php)
个人站点添加微博关注
个人站点添加微博关注

一、在HTML标签中增加XML命名空间

打开wordpress主题下的header.php(文件路径为wordpress/wp-content/themes/fengyunII/header.php),将如下代码加到<html>里:

<html xmlns:wb=”http://open.weibo.com/wb”>

二、在HEAD头中引入WB.JS

在wordpress主题下的header.php(文件路径为wordpress/wp-content/themes/fengyunII/header.php),将如下代码加到<head>…</head>之间:
(注:也可以加在footer.php的<body></body>之间)

<script src=”http://tjs.sjs.sinajs.cn/open/api/js/wb.js” type=”text/javascript” charset=”utf-8″></script>

三、粘贴WBML代码

方式一: 

进入到wordpress的仪表盘——>外观——>小工具,添加文本小工具,将如下代码添加到框中:(注:用户id得根据自己设置)

<wb:follow-button uid=”用户ID” type=”red_2″ width=”136″ height=”24″ ></wb:follow-button>

效果如下:
个人站点添加微博关注个人站点添加微博关注
方式二:
我想要的是这个效果,所以又做了些简单设置:
个人站点添加微博关注个人站点添加微博关注
wordpress/wp-content/themes/fengyunII/inc/widget/feed_email.php
将原代码区域
个人站点添加微博关注个人站点添加微博关注
增加以下代码:
<h3 class=”widget-title”>关注本站<div class=”weibo”><wb:follow-button uid=”1636103223″ type=”gray_2″ width=”136″ height=”24″ ></wb:follow-button><div class=”clear”></div></div></h3>

搞定,刷新即可看效果。

(2015.6.13 周六 午休)

文章出自:http://www.truewow.net/82.html 版权所有,禁止全文转载。

关于本文作者:大侠冯七公