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

本文主要说的是利用新浪用户读取(https://api.weibo.com/2/users/show.json)接口生成一个漂亮的用户微博卡片。新浪接口授权相对严格,而此接口需要access_token和(uidscreen_name)两个必填参数,其中参数uidscreen_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;
}

-- EOF --

本文标题:利用新浪微博接口生成漂亮的微博卡片

本文链接:https://smohan.net/blog/iqdfmw

本站使用「 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 」创作共享协议,转载或使用请署名并注明出处。 相关说明 »

更多文章

评论 「 ... 」