利用新浪微博接口生成漂亮的微博卡片-阿里云开发者社区

开发者社区> 水灵儿> 正文

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

简介: 新浪微博开放平台(http://open.weibo.com/)提供了大量的接口API,如粉丝,微博,评论,用户读取等26个接口,共分为微博相关API,公共服务API,地理信息API等三大板块API。开发者只需注册开放平台App Key,即可利用开放平台提供的API测试工具测试各个不同的接口。
+关注继续查看

新浪微博开放平台(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;
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
sublime生成html骨架|学习笔记
快速学习 sublime生成html骨架
23 0
如何让接口文档自动生成,SpringBoot中Swagger的使用
在开发过程中,java后端需要与客户端进行交互,需要将后端的接口及参数写成文档给调用者查阅。一个问题也有此而生,需求改动频繁,接口设计也会随之改动,文档修改的不及时会带来很大的问题。 Swagger是一个自动生成文档的工具,可以在线查阅文档,减少了开发人员的负担,下面我们就来看看如何在SpringBoot中使用Swagger。
987 0
Docker 为 ASP.NET Core WebApi 应用程序生成 Docker 映像,创建容器并运行
1.使用VS2017新建ASP.NET Core WebApi项目 选择API启用Docker支持 2.为 ASP.NET Core WebApi 应用程序生成 Docker 映像,并创建容器运行 生成项目,将项目拷贝到 E:\web\aspnetcore.
1656 0
SIGIR-2018-EASR workshop keynote,阿士比亚:阿里巴巴智能内容生成实践
研讨会由罗格斯大学计算机系张永锋老师、加州大学圣克鲁兹分校计算机系张奕老师、清华大学计算机系张敏老师共同主办,张永锋老师现场主持。
1523 0
MyEclipse 从数据库反向生成Hibernate实体类
         第一个大步骤 window-->open Perspective-->MyEclipse Java Persistence 进行了上面的 操作后会出现一个视图DB Brower:MyEclipse Derby,点击右键新建一个在出现的面板中,driver templat...
810 0
vscode编辑器怎么用代码片段生成用户的文件模板?
vscode编辑器怎么用代码片段生成用户的文件模板?
546 0
RandomUser – 生成随机用户 JSON 数据的 API
  RandomUser 是一个 API,它为您提供了一个或者一批随机生成的用户。这些用户可以在 Web 应用程序原型中用作占位符,将节省您创建自己的占位符信息的时间。您可以使用 AJAX 或其他方法来调用 RandomUser 获取随机用户数据。
990 0
SSM框架——使用 MyBatis Generator 生成代码,包括:Model、Dao、Mapping
基于 SSM 框架开发,Mybatis 属于半自动 ORM,如果每个数据表相关的 Model、Dao、Mapping 都要自己动手去写,是不是很麻烦呢?工作量最大的就是书写Mapping的映射文件,而且手动书写很容易出错。
1152 0
+关注
水灵儿
www.zyl.me 爱折腾,喜欢造,花起钱来毫不心疼,事后沉默一周... 极简主义者,主从事Web开发兼前端爱好者。 全栈开发尝试者、自媒体、极简主义者、爱心极客
144
文章
83
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载