利用新浪微博接口生成漂亮的微博卡片

新浪微博开放平台（http://open.weibo.com/）提供了大量的接口API，如粉丝，微博，评论，用户读取等26个接口，共分为微博相关API，公共服务API，地理信息API等三大板块API。开发者只需注册开放平台App Key，即可利用开放平台提供的API测试工具测试各个不同的接口。本站很多地方都用到这些接口，如留言板中的地理位置，博客右侧的新浪用户卡片……

本文主要说的是利用新浪用户读取（https://api.weibo.com/2/users/show.json）接口生成一个漂亮的用户微博卡片。新浪接口授权相对严格，而此接口需要access_token和（uid或screen_name）两个必填参数，其中参数uid与screen_name二者必选其一，且只能选其一；并且接口升级后，对未授权本应用的uid，将无法获取其个人简介、认证原因、粉丝数、关注数、微博数及最近一条微博内容。 完整URL如下：https://api.weibo.com/2/statuses/public_timeline.json?access_token=你的access_token&uid=要获取信息的用户uid，该接口返回一个包含了该用户各种信息的json对象。

以下内容将以本站封装后的接口为例（与原接口字段稍有出入，请以原接口字段为准）讲解

JSON返回值

{
    "status": 1,
    "data": {
        "nick": "Smohan", //用户昵称
        "location": "四川 成都", //地理位置
        "description": "我是一名程序员，个人网站：www.smohan.net", //用户简介
        "rank": 14, //用户等级
        "photo": "http://tp2.sinaimg.cn/3061825921/180/40005623228/1", //用户头像
        "fans": 200, //粉丝数
        "friends": 36, //粉丝数
        "weibos": 339, //微博数
        "verified": true, //是否认证
        "verifiedType": 5, //认证类型
        "verifiedReason": "水墨寒个人网站  www.smohan.net 官方微博" //认证说明
    }
}

HTML结构

<?php
    $uid = $_GET['uid'];
    $data = Curl::get("http://www.smohan.net/api.php?apiname=auth&method=GetWeiboInfo&uid={$uid}",true);
    /**
    * 注意，Curl类为本站自定义类（By 坤哥），本站在不得到作者授权的情况下不提供，如果你对PHP有基础，应该明白。
    * 如果实在不明白，请百度，或者使用PHP内置方法file_get_contents来获取;
    * 当然，你也完全可以通过ajax（跨域后）读取
    */
?>
<div id="weiboShow">
    <div class="grid-weibo-show shadow-hover">
        <header>&nbsp;</header>
        <div class="content">
            <div class="avatar">
                <img src="<?php echo $data['data']['photo'];?>">
                <?php
                  if($data['data']['verified']){
                    echo '<span class="rank" ></span>';
                  }
                ?>
            </div>
            <h3 class="f-tac fs-16 fc-323"><?php echo $data['data']['nick'];?>"></h3>
            <p class="mt05 fs-12 fc-7e8 f-tac">
                <?php echo $data['data']['verifiedReason'] ? 
                      $data['data']['verifiedReason'] : 
                      $data['data']['description'];?>
            </p>
            <a class="u-btn-submit f-tdn" href="//weibo.com/<?php $uid;?>" target="_blank">
                <i class="icon-weibo"></i>立即关注
            </a>
        </div>
        <footer>
            <ul>
                <li><strong><?php echo $data['data']['friends'];?>"></strong><span>关注</span></li>
                <li><strong><?php echo $data['data']['fans'];?>"></strong><span>粉丝</span></li>
                <li><strong><?php echo $data['data']['weibos'];?>"></strong><span>微博</span></li>
            </ul>
        </footer>
    </div>
</div>

CSS样式

#weiboShow{
    background-color: #fff;
    min-height: 110px;
}
.grid-weibo-show{
    background-color: rgba(255,255,255,.7);
}
.grid-weibo-show header{
    height: 110px;
    background: url(../img/weibo.jpg) bottom center no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    animation: scaleBackground 2s linear;
}
@keyframes scaleBackground {
    from{transform: scale(1.3)}
    to{transform: scale(1)}
}
.grid-weibo-show .content{
    padding: 20px 20px 5px 20px;
}
.grid-weibo-show .avatar{
    width: 90px;
    height: 90px;
    padding: 5px;
    background-color: rgba(255,255,255,.3);
    border-radius: 100%;
    margin: -80px auto 0 auto;
    position: relative;
    z-index: 2;
}
.grid-weibo-show .avatar img{
    width: 90px;
    height: 90px;
    border-radius: 100%;
}
.grid-weibo-show .avatar .rank{
    display: block;
    width: 26px;
    height: 26px;
    background: url(../img/smohan_icons.png) -130px 0 ;
    position: absolute;
    bottom: 8px;
    right: 2px;
}
.grid-weibo-show .u-btn-submit{
    display: block;
    margin: 10px auto;
    width: 70%;
    border-radius: 2px;
}
.grid-weibo-show .u-btn-submit:hover{
    color: #fff;
}
.grid-weibo-show .u-btn-submit i{
    position: relative;
    top: 1px;
    margin-right: 5px;
}
.grid-weibo-show footer{
    border-top: 1px solid #e5e5e5
}
.grid-weibo-show footer ul{
    font-size: 0;
}
.grid-weibo-show footer li{
    display: inline-block;
    width: 33.333%;
    text-align: center;
    font-size: 14px;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 0;
}
.grid-weibo-show footer li a{
    display: block;
    padding: 10px 0;
    text-decoration: none!important;
}
.grid-weibo-show footer li strong,.grid-weibo-show footer li span{
    display: block;
    margin: 0 auto;
    color: #474646;
}
.grid-weibo-show li strong{
    font-family: Georgia;
    font-weight: 400;
    font-size: 18px;
    margin-top: -2px!important;
}
.grid-weibo-show footer li span{
    font-size: 12px;
    color: #7e878c;
    font-weight: normal;
}